/* Keiko · tokens (foundation). Matchday direction, locked values from directions/CHOSEN.md.
   Light by default; dark under prefers-color-scheme unless data-theme="light"; forced with data-theme="dark".
   Accent has ONE job: the next thing this person does (one primary button per view, today's ring). */
:root{
  /* surfaces */
  --field:#f6f7f1; --card:#ffffff; --raised:#ffffff; --inset:#ecede5; --hover:#f0f1ea; --sel:#e7e9df;
  /* ink */
  --ink:#15170f; --ink-2:#4b4e42; --ink-3:#6c6f62; --line:#e1e3d8; --line-2:#cfd2c4;
  /* accent ramp: floodlight orange-red */
  --a50:#fdf1ec; --a100:#fbdccf; --a200:#f6b79f; --a300:#ef8c69; --a400:#e8653a;
  --a500:#d23d12; --a600:#b3310b; --a700:#8d270b; --a800:#621c0b; --a900:#4a1508;
  --accent:var(--a500); --accent-hv:var(--a600); --on-accent:#fff; --accent-soft:var(--a50);
  /* semantic (separate from the accent) */
  --ok:#2f7d3a; --ok-bg:#e5f2e3; --warn:#8a6400; --warn-bg:#f7eed6;
  --safe:#a3164a; --safe-bg:#fbe6ee; --info:#2f5f8a; --info-bg:#e3edf6;
  /* material: layered tinted shadow */
  --sh-soft:0 1px 2px rgba(21,23,15,.06), 0 6px 18px -8px rgba(21,23,15,.16);
  --sh-card:0 1px 2px rgba(21,23,15,.08), 0 12px 32px -8px rgba(21,23,15,.22);
  --sh-raised:0 2px 4px rgba(21,23,15,.10), 0 22px 44px -14px rgba(21,23,15,.34);
  --sh-inset:inset 0 1px 2px rgba(21,23,15,.10);
  --sh-pop:0 2px 6px rgba(21,23,15,.10), 0 18px 48px -12px rgba(21,23,15,.32);
  --ring:0 0 0 2px var(--field), 0 0 0 4px var(--a300);
  --raised-edge:0 0 0 0 transparent;
  /* radii: hero 20 → card 16 → control 10 → chip 6 */
  --r-hero:20px; --r-card:16px; --r-panel:14px; --r-ctl:10px; --r-chip:6px;
  /* type */
  --display:"Archivo",system-ui,sans-serif; --ui:"Schibsted Grotesk",system-ui,sans-serif;
  /* night: match-day and full-bleed moments only */
  --night:#15170f; --night-2:#1f2218; --night-3:#2a2d22; --night-ink:#f1f2ea; --night-ink-2:#c9c8be; --night-line:rgba(241,242,234,.12);
  --plate:#fbfaf5; --plate-rim:#eceadf;
  /* paper: cards that sit on photographs */
  --paper:#fffdf9; --paper-ink:#15170f; --paper-ink-2:#4b4e42; --paper-ink-3:#5b5e51; --paper-line:#e1e3d8; --paper-lab:#8d270b; --paper-mute:#9a9d8f;
  /* avatar plates */
  --av-1:#3a2a1e; --av-1-ink:#fbe9dc; --av-2:#2a2c22; --av-2-ink:#f1f2ea; --av-3:#e9dfe3; --av-3-ink:#5c1430;
  --av-4:#dfe6d6; --av-4-ink:#24401f; --av-5:#dde5ee; --av-5-ink:#1f3a57; --av-6:#efe4cf; --av-6-ink:#5a3f0e;
  /* layout */
  --gutter:40px; --col:760px; --rail:340px; --wide:1220px; /* one content width (1220) for every route: .page = 760 + 120 + 340 */ --max:1520px; --top-h:64px;
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:120ms; --t:180ms;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --field:#10120b; --card:#1a1c14; --raised:#24271d; --inset:#0a0b06; --hover:#14160f; --sel:#262a1e;
  --ink:#f1f2ea; --ink-2:#b0b3a3; --ink-3:#8f9384; --line:#2a2d22; --line-2:#3a3e30;
  --accent:#ef5a2b; --accent-hv:#f6774d; --on-accent:#140802; --accent-soft:#2e1408;
  --ok:#6cc277; --ok-bg:#16301a; --warn:#e3b341; --warn-bg:#2e2508; --safe:#e06c7a; --safe-bg:#3a1222; --info:#7fb0e0; --info-bg:#132536;
  --sh-soft:0 1px 2px rgba(0,0,0,.35), 0 6px 18px -8px rgba(0,0,0,.5);
  --sh-card:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -8px rgba(0,0,0,.6);
  --sh-raised:0 2px 4px rgba(0,0,0,.45), 0 24px 48px -14px rgba(0,0,0,.75);
  --sh-inset:inset 0 1px 3px rgba(0,0,0,.6);
  --sh-pop:0 2px 6px rgba(0,0,0,.5), 0 18px 48px -12px rgba(0,0,0,.8);
  --ring:0 0 0 2px var(--field), 0 0 0 4px #f6774d;
  --raised-edge:inset 0 0 0 1px var(--line-2);
  --night:#0a0b06; --night-2:#16180f; --night-3:#202318;
  --plate:#e9e7de; --plate-rim:#cfccc0;
  --paper:#24271d; --paper-ink:#f1f2ea; --paper-ink-2:#b0b3a3; --paper-ink-3:#9a9d8f; --paper-line:#3a3e30; --paper-lab:#ef8c69; --paper-mute:#6f7366;
  --av-1:#5a4030; --av-2:#3a3d30; --av-3:#4a2232; --av-3-ink:#f3d6df; --av-4:#26381f; --av-4-ink:#d6e8cc; --av-5:#1f3348; --av-5-ink:#d4e2f1; --av-6:#4a3a18; --av-6-ink:#f1e2c2;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --field:#10120b; --card:#1a1c14; --raised:#24271d; --inset:#0a0b06; --hover:#14160f; --sel:#262a1e;
  --ink:#f1f2ea; --ink-2:#b0b3a3; --ink-3:#8f9384; --line:#2a2d22; --line-2:#3a3e30;
  --accent:#ef5a2b; --accent-hv:#f6774d; --on-accent:#140802; --accent-soft:#2e1408;
  --ok:#6cc277; --ok-bg:#16301a; --warn:#e3b341; --warn-bg:#2e2508; --safe:#e06c7a; --safe-bg:#3a1222; --info:#7fb0e0; --info-bg:#132536;
  --sh-soft:0 1px 2px rgba(0,0,0,.35), 0 6px 18px -8px rgba(0,0,0,.5);
  --sh-card:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -8px rgba(0,0,0,.6);
  --sh-raised:0 2px 4px rgba(0,0,0,.45), 0 24px 48px -14px rgba(0,0,0,.75);
  --sh-inset:inset 0 1px 3px rgba(0,0,0,.6);
  --sh-pop:0 2px 6px rgba(0,0,0,.5), 0 18px 48px -12px rgba(0,0,0,.8);
  --ring:0 0 0 2px var(--field), 0 0 0 4px #f6774d;
  --raised-edge:inset 0 0 0 1px var(--line-2);
  --night:#0a0b06; --night-2:#16180f; --night-3:#202318;
  --plate:#e9e7de; --plate-rim:#cfccc0;
  --paper:#24271d; --paper-ink:#f1f2ea; --paper-ink-2:#b0b3a3; --paper-ink-3:#9a9d8f; --paper-line:#3a3e30; --paper-lab:#ef8c69; --paper-mute:#6f7366;
  --av-1:#5a4030; --av-2:#3a3d30; --av-3:#4a2232; --av-3-ink:#f3d6df; --av-4:#26381f; --av-4-ink:#d6e8cc; --av-5:#1f3348; --av-5-ink:#d4e2f1; --av-6:#4a3a18; --av-6-ink:#f1e2c2;
  color-scheme:dark;
}
@media (max-width:720px){ :root{ --gutter:16px; --top-h:56px; } }