/* ============================================================
   VEEBO DESIGN TOKENS v3.0
   Fase 1 — Foundation only.
   Class baru (.btn-v3, .card-v3, .badge-v3, dst) belum dipakai
   markup apapun. Token --bg, --surface, --border OVERLAP dengan
   existing — value akan shift ke palet v3.0 (cream + navy + gold)
   karena keputusan user: full pivot.

   Source of truth: docs/redesign/spec-v3.0.md (TBD)
   ============================================================ */

/* ---- TIPOGRAFI ---- */
:root {
  --font-sans:    "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;
}

/* ---- PALET — LIGHT MODE ---- */
:root {
  /* Navy family */
  --navy:       #0f2547;
  --navy-dark:  #0a1a35;
  --navy-mid:   #1a3460;

  /* Gold family */
  --gold:       #f5b82e;
  --gold-dark:  #c9920a;
  --gold-soft:  #fef9e7;
  --gold-ink:   #7a5500;

  /* Backgrounds & surfaces — OVERLAP dengan existing --bg/--surface/--border.
     Value shift sengaja (full pivot v3.0). */
  --bg:         #f5efe6;
  --surface:    #fdfaf5;
  --surface-2:  #ede5d8;
  --border:     #ddd3c3;
  --border-str: #c9bfb0;

  /* Text — nama baru (--ink), tidak konflik dengan existing --text */
  --ink:        #0f1f36;
  --ink-2:      #2e3f55;
  --muted:      #7a8799;
  --muted-2:    #a0aab5;

  /* Sidebar active state (v3.0) */
  --sb-active-bg:  rgba(245, 184, 46, 0.14);
  --sb-active-txt: #f5b82e;

  /* Semantic colors */
  --success:      #1a7a4a;
  --success-soft: #e8f7ef;
  --success-ink:  #145c37;

  --warning:      #c07a00;
  --warning-soft: #fef6e0;
  --warning-ink:  #8a5500;

  --danger:       #b83030;
  --danger-soft:  #fdeaea;
  --danger-ink:   #8a2020;

  --info-soft:    #e8eef7;
}

/* ---- PALET — DARK MODE ----
   Selector cocok dengan toggle existing di base.html:283-313.
   Existing [data-theme="dark"] tetap berlaku; rule di sini muncul
   BELAKANG (urutan deklarasi) sehingga override --bg/--surface/--border
   ke palet v3.0 dark variant. Token --text/--text2/--text3 existing
   tetap dipertahankan (tidak diubah di sini) untuk hindari regresi
   pada markup lama yang masih pakai .sb-uname, .ph-sub, dll.
*/
[data-theme="dark"] {
  /* Backgrounds & surfaces — navy sebagai dark bg */
  --bg:         #0a1a35;
  --surface:    #0f2547;
  --surface-2:  #1a3460;
  --border:     rgba(255, 255, 255, 0.10);
  --border-str: rgba(255, 255, 255, 0.18);

  /* Text v3.0 ink (light text di atas navy) */
  --ink:        #f0f4f8;
  --ink-2:      #c8d4e0;
  --muted:      #7a8799;
  --muted-2:    #5a6a7a;

  /* Gold tetap konsisten di dark mode */
  --gold:       #f5b82e;
  --gold-dark:  #c9920a;
  --gold-soft:  rgba(245, 184, 46, 0.12);
  --gold-ink:   #f5b82e;

  /* Navy family dipertahankan untuk badge/aksen */
  --navy:       #0f2547;
  --navy-dark:  #0a1a35;
  --navy-mid:   #1a3460;

  /* Semantic — lebih soft di dark */
  --success:      #22a862;
  --success-soft: rgba(26, 122, 74, 0.20);
  --success-ink:  #6edaa0;

  --warning:      #e09000;
  --warning-soft: rgba(192, 122, 0, 0.20);
  --warning-ink:  #ffc84a;

  --danger:       #e04040;
  --danger-soft:  rgba(184, 48, 48, 0.20);
  --danger-ink:   #ff8080;

  --info-soft:    rgba(232, 238, 247, 0.10);

  /* Sidebar active — sama di kedua mode */
  --sb-active-bg:  rgba(245, 184, 46, 0.14);
  --sb-active-txt: #f5b82e;
}

/* Auto dark via prefers-color-scheme — match existing pattern di
   base.html:39-50. Hanya berlaku jika user belum eksplisit set theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0a1a35;
    --surface:    #0f2547;
    --surface-2:  #1a3460;
    --border:     rgba(255, 255, 255, 0.10);
    --border-str: rgba(255, 255, 255, 0.18);
    --ink:        #f0f4f8;
    --ink-2:      #c8d4e0;
    --muted:      #7a8799;
    --muted-2:    #5a6a7a;
    --gold-soft:  rgba(245, 184, 46, 0.12);
    --gold-ink:   #f5b82e;
    --success:      #22a862;
    --success-soft: rgba(26, 122, 74, 0.20);
    --success-ink:  #6edaa0;
    --warning:      #e09000;
    --warning-soft: rgba(192, 122, 0, 0.20);
    --warning-ink:  #ffc84a;
    --danger:       #e04040;
    --danger-soft:  rgba(184, 48, 48, 0.20);
    --danger-ink:   #ff8080;
    --info-soft:    rgba(232, 238, 247, 0.10);
  }
}

/* ---- DENSITY SYSTEM ----
   UI toggle TIDAK ditampilkan (defer post-pilot). Tokens tetap
   tersedia — bisa di-enable lewat profil/admin kapanpun dengan
   <html data-density="compact"> tanpa rebuild CSS.
   Default: comfortable.

   CATATAN: token --radius dan --radius-sm OVERLAP dengan existing
   (existing 10px/6px sama dengan comfortable). Value v3.0 sama
   untuk comfortable → zero impact. Compact/spacious akan beda.
*/
:root,
[data-density="comfortable"] {
  --pad:       24px;
  --pad-sm:    16px;
  --pad-lg:    32px;
  --gap:       16px;
  --gap-sm:    10px;
  --gap-lg:    24px;
  --radius:    10px;
  --radius-sm: 6px;
  --text-base: 15px;
  --text-sm:   13px;
  --text-xs:   11.5px;
}

[data-density="compact"] {
  --pad:       24px;
  --pad-sm:    12px;
  --pad-lg:    28px;
  --gap:       10px;
  --gap-sm:    6px;
  --gap-lg:    16px;
  --radius:    8px;
  --radius-sm: 4px;
  --text-base: 13.5px;
  --text-sm:   12px;
  --text-xs:   10.5px;
}

[data-density="spacious"] {
  --pad:       32px;
  --pad-sm:    22px;
  --pad-lg:    44px;
  --gap:       20px;
  --gap-sm:    14px;
  --gap-lg:    32px;
  --radius:    12px;
  --radius-sm: 8px;
  --text-base: 16px;
  --text-sm:   14px;
  --text-xs:   12.5px;
}