/* ============================================================
   TOKENS — reset, structural tokens, semantic-variable contract
   ------------------------------------------------------------
   The theming model:
     themes.css   -> provides HUES only  (--brand-h/s, --accent-h/s)
     <design>.css -> provides the full SKIN: neutral palette, fonts,
                     radii, shadows, decorative backgrounds, and sets
                     the SEMANTIC vars below from hues + neutrals.
     app.css      -> structural layout, consumes ONLY semantic vars.
   This separation is what lets every one of the 16 themes look
   correct inside every one of the 3 designs.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;min-height:100dvh}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
::selection{background:hsl(var(--brand-h) var(--brand-s) 55% / .35)}

/* ---- structural (non-color) tokens : design-agnostic ---- */
:root{
  --maxw: 1240px;
  --gutter: clamp(16px, 4vw, 40px);

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --sp-9:56px; --sp-10:72px;

  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem;
  --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem;
  --fs-3xl:2.4rem; --fs-4xl:clamp(2.4rem,5vw,4rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast:.14s var(--ease);
  --t:.26s var(--ease);
  --t-slow:.5s var(--ease-out);

  --z-header:50; --z-overlay:80; --z-modal:90; --z-toast:100;

  /* fixed medal + result tokens (stable across all themes) */
  --gold:#f5c542;   --gold-2:#b8860b;
  --silver:#cfd6df; --silver-2:#7c8694;
  --bronze:#d39157; --bronze-2:#8a5023;
  --win:#2fbf71; --draw:#f0a830; --loss:#e2574c;

  /* sensible fallbacks (overwritten by every design file) */
  --bg:#0b0b14; --bg-2:#101023;
  --surface:#16162b; --surface-2:#1d1d38; --surface-3:#262648;
  --text:#f4f5fb; --text-dim:#a7aac6; --text-mute:#7a7e9e;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.18);
  --brand:hsl(245 80% 62%); --brand-soft:hsl(245 80% 62% / .16);
  --brand-text:hsl(245 70% 70%); --brand-contrast:#fff; --accent:hsl(280 85% 64%);
  --radius:18px; --radius-sm:12px; --radius-lg:26px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 18px 50px -28px rgba(0,0,0,.6);
  --shadow-lg:0 40px 90px -50px rgba(0,0,0,.7);
  --font-display:"Sora",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --ring:0 0 0 1px var(--border);
}

/* base element styling — pure semantic vars */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-md);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background var(--t-slow), color var(--t);
}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;letter-spacing:-.01em}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* utility helpers used by app.css */
.u-hidden{display:none!important}
.u-center{display:flex;align-items:center;justify-content:center}
.u-row{display:flex;align-items:center}
.u-gap-2{gap:var(--sp-2)} .u-gap-3{gap:var(--sp-3)} .u-gap-4{gap:var(--sp-4)}
.u-grow{flex:1}
.u-right{margin-left:auto}
.u-mono{font-variant-numeric:tabular-nums}
.u-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}