/* Games In Class design tokens (1.139.0). Read DESIGN-RULES.md in the project root before writing any CSS.
   This file is ADDITIVE: it defines the --ds-* names the rest of the site will move onto, one page at a time.
   Nothing here restyles a page, except the lighter hard shadows (--shadow, --shadow-sm, --sh) the owner asked for.
   Rules in short: tokens only, the page sets the scale, three breakpoints (600, 900, and a 380 safety), one primary button per screen. */

/* ---- 1. Scale that never changes: type, spacing, corners, lines, touch ---- */
:root{
  /* type: seven sizes. Baloo 2 = titles, buttons, labels. Inter = reading. Nothing under 12px. */
  --ds-fs-display:clamp(2rem,5vw,3rem);
  --ds-fs-h1:clamp(24px,2.2vw + 15px,36px);   /* px not rem: phones shrink the root font, titles must not */
  --ds-fs-h2:clamp(1.375rem,2.6vw,1.75rem);
  --ds-fs-h3:1.125rem;
  --ds-fs-body:1rem;
  --ds-fs-small:.875rem;
  --ds-fs-caption:.75rem;
  --ds-lh-text:1.55;--ds-lh-head:1.15;
  --ds-font-head:'Baloo 2',system-ui,sans-serif;
  --ds-font-body:'Inter',system-ui,-apple-system,sans-serif;
  /* spacing: every gap, margin and padding is one of these */
  --ds-s1:4px;--ds-s2:8px;--ds-s3:12px;--ds-s4:16px;--ds-s5:24px;--ds-s6:32px;--ds-s7:48px;
  /* corners: three shapes, plus pill and circle */
  --ds-r-sm:8px;      /* inputs, thumbnails */
  --ds-r-pill:999px;  /* chips, badges */
  /* lines */
  --ds-line-hair:1px; --ds-line-ctl:2px;
  /* touch */
  --ds-tap:44px;--ds-tap-sm:36px;
  --ds-focus:3px solid var(--sky);
}

/* ---- 2. Scale the PAGE sets: phone first, two steps up. Components only read these, they never redefine them. ---- */
:root{
  --ds-bw:2px;                /* frame line (cards, buttons, panels) */
  --ds-sh:2px;                /* hard shadow offset */
  --ds-sh-sm:1px;
  --ds-r-ctl:10px;            /* buttons, tabs, inputs */
  --ds-r-panel:12px;          /* cards, modals */
  --ds-gutter:16px;           /* page side margin */
  --ds-pad:14px;              /* card padding */
  --ds-gap:12px;              /* gap between cards */
  --ds-section:24px;          /* gap between page sections */
  --ds-cols:2;                /* card grid columns */
}
@media (min-width:600px){:root{
  --ds-bw:2px;--ds-sh:2px;--ds-sh-sm:1px;--ds-r-ctl:10px;--ds-r-panel:14px;
  --ds-gutter:24px;--ds-pad:18px;--ds-gap:16px;--ds-section:32px;--ds-cols:3}}
@media (min-width:900px){:root{
  --ds-bw:3px;--ds-sh:3px;--ds-sh-sm:1px;--ds-r-ctl:12px;--ds-r-panel:16px;
  --ds-gutter:32px;--ds-pad:24px;--ds-gap:20px;--ds-section:40px;--ds-cols:4}}
@media (min-width:1100px){:root{--ds-cols:5}}
@media (max-width:379px){:root{--ds-cols:1;--ds-gutter:12px;--ds-pad:12px}}

/* ---- 3. Colour roles, named by job. Night = the dark theme, Sky = the one light theme. Every fill/ink pair is 4.5:1 or better. ---- */
:root{
  --ds-page:#0b1120;--ds-section-bg:#111a2e;--ds-card:#1e293b;--ds-raised:#273449;--ds-outline:#020617;--ds-rule:#334155;
  --ds-text:#f8fafc;--ds-text-soft:#cbd5e1;--ds-text-muted:#94a3b8;
  --ds-brand:#38bdf8;--ds-brand-ink:#04202e;     /* navigation, links, selected, the primary button */
  --ds-action:#10b981;--ds-action-ink:#052e16;   /* create / save / positive status (secondary green) */
  --ds-play:#c084fc;--ds-play-ink:#2a0f4a;       /* games and play entry points */
  --ds-danger:#fb7185;--ds-danger-ink:#3b0a14;   /* delete, remove, errors */
  --ds-gold:#fbbf24;--ds-gold-ink:#241a00;       /* special: Pro, new, trophies. Fills only, never body text on light. */
}
html[data-theme=light]{
  --ds-page:#dff1ff;--ds-section-bg:#eef8ff;--ds-card:#ffffff;--ds-raised:#eaf5ff;--ds-outline:#14284b;--ds-rule:#a9d3f5;
  --ds-text:#14284b;--ds-text-soft:#2f4468;--ds-text-muted:#4b6082;
  --ds-brand:#0369d6;--ds-brand-ink:#ffffff;
  --ds-action:#047857;--ds-action-ink:#ffffff;
  --ds-play:#6d28d9;--ds-play-ink:#ffffff;
  --ds-danger:#be123c;--ds-danger-ink:#ffffff;
  --ds-gold:#f59e0b;--ds-gold-ink:#14284b;
}

/* ---- 4. Lighter hard shadows (owner request, 1.139.0; 1.139.5 fixes light mode and phones). The selectors are html[data-theme] so they
   beat style.css's light-mode shadow values. Phones: a flat 2px / 1px line under the part, no sideways offset. Tablet and desktop: 2-3px offset. ---- */
html,html[data-theme=light],html[data-theme=dark]{--shadow:0 2px 0 var(--hard);--shadow-sm:0 1px 0 var(--hard)}
@media (min-width:601px){
  html,html[data-theme=light],html[data-theme=dark]{--shadow:var(--ds-sh) var(--ds-sh) 0 var(--hard);--shadow-sm:var(--ds-sh-sm) calc(var(--ds-sh-sm) + 1px) 0 var(--hard)}
  html[data-theme=light][data-lstyle=sky]{--sh:var(--ds-sh)}
}