/* ============================================================
   theme.css — Variabel Warna untuk Dark & Light Mode
   Load setelah Tailwind CDN, sebelum <style> kustom tiap halaman.
   ============================================================ */

:root {
  /* ===== LIGHT MODE (default, tanpa class .dark) ===== */
  --bg-page:        #f8fafc;
  --bg-card:        #ffffff;
  --bg-card-soft:   #f1f5f9;
  --bg-input:       #ffffff;
  --border-color:   #e2e8f0;
  --border-soft:    #cbd5e1;

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-tertiary:  #94a3b8;
  --text-placeholder: #94a3b8;

  --primary:        #3b82f6;
  --primary-dark:   #2563eb;
  --primary-light:  #60a5fa;
  --primary-soft-bg: rgba(59,130,246,0.08);
  --primary-border: rgba(59,130,246,0.25);

  --shadow-card: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-elevated: 0 10px 30px rgba(15,23,42,0.10);

  --scrollbar-track: #f1f5f9;

  --nav-bg: rgba(255,255,255,0.95);
  --header-bg: rgba(255,255,255,0.95);
}

html.dark {
  /* ===== DARK MODE (class .dark di <html>) ===== */
  --bg-page:        #0f172a;
  --bg-card:        #1e293b;
  --bg-card-soft:   #0f172a;
  --bg-input:       #0f172a;
  --border-color:   #334155;
  --border-soft:    #334155;

  --text-primary:   #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-tertiary:  #64748b;
  --text-placeholder: #475569;

  --primary:        #3b82f6;
  --primary-dark:   #2563eb;
  --primary-light:  #60a5fa;
  --primary-soft-bg: rgba(59,130,246,0.10);
  --primary-border: rgba(59,130,246,0.25);

  --shadow-card: 0 4px 15px rgba(0,0,0,0.25);
  --shadow-elevated: 0 20px 60px rgba(0,0,0,0.4);

  --scrollbar-track: #0f172a;

  --nav-bg: rgba(15,23,42,0.97);
  --header-bg: rgba(15,23,42,0.97);
}

/* ============================================================
   Kelas utilitas umum — dipakai menggantikan hex hardcode lama.
   Halaman lama pakai class Tailwind seperti bg-dark, bg-dark-card,
   text-white, dll yang hardcode gelap. Kelas baru di bawah ini
   otomatis ikut tema aktif.
   ============================================================ */

body.themed {
  background: var(--bg-page);
  color: var(--text-primary);
  transition: background 0.2s ease, color 0.2s ease;
}

.themed-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
}

.themed-card-soft {
  background: var(--bg-card-soft);
}

.themed-input {
  background: var(--bg-input);
  border: 1.5px solid var(--border-color);
  color: var(--text-primary);
}
.themed-input::placeholder { color: var(--text-placeholder); }
.themed-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft-bg);
}

.themed-text-primary   { color: var(--text-primary); }
.themed-text-secondary { color: var(--text-secondary); }
.themed-text-tertiary  { color: var(--text-tertiary); }

.themed-border { border-color: var(--border-color); }

.themed-header,
.themed-nav {
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  border-color: var(--border-color);
}

.themed-scrollbar::-webkit-scrollbar-track { background: var(--scrollbar-track); }

/* Toggle switch mode tema (dipakai di halaman Profil) */
.theme-option {
  border: 1.5px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-secondary);
  transition: all 0.2s;
}
.theme-option.active {
  border-color: var(--primary);
  background: var(--primary-soft-bg);
  color: var(--primary);
}
