/* ALSI Basketball — design tokens (docs/04-ui-design.md §3).
   Theme derived from the ALSI ITB 3on3 logo: sun-yellow signature, dark-brown
   ink, faceted earthy category colors, basketball-orange CTAs. */
:root {
  /* Signature yellow (logo field) */
  --sun-600:#E0A400; --sun-500:#F7BE18; --sun-400:#FFD24D; --sun-100:#FDF0C4;

  /* Energy — basketball orange (primary CTA) */
  --orange-600:#CC6620; --orange-500:#E6792B; --orange-400:#F79352;

  /* Faceted panel palette (logo mascot) = category accents */
  --slate-500:#48557C;      --slate-100:#E4E7F0;   /* category_70an */
  --terracotta-500:#AD4C2A; --terracotta-100:#F5E1D8; /* category_80an */
  --olive-500:#77863E;      --olive-100:#EAEEDB;   /* category_90an */
  --ochre-500:#8A6A3B;      --ochre-100:#EFE6D5;   /* category_himpunan */

  /* Ink & paper (warm, from the dark-brown wordmark) */
  --ink-900:#241A12; --ink-700:#3E3123; --ink-500:#6E5C48; --ink-300:#A99B86;
  --paper-0:#FFFDF7; --paper-50:#FBF4E4; --paper-100:#F3E9D2; --line:#E7DCC3;

  /* Flourish + semantic status */
  --grass-500:#5E8C2E;
  --ok:#4E8C2E; --warn:#E0A400; --danger:#C0392B; --info:#48557C;
  --ok-100:#E4EFD8; --warn-100:#FBEFC9; --danger-100:#F6DAD5; --info-100:#E4E7F0;

  /* Type */
  --font-display:'Bungee','Archivo Black','Anton',system-ui,sans-serif;
  --font-heading:'Plus Jakarta Sans','Archivo',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans','Inter var',system-ui,sans-serif;
  --font-script:'Caveat','Permanent Marker',cursive;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Scale (fluid) */
  --step--1:clamp(.8rem,.77rem+.15vw,.9rem);
  --step-0: clamp(1rem,.95rem+.25vw,1.08rem);
  --step-1: clamp(1.25rem,1.15rem+.5vw,1.5rem);
  --step-2: clamp(1.6rem,1.4rem+1vw,2.2rem);
  --step-3: clamp(2.2rem,1.8rem+2vw,3.4rem);

  /* Space, radius, elevation */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem;
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-full:999px;
  --shadow-1:0 1px 2px rgba(36,26,18,.06);
  --shadow-2:0 10px 28px -10px rgba(36,26,18,.22);
  --tap:44px;

  /* Category color resolved at usage via [data-cat] (see .chip / .ring) */
  --cat-500:var(--slate-500);
  --cat-100:var(--slate-100);
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
  color-scheme: light;
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --ink-900:#FBF3E2; --ink-700:#E4D8C3; --ink-500:#B3A488; --ink-300:#6E5C48;
    --paper-0:#1A140E; --paper-50:#221A12; --paper-100:#2C2117; --line:#3A2C1C;
    --sun-500:#F7BE18;
    --slate-100:#20283F; --terracotta-100:#3A241C; --olive-100:#28301A; --ochre-100:#332818;
    --ok-100:#22301A; --warn-100:#33290F; --danger-100:#3A1F1B; --info-100:#20283F;
    --shadow-2:0 10px 28px -10px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}

/* Explicit dark override (toggle stamps data-theme="dark") */
:root[data-theme="dark"] {
  --ink-900:#FBF3E2; --ink-700:#E4D8C3; --ink-500:#B3A488; --ink-300:#6E5C48;
  --paper-0:#1A140E; --paper-50:#221A12; --paper-100:#2C2117; --line:#3A2C1C;
  --sun-500:#F7BE18;
  --slate-100:#20283F; --terracotta-100:#3A241C; --olive-100:#28301A; --ochre-100:#332818;
  --ok-100:#22301A; --warn-100:#33290F; --danger-100:#3A1F1B; --info-100:#20283F;
  --shadow-2:0 10px 28px -10px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* Category color resolution: any element carrying data-cat="slate|terracotta|
   olive|ochre" exposes --cat-500 / --cat-100 for chips, rings, headers. */
[data-cat="slate"]      { --cat-500:var(--slate-500);      --cat-100:var(--slate-100); }
[data-cat="terracotta"] { --cat-500:var(--terracotta-500); --cat-100:var(--terracotta-100); }
[data-cat="olive"]      { --cat-500:var(--olive-500);      --cat-100:var(--olive-100); }
[data-cat="ochre"]      { --cat-500:var(--ochre-500);      --cat-100:var(--ochre-100); }