/* tokens.css — SUMBER TUNGGAL variable warna/spacing. Di-load PALING AWAL sebelum CSS lain. */
/* Dark mode = bawaan (Dark Luxury). Light mode = override [data-theme="light"], keduanya WAJIB lolos WCAG 2.1 AA. */

:root {
  /* ── Warna brand (SSOT) ── */
  --color-bg: #080c12;
  --color-gold: #c9a227;
  --color-forest-green: #1a3d2b;

  /* ── Turunan warna ── */
  --color-gold-bright: #e6c65a;
  --color-gold-deep: #9a7a1a;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-strong: rgba(255, 255, 255, 0.08);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-gold: rgba(201, 162, 39, 0.5);
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.72);
  --color-success: #4cd98a;
  --color-error: #ff8a80;
  --color-glow: rgba(201, 162, 39, 0.45);
  --color-backdrop: rgba(8, 12, 18, 0.7);

  /* ── 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: 24px;
  --radius-pill: 999px;

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

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

  /* ── Elevasi ── */
  --shadow-glow: 0 0 24px var(--color-glow);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.35);
  --blur-glass: 12px;

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

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

  color-scheme: dark;
}

/* Light mode — bukan sekadar warna dibalik: kontras diukur ulang agar teks & emas tetap terbaca (AA) */
:root[data-theme="light"] {
  --color-bg: #f6f3ea;
  --color-gold: #8a6a12;
  --color-gold-bright: #a8851c;
  --color-gold-deep: #6d5310;
  --color-surface: rgba(8, 12, 18, 0.04);
  --color-surface-strong: rgba(8, 12, 18, 0.07);
  --color-border: rgba(8, 12, 18, 0.14);
  --color-border-gold: rgba(138, 106, 18, 0.55);
  --color-text: #12161c;
  --color-text-muted: rgba(18, 22, 28, 0.72);
  --color-error: #b3261e;
  --color-glow: rgba(138, 106, 18, 0.3);
  --color-backdrop: rgba(246, 243, 234, 0.75);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.12);
  color-scheme: light;
}