/* tokens.css — SUMBER TUNGGAL variable warna/spacing. Di-load PALING AWAL sebelum CSS lain. */
/* Dark mode = bawaan. Light mode = override [data-theme="light"], keduanya WAJIB lolos WCAG 2.1 AA.
   2026-10-20: palet butterfly.html (navy #080d19 + emas #e1bb75, editorial). Nama token lama (--color-*) tetap ada sebagai alias
   supaya section & feature-slot lama ikut palet baru tanpa diubah satu per satu. */

:root {
  /* ── Palet butterfly ── */
  --bg: #080d19;
  --bg2: #0d1424;
  --panel: #101a2b;
  --panel2: #142039;
  --ink: #f4f1eb;
  --soft: #cbd4df;
  --muted: #9ca9bb;
  --gold: #e1bb75;
  --goldBright: #f6d99a;
  --line: #b1a18440;
  --cyan: #68b2d7;
  --shadow: #02050bb3;
  --glass: #14213ac9;
  --corner: 19px;
  --header-bg: #090e1dc9;
  --gold-gradient: linear-gradient(135deg, #fce1a0, #d4aa5c 55%, #a97839);
  --gold-ink: #131920; /* teks di atas gradien emas */

  /* ── Alias nama lama (dipakai section/slot yang sudah ada) ── */
  --color-bg: var(--bg);
  --color-gold: var(--gold);
  --color-forest-green: #1a3d2b;
  --color-gold-bright: var(--goldBright);
  --color-gold-deep: #a97839;
  --color-surface: var(--panel);
  --color-surface-strong: var(--panel2);
  --color-border: var(--line);
  --color-border-gold: #e1bb7580;
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-success: #4cd98a;
  --color-error: #ff8a80;
  --color-glow: #d9a65c5e;
  --color-backdrop: #000b;
  --clay-bg: var(--panel);
  --clay-border: var(--line);
  --clay-radius: var(--corner);
  --clay-shadow: 0 20px 43px var(--shadow), inset 0 1px #fff1;
  --clay-header-bg: var(--header-bg);

  /* ── Social floating buttons ── */
  --social-btn-size: 40px;
  --social-btn-gap: 8px;
  --social-float-bottom: 24px;
  --social-float-right: 20px;

  /* ── Spacing & radius ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: var(--corner);
  --radius-pill: 999px;

  /* ── Sentuh & aksesibilitas ── */
  --touch-min: 44px;
  --focus-ring: 2px solid var(--goldBright);

  /* ── Lebar konten (PC/laptop WAJIB pas, tidak melar) ── */
  --container-max: 1510px;
  --content-max: 800px;
  --gutter: 24px;

  /* ── Elevasi ── */
  --shadow-glow: 0 0 20px var(--color-glow);
  --shadow-card: 0 20px 43px var(--shadow);
  --blur-glass: 18px;

  /* ── Durasi gerak ── */
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.6s;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── Z-index ── */
  --z-float: 999;
  --z-modal: 1000;
  --z-toast: 1001;

  color-scheme: dark;
}

/* Light mode — kontras diukur ulang (teks #182438 di #ebe7df, emas gelap #8b602c) */
:root[data-theme="light"] {
  --bg: #ebe7df;
  --bg2: #f5f2eb;
  --panel: #faf8f4;
  --panel2: #e9e5de;
  --ink: #182438;
  --soft: #3c4c60;
  --muted: #596a7d;
  --gold: #8b602c;
  --goldBright: #965e25;
  --line: #4b526452;
  --cyan: #356b90;
  --shadow: #68738634;
  --glass: #f5f2ebdf;
  --header-bg: #f1ede5dd;
  --color-error: #b3261e;
  --color-border-gold: #8b602c8c;
  color-scheme: light;
}