/* =====================================================================
   TOKENS — sistem desain "Navy Glass" (macOS Tahoe liquid-glass)
   Semua nilai visual hidup di sini. Komponen TIDAK boleh hardcode warna.
   ===================================================================== */

:root {
  /* ---------- Kedalaman navy (soft dark navy, hue ±256) ---------- */
  --bg-0: oklch(16% 0.036 257);           /* halaman */
  --bg-1: oklch(19.5% 0.04 256);          /* panel raised */
  --bg-2: oklch(23% 0.042 255);           /* panel tertinggi */
  --bg-sheet: oklch(13% 0.032 258 / .78); /* backdrop modal */

  /* ---------- Kaca (liquid glass) ---------- */
  --glass:             oklch(75% 0.06 256 / .07);
  --glass-strong:      oklch(78% 0.06 254 / .11);
  --glass-line:        oklch(85% 0.05 255 / .14);
  --glass-line-strong: oklch(88% 0.05 253 / .24);
  --glass-hi:          oklch(100% 0 0 / .10);      /* highlight tepi atas */
  --blur: saturate(1.7) blur(22px);
  --blur-soft: saturate(1.5) blur(14px);

  /* ---------- Teks ---------- */
  --ink:       oklch(96.5% 0.008 255);
  --ink-body:  oklch(87% 0.016 255);
  --ink-muted: oklch(74% 0.024 255);
  --ink-faint: oklch(62% 0.028 256);   /* hanya meta/dekoratif besar */

  /* ---------- Aksen ---------- */
  --blue:        oklch(64% 0.165 257);
  --blue-bright: oklch(73% 0.14 249);
  --blue-deep:   oklch(52% 0.185 261);
  --cyan:        oklch(81% 0.105 220);
  --wa:          oklch(70% 0.165 152);   /* WhatsApp / beli */
  --wa-deep:     oklch(56% 0.15 154);
  --green:       oklch(77% 0.15 155);    /* status tersedia */
  --price:       oklch(81% 0.135 78);    /* harga — amber hangat */
  --red:         oklch(66% 0.19 25);     /* diskon / sold */

  /* Tint chip aksen (latar translusen) */
  --blue-tint:  oklch(64% 0.165 257 / .16);
  --green-tint: oklch(77% 0.15 155 / .14);
  --price-tint: oklch(81% 0.135 78 / .13);
  --red-tint:   oklch(66% 0.19 25 / .16);

  /* ---------- Tier akun (diturunkan dari harga — lihat config.tiers) ---------- */
  --tier-basic-1:     oklch(74% 0.17 158);   /* hijau segar */
  --tier-basic-2:     oklch(52% 0.13 172);
  --tier-premium-1:   oklch(71% 0.15 249);   /* biru */
  --tier-premium-2:   oklch(50% 0.19 263);
  --tier-epic-1:      oklch(69% 0.21 312);   /* ungu */
  --tier-epic-2:      oklch(47% 0.21 291);
  --tier-legendary-1: oklch(89% 0.13 94);    /* emas terang */
  --tier-legendary-2: oklch(70% 0.15 68);    /* emas tua */
  --tier-ultimate-1:  oklch(61% 0.24 28);    /* merah sangar */
  --tier-ultimate-2:  oklch(24% 0.09 18);    /* merah-hitam */

  /* ---------- Rarity pemain ---------- */
  --r-epic:      oklch(71% 0.16 305);
  --r-bigtime:   oklch(83% 0.125 88);
  --r-showtime:  oklch(81% 0.105 220);
  --r-highlight: oklch(78% 0.10 175);
  --r-default:   var(--ink-muted);

  /* ---------- Tipografi ---------- */
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.28rem;
  --text-2xl:  1.6rem;
  --text-3xl:  clamp(1.75rem, 3.5vw, 2.1rem);
  --text-hero: clamp(2.35rem, 5.8vw, 4rem);

  /* ---------- Radius (Tahoe: besar & lembut) ---------- */
  --rad-xs: 7px;
  --rad-sm: 10px;
  --rad-md: 14px;
  --rad-lg: 19px;
  --rad-xl: 26px;
  --rad-2xl: 34px;
  --rad-full: 999px;

  /* ---------- Bayangan & glow ---------- */
  --shadow-1: 0 6px 22px oklch(10% 0.03 258 / .35);
  --shadow-2: 0 18px 48px oklch(9% 0.03 258 / .5);
  --shadow-glow-blue: 0 8px 34px oklch(64% 0.165 257 / .3);
  --shadow-glow-wa:   0 8px 34px oklch(70% 0.165 152 / .32);

  /* ---------- Motion ---------- */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out */
  --ease-io:  cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --container: 1180px;
  --pad: clamp(1rem, 4vw, 2rem);
  --nav-h: 62px;
  --tabbar-h: 62px;

  /* ---------- Z-scale semantik ---------- */
  --z-ticker: 5;
  --z-nav: 100;
  --z-fab: 150;
  --z-tabbar: 200;
  --z-sheet: 300;
  --z-lightbox: 400;
  --z-toast: 500;
}