/* Hallmark · genre: atmospheric (gelap) + sport-editorial (terang) · macrostructure: app shell (Arena HUD) · nav: top bar + mobile tab bar · footer: none (app)
 * theme: custom, dua tema (vibe: "lapangan pagi terang / arena malam, brand hitam putih kuning + palet pendamping")
 * light (default): paper oklch(97% 0.008 95) · kartu oklch(99.5% 0.003 95) · ink oklch(21% 0.014 95) · accent isi oklch(86% 0.170 92) · accent teks oklch(51% 0.110 70)
 * dark (opsional): paper oklch(14% 0.006 95) · accent oklch(88% 0.165 95) · panel siaran .bc selalu gelap (token --s-*)
 * pendamping: teal 195 · biru 255 · ungu 300 · coral 35 · hijau 150 · level nilai rendah->elite: 25 · 55 · 130 · 172 · 295
 * tier: rookie abu · bronze tembaga 50 · silver perak kebiruan 245 · gold 90 · platinum teal 190 · diamond biru-ungu 280 · master magenta 340
 * display Saira (expanded) + body Plus Jakarta Sans · axes: light+dark / display-heavy / warm · tone: technical-playful · anchor hue: 95
 * kontras teks terang (cek OKLCH->sRGB): ink 16:1, muted 8:1, faint 5.3:1, accent-text 5.4:1, level & pendamping >= 4.6:1 di atas kertas
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5
 */

/* ---------- token yang sama di kedua tema ---------- */
:root {
  /* tier: warna isi cerah (latar kartu koleksi, pita, sorot), sama di dua tema */
  --tf-rookie:   oklch(80% 0.015 250);
  --tf-bronze:   oklch(72% 0.120 50);
  --tf-silver:   oklch(85% 0.040 245);
  --tf-gold:     oklch(86% 0.160 90);
  --tf-platinum: oklch(80% 0.110 190);
  --tf-diamond:  oklch(72% 0.130 280);
  --tf-master:   oklch(68% 0.220 340);

  /* "layar": elemen yang SELALU gelap di kedua tema (panel siaran profil .bc) */
  --s-bg:        oklch(13% 0.018 240);
  --s-bg-2:      oklch(19% 0.030 240);
  --s-frame:     oklch(14% 0.020 235 / 0.55);
  --s-panel:     oklch(12% 0.020 235 / 0.62);
  --s-ink:       oklch(96% 0.006 95);
  --s-muted:     oklch(76% 0.012 240);
  --s-faint:     oklch(60% 0.012 240);
  --s-accent:    oklch(88% 0.165 95);
  --s-holo:      oklch(84% 0.110 210);
  --s-line:      oklch(84% 0.110 210 / 0.42);
  --s-dim:       oklch(84% 0.110 210 / 0.14);
  --s-flare:     oklch(97% 0.020 220 / 0.50);
  --s-floor:     oklch(46% 0.090 235 / 0.50);
  --s-bokeh-1:   oklch(90% 0.080 210 / 0.55);
  --s-bokeh-2:   oklch(90% 0.140 95 / 0.45);
  --s-photo-top: oklch(30% 0.045 232 / 0.55);
  --s-photo-bot: oklch(13% 0.020 235 / 0.70);
  --s-scan:      oklch(96% 0.006 95 / 0.04);
  --s-shadow:    oklch(5% 0.010 240 / 0.70);

  /* type */
  --font-display: "Saira", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wide: 125%;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(1.9rem, 3vw + 1rem, 2.6rem);
  --text-score: clamp(4.5rem, 16vw, 10rem);

  /* space (4pt) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;
  --cut: 14px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  --tabbar-h: 64px;
}

/* ---------- TEMA TERANG (default): kertas off-white hangat, kartu putih, garis halus ---------- */
:root, :root[data-theme="light"] {
  color-scheme: light;

  /* paper & ink */
  --c-paper:   oklch(97% 0.008 95);
  --c-paper-2: oklch(99.5% 0.003 95);
  --c-paper-3: oklch(95% 0.009 95);
  --c-paper-4: oklch(91.5% 0.011 95);
  --c-rule:    oklch(89.5% 0.010 95);
  --c-rule-2:  oklch(80% 0.012 95);
  --c-faint:   oklch(51% 0.012 95);
  --c-muted:   oklch(41% 0.012 95);
  --c-ink:     oklch(21% 0.014 95);

  /* brand: kuning = ISIAN (tombol primer, bar, titik); amber gelap = TEKS aksen */
  --c-accent:      oklch(86% 0.170 92);
  --c-accent-2:    oklch(81% 0.165 80);
  --c-accent-ink:  oklch(22% 0.030 90);
  --c-accent-text: oklch(51% 0.110 70);
  --c-accent-dim:  oklch(86% 0.170 92 / 0.22);
  --c-accent-line: oklch(68% 0.130 78 / 0.55);
  --c-focus:       oklch(55% 0.120 70);

  /* semantic (data only) */
  --c-win:   oklch(51% 0.140 150);
  --c-loss:  oklch(54% 0.190 27);
  --c-live:  oklch(58% 0.220 27);
  --c-info:  oklch(52% 0.130 245);
  --c-wa:    oklch(50% 0.130 150);

  /* tier: warna TEKS & garis (aman di atas putih) */
  --t-rookie:   oklch(48% 0.015 250);
  --t-bronze:   oklch(50% 0.110 48);
  --t-silver:   oklch(48% 0.050 250);
  --t-gold:     oklch(53% 0.105 82);
  --t-platinum: oklch(50% 0.080 195);
  --t-diamond:  oklch(48% 0.160 280);
  --t-master:   oklch(50% 0.210 340);

  /* palet pendamping (variasi aksen per bagian/chip/ikon/kartu statistik) */
  --c-pal-1: oklch(52% 0.085 195);  /* teal */
  --c-pal-2: oklch(52% 0.150 255);  /* biru */
  --c-pal-3: oklch(52% 0.170 300);  /* ungu */
  --c-pal-4: oklch(55% 0.170 35);   /* coral */
  --c-pal-5: oklch(52% 0.130 150);  /* hijau */

  /* skala level nilai atribut 0..99 (C.lv) */
  --lv-elite: oklch(50% 0.190 295);
  --lv-great: oklch(52% 0.095 172);
  --lv-good:  oklch(53% 0.135 130);
  --lv-fair:  oklch(55% 0.130 55);
  --lv-low:   oklch(55% 0.190 25);

  /* HUD (kartu & grafik) */
  --c-holo:      oklch(50% 0.085 225);
  --c-holo-line: oklch(55% 0.085 225 / 0.30);
  --c-holo-dim:  oklch(55% 0.085 225 / 0.10);
  --c-stage:     oklch(95.5% 0.010 240);
  --c-stage-2:   oklch(98.5% 0.005 240);
  --c-heat-1:    oklch(58% 0.210 27);
  --c-heat-2:    oklch(66% 0.180 52);
  --c-radar:     oklch(60% 0.130 75);

  /* glass, scrim, chrome */
  --c-glass:       oklch(99.5% 0.003 95 / 0.72);
  --c-glass-edge:  oklch(21% 0.014 95 / 0.08);
  --c-scrim:       oklch(22% 0.014 95 / 0.42);
  --c-topbar:      oklch(99% 0.004 95 / 0.86);
  --c-toast:       oklch(99.5% 0.003 95);
  --c-glow-1:      oklch(88% 0.150 95 / 0.22);
  --c-glow-2:      oklch(85% 0.080 195 / 0.16);
  --c-shadow-card: 0 1px 2px oklch(30% 0.020 95 / 0.06), 0 6px 16px -10px oklch(30% 0.020 95 / 0.22);
  --shadow-lift:   0 18px 40px -22px oklch(30% 0.030 95 / 0.40);
  --shadow-glow:   0 0 0 1px var(--c-accent-line), 0 14px 34px -18px oklch(68% 0.130 78 / 0.45);
  --c-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d584a' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* kartu pemain & bar */
  --c-card:         oklch(99.5% 0.003 95);
  --c-card-foot:    oklch(99.5% 0.003 95);
  --c-plate:        oklch(22% 0.016 95);
  --c-plate-ink:    oklch(98% 0.004 95);
  --c-plate-muted:  oklch(80% 0.010 95);
  --c-on-t:         oklch(99% 0.003 95);
  --c-sheen:        oklch(99% 0.010 95 / 0.60);
  --c-photo-shadow: oklch(30% 0.030 95 / 0.32);
  --c-silhouette:   oklch(21% 0.014 95 / 0.16);
  --c-seg-bg:       oklch(93% 0.010 95);
  --c-seg-edge:     oklch(80% 0.012 95);
  --c-seg-off:      oklch(21% 0.014 95 / 0.07);
  --c-seg-glow:     oklch(68% 0.130 78 / 0);
}

/* ---------- TEMA GELAP (opsional) + pulau gelap (.theme-dark, panel siaran .bc) ---------- */
:root[data-theme="dark"], .theme-dark, .bc {
  color-scheme: dark;

  --c-paper:   oklch(14% 0.006 95);
  --c-paper-2: oklch(18% 0.008 95);
  --c-paper-3: oklch(22% 0.010 95);
  --c-paper-4: oklch(27% 0.012 95);
  --c-rule:    oklch(32% 0.012 95);
  --c-rule-2:  oklch(42% 0.012 95);
  --c-faint:   oklch(60% 0.010 95);
  --c-muted:   oklch(76% 0.010 95);
  --c-ink:     oklch(96% 0.006 95);

  --c-accent:      oklch(88% 0.165 95);
  --c-accent-2:    oklch(82% 0.160 78);
  --c-accent-ink:  oklch(20% 0.030 90);
  --c-accent-text: oklch(88% 0.165 95);
  --c-accent-dim:  oklch(88% 0.165 95 / 0.14);
  --c-accent-line: oklch(88% 0.165 95 / 0.38);
  --c-focus:       oklch(88% 0.165 95);

  --c-win:   oklch(80% 0.170 150);
  --c-loss:  oklch(70% 0.190 25);
  --c-live:  oklch(66% 0.220 25);
  --c-info:  oklch(78% 0.110 230);
  --c-wa:    oklch(72% 0.170 150);

  --t-rookie:   oklch(70% 0.010 95);
  --t-bronze:   oklch(70% 0.110 55);
  --t-silver:   oklch(84% 0.020 250);
  --t-gold:     oklch(86% 0.160 88);
  --t-platinum: oklch(82% 0.080 200);
  --t-diamond:  oklch(78% 0.130 260);
  --t-master:   oklch(72% 0.200 330);

  --c-pal-1: oklch(80% 0.110 195);
  --c-pal-2: oklch(76% 0.120 250);
  --c-pal-3: oklch(76% 0.140 300);
  --c-pal-4: oklch(76% 0.140 35);
  --c-pal-5: oklch(80% 0.150 150);

  --lv-elite: oklch(76% 0.130 295);
  --lv-great: oklch(80% 0.130 172);
  --lv-good:  oklch(85% 0.170 128);
  --lv-fair:  oklch(79% 0.150 62);
  --lv-low:   oklch(70% 0.180 25);

  --c-holo:      oklch(84% 0.110 210);
  --c-holo-line: oklch(84% 0.110 210 / 0.42);
  --c-holo-dim:  oklch(84% 0.110 210 / 0.14);
  --c-stage:     oklch(13% 0.018 240);
  --c-stage-2:   oklch(19% 0.030 240);
  --c-heat-1:    oklch(60% 0.215 27);
  --c-heat-2:    oklch(72% 0.190 52);
  --c-radar:     oklch(88% 0.165 95);

  --c-glass:       oklch(22% 0.010 95 / 0.58);
  --c-glass-edge:  oklch(96% 0.006 95 / 0.10);
  --c-scrim:       oklch(10% 0.006 95 / 0.72);
  --c-topbar:      oklch(14% 0.006 95 / 0.86);
  --c-toast:       oklch(27% 0.012 95);
  --c-glow-1:      oklch(88% 0.165 95 / 0.10);
  --c-glow-2:      oklch(82% 0.160 78 / 0.08);
  --c-shadow-card: 0 12px 26px -22px oklch(5% 0.010 95 / 0.9);
  --shadow-lift:   0 18px 40px -22px oklch(8% 0.010 95 / 0.9);
  --shadow-glow:   0 0 0 1px var(--c-accent-line), 0 14px 40px -18px oklch(88% 0.165 95 / 0.45);
  --c-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d8d4c4' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  --c-card:         oklch(16% 0.020 240);
  --c-card-foot:    oklch(12% 0.018 240);
  --c-plate:        oklch(9% 0.012 240);
  --c-plate-ink:    oklch(97% 0.006 95);
  --c-plate-muted:  oklch(74% 0.012 240);
  --c-on-t:         oklch(18% 0.025 95);
  --c-sheen:        oklch(97% 0.010 95 / 0.16);
  --c-photo-shadow: oklch(5% 0.010 240 / 0.75);
  --c-silhouette:   oklch(96% 0.006 95 / 0.16);
  --c-seg-bg:       oklch(10% 0.012 240 / 0.70);
  --c-seg-edge:     oklch(86% 0.160 88 / 0.50);
  --c-seg-off:      oklch(96% 0.006 95 / 0.09);
  --c-seg-glow:     oklch(86% 0.160 88 / 0.60);
}