/* ============================================================
   CHIPATA GIRLS FC — design tokens
   ------------------------------------------------------------
   Block A is the quick-reference token block from
   design-system.md §6, verbatim. Do not edit it here — edit the
   design system first, then copy it down.

   Block B locks the identity colour and defines the semantic
   roles. Block C is the day theme, block D the night theme.
   Components read roles only, never a palette name, never a hex.
   ============================================================ */

/* ── A. design-system.md §6, verbatim ───────────────────────── */
:root{
  /* day */
  --paper:#FBF7EE; --panel:#F3ECDD; --editorial:#F7F1E4; --line:#E6DDC9;
  --ink:#1A1712; --ink-soft:#2C2820; --text2:#524A3D; --muted:#877C6A;
  --pitch:#0F7A46; --pitch-strong:#0B5C34; --pitch-tint:#E4F0E8;
  --spark:#D2521E; --spark-strong:#B0430F; --spark-tint:#FBE7DA;
  --chalk:#B9AF98;
  /* night (floodlit) */
  --d-bg:#12130E; --d-surface:#1C1E16; --d-line:#2C2E22;
  --d-text:#F4EFE2; --d-text2:#BDB6A2; --d-muted:#8B8472;
  --d-pitch:#37C980; --d-pitch-ui:#0F7A46; --d-spark:#F97B3D; --d-chalk:#3A3D2E;
  /* type */
  --font-display:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  --font-body:"DM Sans","Inter",system-ui,sans-serif;
  --font-mono:"Space Mono","JetBrains Mono",ui-monospace,monospace;
  /* layout */
  --content-max:1160px; --wide-max:1340px; --reading-max:680px; --gutter:24px;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-pill:100px;
  /* motion */
  --dur-micro:120ms; --dur-hover:180ms; --dur-enter:460ms; --dur-max:680ms;
  --ease-out:cubic-bezier(.2,.65,.2,1); --ease-inout:cubic-bezier(.4,0,.2,1);
}

/* ── B. Identity lock: COPPER ───────────────────────────────
   design-system.md §1.3, Copper row. The identity colour is
   locked; the style-tile switcher and the other four palettes
   are not present in production.

     Identity (who we are)  copper  #C2410C / #FB8B4C
     Action  (do this now)  pitch green #0F7A46 — the spark
                            flips to green so the two never
                            collide (§1.3).

   Because green is the action colour under Copper, the
   "in school" signal takes the identity copper, exactly as the
   style tile renders it. Green on this site always means
   "this is the thing to do next".

   Contrast, measured (not eyeballed):
     copper #C2410C on paper #FBF7EE ........ 4.84:1  AA text
     copper-strong #9A3412 on paper ......... 6.83:1  AAA-ish
     white on copper #C2410C ................ 5.18:1  AA
     pitch #0F7A46 on paper ................. 5.04:1  AA text
     white on pitch #0F7A46 ................. 5.40:1  AA
     copper-bright #FB8B4C on #12130E ....... 7.91:1  AAA
     d-pitch #37C980 on #12130E ............. 9.42:1  AAA
     #12130E ink on #37C980 fill ............ 8.73:1  AAA
     d-muted #8B8472 on night panel #191B13 . 4.67:1  AA
     d-muted #8B8472 on night card #1C1E16 .. 4.53:1  AA
   ------------------------------------------------------------ */
:root{
  --copper:#C2410C; --copper-strong:#9A3412; --copper-bright:#FB8B4C;
  --copper-tint:#FAE7DC;

  /* night grounds that §6 doesn't name: a raised panel, a card
     surface above it, and the deep band the floodlit sections
     take when the whole page is already dark. */
  --d-panel:#191B13; --d-editorial:#16180F; --d-bg-deep:#0C0D08;
}

/* ── C. Day theme (default) ────────────────────────────────── */
:root{
  --identity:var(--copper);
  --identity-strong:var(--copper-strong);
  --identity-tint:var(--copper-tint);

  --action:var(--pitch);
  --action-strong:var(--pitch-strong);
  --action-tint:var(--pitch-tint);
  --on-action:#FFFFFF;          /* text on an action fill */
  --on-identity:#FFFFFF;        /* text on an identity fill */

  --surface:#FFFFFF;            /* cards on paper */
  --focus:var(--identity);
  --shadow-warm:0 10px 30px rgba(26,23,18,.08);
  --shadow-warm-lift:0 16px 38px rgba(26,23,18,.13);
  color-scheme:light;
}

/* ── D. Night theme ────────────────────────────────────────
   Two selectors, identical declarations — KEEP THEM IN SYNC.
     · the @media block is the no-JS / first-paint path for a
       visitor whose system is dark and who has not chosen;
     · [data-theme] is the visitor's explicit choice, written by
       the head script before paint and by the header toggle.
   A stored "light" wins over a dark system preference, which is
   the whole point of giving people the switch.
   ---------------------------------------------------------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:var(--d-bg); --panel:var(--d-panel); --editorial:var(--d-editorial);
    --line:var(--d-line); --chalk:var(--d-chalk);
    --ink:var(--d-text); --ink-soft:var(--d-text);
    --text2:var(--d-text2); --muted:var(--d-muted);
    --surface:var(--d-surface);

    --identity:var(--copper-bright);
    --identity-strong:#FFA873;
    --identity-tint:#2A1C12;

    --action:var(--d-pitch);
    --action-strong:#5AD495;
    --action-tint:#132A1E;
    --on-action:var(--d-bg);
    --on-identity:var(--d-bg);

    --focus:var(--copper-bright);
    --shadow-warm:0 10px 30px rgba(0,0,0,.4);
    --shadow-warm-lift:0 16px 38px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:var(--d-bg); --panel:var(--d-panel); --editorial:var(--d-editorial);
  --line:var(--d-line); --chalk:var(--d-chalk);
  --ink:var(--d-text); --ink-soft:var(--d-text);
  --text2:var(--d-text2); --muted:var(--d-muted);
  --surface:var(--d-surface);

  --identity:var(--copper-bright);
  --identity-strong:#FFA873;
  --identity-tint:#2A1C12;

  --action:var(--d-pitch);
  --action-strong:#5AD495;
  --action-tint:#132A1E;
  --on-action:var(--d-bg);
  --on-identity:var(--d-bg);

  --focus:var(--copper-bright);
  --shadow-warm:0 10px 30px rgba(0,0,0,.4);
  --shadow-warm-lift:0 16px 38px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ── E. Floodlit sections ──────────────────────────────────
   In day mode a floodlit band is the night ground dropped into
   a light page — the match-night moment where the green sings.
   In night mode the page is already dark, so the band goes
   *deeper* instead, and keeps the same job: rhythm, and a place
   for the big ask to land.
   ---------------------------------------------------------- */
.floodlit{
  --paper:var(--d-bg); --panel:var(--d-panel); --editorial:var(--d-editorial);
  --line:var(--d-line); --chalk:var(--d-chalk);
  --ink:var(--d-text); --ink-soft:var(--d-text);
  --text2:var(--d-text2); --muted:var(--d-muted);
  --surface:var(--d-surface);

  --identity:var(--copper-bright);
  --identity-strong:#FFA873;
  --identity-tint:#2A1C12;

  --action:var(--d-pitch);
  --action-strong:#5AD495;
  --action-tint:#132A1E;
  --on-action:var(--d-bg);
  --on-identity:var(--d-bg);

  --focus:var(--copper-bright);
  --shadow-warm:0 10px 30px rgba(0,0,0,.4);
  --shadow-warm-lift:0 16px 38px rgba(0,0,0,.5);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .floodlit{
    --paper:var(--d-bg-deep); --panel:#12140C; --surface:#15170E;
  }
}
:root[data-theme="dark"] .floodlit{
  --paper:var(--d-bg-deep); --panel:#12140C; --surface:#15170E;
}

/* ── F. Derived scales (design-system.md §2.3, §3) ─────────── */
:root{
  --text-hero:      clamp(2.5rem, 6vw, 4.5rem);
  --text-display:   clamp(1.9rem, 4vw, 3rem);
  --text-h1:        2.1rem;
  --text-h2:        1.6rem;
  --text-h3:        1.25rem;
  --text-body-lg:   1.1875rem;
  --text-body:      1.0625rem;
  --text-small:     0.875rem;
  --text-mono-label:0.72rem;

  /* 4px base */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
}