/*! Legend design tokens 1.0
   The one place Legend's look is set. The app (public/index.html, public/js/controls.mjs) and the design kit
   (design/kit/) both read this file, so a value changed here changes both. docs/design-kit.md says how to edit it and
   how the kit's edits come back here.

   Edit the values in the first block only. Each colour is written once per theme (--light-*, --dark-*); the blocks
   after it only wire those values to the names the app uses, and never hold a colour of their own. */
:root{
  /* ---------- Colour, light (the default ground) ---------- */
  --light-bg:#FFFFFF;          /* the page */
  --light-surface:#F5F6F8;     /* a card, a row's tile, an input */
  --light-surface2:#EDEFF3;    /* pressed, a switch that's off, carbs in the macro bar */
  --light-ink:#0C0D10;         /* text, the score card, protein in the macro bar */
  --light-ink2:#646B7A;        /* secondary text, values on the right of a row */
  --light-ink3:#9AA1B0;        /* hints, chevrons, section labels */
  --light-line:#E7E9EE;        /* hairlines between rows */
  --light-track:#ECEEF3;       /* a slider's track, an empty bar */
  --light-accent:#2B5CE6;      /* Legend blue: the one accent */
  --light-accent-press:#1F49C7;
  --light-on-accent:#FFFFFF;
  --light-accent-soft:#EBF0FF; /* a blue pill's ground */
  --light-sheet-shade:rgba(12,13,16,.42);
  --light-green-ink:#15803D;
  --light-green-bg:#DCFCE7;    /* green-ink's ground: a tag that's free, a connected tick */
  --light-seg-on:#FFFFFF;      /* the picked option of a wizard segment */
  --light-warn:#A16207;        /* a warning: the low balance's amber */
  /* The flat grades, Fergus's pick on the Grade Flats Lab (P1b, 7 Oct 2026): each tier's colour, its ink, and its edge where
     the colour alone is under 3:1 on the page (else the colour itself). C and D are one grey. Pills, chips, Community, the
     Lab's grid and Vista read them; a medal sits over its own --gr-* colour (index.html's generated medals block). */
  --light-flat-p:#F3D78A;  --light-flat-p-ink:#3E2407;  --light-flat-p-edge:#AB8212;   /* S+, a step lighter than its medal */
  --light-flat-s:#D29A26;  --light-flat-s-ink:#382000;  --light-flat-s-edge:#B07F1E;
  --light-flat-a:#BCC2CA;  --light-flat-a-ink:#0F131A;  --light-flat-a-edge:#838890;
  --light-flat-b:#B07A4F;  --light-flat-b-ink:#1F0D02;  --light-flat-b-edge:#B07A4F;
  --light-flat-grey:#646B7A; --light-flat-grey-ink:#FFFFFF;
  /* The one gold (7 Oct 2026): the S+ flat gold for everything gold that isn't a grade. On the light page a gold mark sits in a
     deeper edge of its own hue, bare gold text is the darker one, and past the calorie target the ring is its wash. */
  --light-gold-edge:#AB8212; --light-gold-text:#8B6A0E; --light-gold-wash:#F8E7B9; --light-gold-wash-edge:#CDB471;

  /* ---------- Colour, dark ---------- */
  --dark-bg:#0B0C0F;
  --dark-surface:#15171C;
  --dark-surface2:#1D2026;
  --dark-ink:#F2F3F6;
  --dark-ink2:#A2A8B6;
  --dark-ink3:#6E7482;
  --dark-line:#262931;
  --dark-track:#23262E;
  --dark-accent:#5E85FF;
  --dark-accent-press:#7D9CFF;
  --dark-on-accent:#0B0C0F;
  --dark-accent-soft:#1A2440;
  --dark-sheet-shade:rgba(0,0,0,.6);
  --dark-green-ink:#4ADE80;
  --dark-green-bg:#14352A;
  --dark-seg-on:#262931;
  --dark-warn:#EAB308;
  --dark-flat-p:#EDD185;   --dark-flat-p-ink:#3A2206;   --dark-flat-p-edge:#EDD185;
  --dark-flat-s:#C8911F;   --dark-flat-s-ink:#321D01;   --dark-flat-s-edge:#C8911F;
  --dark-flat-a:#B3B9C1;   --dark-flat-a-ink:#0E1218;   --dark-flat-a-edge:#B3B9C1;
  --dark-flat-b:#A8744A;   --dark-flat-b-ink:#1A0B02;   --dark-flat-b-edge:#A8744A;
  --dark-flat-grey:#7A808D;  --dark-flat-grey-ink:#0B0C0F;
  --dark-gold-edge:#EDD185;  --dark-gold-text:#EDD185;  --dark-gold-wash:#A18845;  --dark-gold-wash-edge:#A18845;   /* on dark the gold reads alone */

  /* one red in both themes, the delete buttons' */
  --danger:#D94444;

  /* ---------- Grade metals (built 7 Oct 2026, grades round 4) ----------
     Each tier's flat identifying colour, light then dark: charcoal D, iron C, bronze B, silver A, deep gold S, light gold S+.
     The medals themselves are generated art (design/xp/grades4/export.py writes public/medals/ and the --gr-* block in
     index.html, which is what the app draws with); these copy the --gr-* colours for the design kit's ladder. */
  --light-metal-d:#474B53;  --dark-metal-d:#3E424A;   /* D  charcoal */
  --light-metal-c:#717378;  --dark-metal-c:#67696E;   /* C  iron */
  --light-metal-b:#B07A4F;  --dark-metal-b:#A8744A;   /* B  bronze */
  --light-metal-a:#BCC2CA;  --dark-metal-a:#B3B9C1;   /* A  silver */
  --light-metal-s:#D29A26;  --dark-metal-s:#C8911F;   /* S  deep gold */
  --light-metal-sp:#EDC455; --dark-metal-sp:#E2B84C;  /* S+ light gold */

  /* ---------- Type ---------- */
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;  /* numbers, grades, titles */
  --font-wordmark:"League Gothic","Archivo",sans-serif;                                     /* the name, italic, only where it stands as a title */

  /* ---------- Corners ---------- */
  --radius-xs:8px;      /* a bubble, a small chip */
  --radius-sm:10px;     /* an input */
  --radius-md:12px;     /* an icon button, a row's tile, a day square */
  --radius-lg:14px;     /* a grouped list, a big button */
  --radius-xl:16px;     /* a card, the score card */
  --radius-sheet:20px;  /* a sheet's top corners */
  --radius-pill:999px;  /* a pill, a switch */

  /* ---------- Motion ---------- */
  --ease-snap:cubic-bezier(.2,.8,.2,1);   /* a control settling: the slider's thumb, a switch's knob */
  --dur-snap:180ms;                       /* Fergus's soft snap from the controls lab */
  --ease-pop:cubic-bezier(.3,1.6,.5,1);   /* a little overshoot: a tick, a pill landing */
}

/* ===== Wiring: below here only maps the values above onto the names the app uses. No colours. ===== */
:root{
  --bg:var(--light-bg); --surface:var(--light-surface); --surface2:var(--light-surface2);
  --ink:var(--light-ink); --ink2:var(--light-ink2); --ink3:var(--light-ink3); --line:var(--light-line);
  --accent:var(--light-accent); --accent-press:var(--light-accent-press); --on-accent:var(--light-on-accent);
  --accent-soft:var(--light-accent-soft); --track:var(--light-track); --sheet-shade:var(--light-sheet-shade);
  --green-ink:var(--light-green-ink); --warn:var(--light-warn); --green-bg:var(--light-green-bg); --seg-on:var(--light-seg-on);
  --flat-P:var(--light-flat-p); --flat-P-ink:var(--light-flat-p-ink); --flat-P-edge:var(--light-flat-p-edge);
  --flat-S:var(--light-flat-s); --flat-S-ink:var(--light-flat-s-ink); --flat-S-edge:var(--light-flat-s-edge);
  --flat-A:var(--light-flat-a); --flat-A-ink:var(--light-flat-a-ink); --flat-A-edge:var(--light-flat-a-edge);
  --flat-B:var(--light-flat-b); --flat-B-ink:var(--light-flat-b-ink); --flat-B-edge:var(--light-flat-b-edge);
  --flat-grey:var(--light-flat-grey); --flat-grey-ink:var(--light-flat-grey-ink);
  --gold:var(--flat-P); --on-gold:var(--flat-P-ink); --gold-edge:var(--light-gold-edge); --gold-text:var(--light-gold-text);
  --gold-wash:var(--light-gold-wash); --gold-wash-edge:var(--light-gold-wash-edge);
  --metal-d:var(--light-metal-d); --metal-c:var(--light-metal-c); --metal-b:var(--light-metal-b);
  --metal-a:var(--light-metal-a); --metal-s:var(--light-metal-s); --metal-sp:var(--light-metal-sp);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--dark-bg); --surface:var(--dark-surface); --surface2:var(--dark-surface2);
    --ink:var(--dark-ink); --ink2:var(--dark-ink2); --ink3:var(--dark-ink3); --line:var(--dark-line);
    --accent:var(--dark-accent); --accent-press:var(--dark-accent-press); --on-accent:var(--dark-on-accent);
    --accent-soft:var(--dark-accent-soft); --track:var(--dark-track); --sheet-shade:var(--dark-sheet-shade);
    --green-ink:var(--dark-green-ink); --warn:var(--dark-warn); --green-bg:var(--dark-green-bg); --seg-on:var(--dark-seg-on);
    --flat-P:var(--dark-flat-p); --flat-P-ink:var(--dark-flat-p-ink); --flat-P-edge:var(--dark-flat-p-edge);
    --flat-S:var(--dark-flat-s); --flat-S-ink:var(--dark-flat-s-ink); --flat-S-edge:var(--dark-flat-s-edge);
    --flat-A:var(--dark-flat-a); --flat-A-ink:var(--dark-flat-a-ink); --flat-A-edge:var(--dark-flat-a-edge);
    --flat-B:var(--dark-flat-b); --flat-B-ink:var(--dark-flat-b-ink); --flat-B-edge:var(--dark-flat-b-edge);
    --flat-grey:var(--dark-flat-grey); --flat-grey-ink:var(--dark-flat-grey-ink);
    --gold:var(--flat-P); --on-gold:var(--flat-P-ink); --gold-edge:var(--dark-gold-edge); --gold-text:var(--dark-gold-text);
    --gold-wash:var(--dark-gold-wash); --gold-wash-edge:var(--dark-gold-wash-edge);
    --metal-d:var(--dark-metal-d); --metal-c:var(--dark-metal-c); --metal-b:var(--dark-metal-b);
    --metal-a:var(--dark-metal-a); --metal-s:var(--dark-metal-s); --metal-sp:var(--dark-metal-sp);
  }
}
:root[data-theme="dark"]{
  --bg:var(--dark-bg); --surface:var(--dark-surface); --surface2:var(--dark-surface2);
  --ink:var(--dark-ink); --ink2:var(--dark-ink2); --ink3:var(--dark-ink3); --line:var(--dark-line);
  --accent:var(--dark-accent); --accent-press:var(--dark-accent-press); --on-accent:var(--dark-on-accent);
  --accent-soft:var(--dark-accent-soft); --track:var(--dark-track); --sheet-shade:var(--dark-sheet-shade);
  --green-ink:var(--dark-green-ink); --warn:var(--dark-warn); --green-bg:var(--dark-green-bg); --seg-on:var(--dark-seg-on);
  --flat-P:var(--dark-flat-p); --flat-P-ink:var(--dark-flat-p-ink); --flat-P-edge:var(--dark-flat-p-edge);
  --flat-S:var(--dark-flat-s); --flat-S-ink:var(--dark-flat-s-ink); --flat-S-edge:var(--dark-flat-s-edge);
  --flat-A:var(--dark-flat-a); --flat-A-ink:var(--dark-flat-a-ink); --flat-A-edge:var(--dark-flat-a-edge);
  --flat-B:var(--dark-flat-b); --flat-B-ink:var(--dark-flat-b-ink); --flat-B-edge:var(--dark-flat-b-edge);
  --flat-grey:var(--dark-flat-grey); --flat-grey-ink:var(--dark-flat-grey-ink);
  --gold:var(--flat-P); --on-gold:var(--flat-P-ink); --gold-edge:var(--dark-gold-edge); --gold-text:var(--dark-gold-text);
  --gold-wash:var(--dark-gold-wash); --gold-wash-edge:var(--dark-gold-wash-edge);
  --metal-d:var(--dark-metal-d); --metal-c:var(--dark-metal-c); --metal-b:var(--dark-metal-b);
  --metal-a:var(--dark-metal-a); --metal-s:var(--dark-metal-s); --metal-sp:var(--dark-metal-sp);
}
/* Settings → Appearance. After the host-theme blocks so, at equal specificity, the in-app choice wins. */
:root[data-kilo-theme="light"]{
  --bg:var(--light-bg); --surface:var(--light-surface); --surface2:var(--light-surface2);
  --ink:var(--light-ink); --ink2:var(--light-ink2); --ink3:var(--light-ink3); --line:var(--light-line);
  --accent:var(--light-accent); --accent-press:var(--light-accent-press); --on-accent:var(--light-on-accent);
  --accent-soft:var(--light-accent-soft); --track:var(--light-track); --sheet-shade:var(--light-sheet-shade);
  --green-ink:var(--light-green-ink); --warn:var(--light-warn); --green-bg:var(--light-green-bg); --seg-on:var(--light-seg-on);
  --flat-P:var(--light-flat-p); --flat-P-ink:var(--light-flat-p-ink); --flat-P-edge:var(--light-flat-p-edge);
  --flat-S:var(--light-flat-s); --flat-S-ink:var(--light-flat-s-ink); --flat-S-edge:var(--light-flat-s-edge);
  --flat-A:var(--light-flat-a); --flat-A-ink:var(--light-flat-a-ink); --flat-A-edge:var(--light-flat-a-edge);
  --flat-B:var(--light-flat-b); --flat-B-ink:var(--light-flat-b-ink); --flat-B-edge:var(--light-flat-b-edge);
  --flat-grey:var(--light-flat-grey); --flat-grey-ink:var(--light-flat-grey-ink);
  --gold:var(--flat-P); --on-gold:var(--flat-P-ink); --gold-edge:var(--light-gold-edge); --gold-text:var(--light-gold-text);
  --gold-wash:var(--light-gold-wash); --gold-wash-edge:var(--light-gold-wash-edge);
  --metal-d:var(--light-metal-d); --metal-c:var(--light-metal-c); --metal-b:var(--light-metal-b);
  --metal-a:var(--light-metal-a); --metal-s:var(--light-metal-s); --metal-sp:var(--light-metal-sp);
}
:root[data-kilo-theme="dark"]{
  --bg:var(--dark-bg); --surface:var(--dark-surface); --surface2:var(--dark-surface2);
  --ink:var(--dark-ink); --ink2:var(--dark-ink2); --ink3:var(--dark-ink3); --line:var(--dark-line);
  --accent:var(--dark-accent); --accent-press:var(--dark-accent-press); --on-accent:var(--dark-on-accent);
  --accent-soft:var(--dark-accent-soft); --track:var(--dark-track); --sheet-shade:var(--dark-sheet-shade);
  --green-ink:var(--dark-green-ink); --warn:var(--dark-warn); --green-bg:var(--dark-green-bg); --seg-on:var(--dark-seg-on);
  --flat-P:var(--dark-flat-p); --flat-P-ink:var(--dark-flat-p-ink); --flat-P-edge:var(--dark-flat-p-edge);
  --flat-S:var(--dark-flat-s); --flat-S-ink:var(--dark-flat-s-ink); --flat-S-edge:var(--dark-flat-s-edge);
  --flat-A:var(--dark-flat-a); --flat-A-ink:var(--dark-flat-a-ink); --flat-A-edge:var(--dark-flat-a-edge);
  --flat-B:var(--dark-flat-b); --flat-B-ink:var(--dark-flat-b-ink); --flat-B-edge:var(--dark-flat-b-edge);
  --flat-grey:var(--dark-flat-grey); --flat-grey-ink:var(--dark-flat-grey-ink);
  --gold:var(--flat-P); --on-gold:var(--flat-P-ink); --gold-edge:var(--dark-gold-edge); --gold-text:var(--dark-gold-text);
  --gold-wash:var(--dark-gold-wash); --gold-wash-edge:var(--dark-gold-wash-edge);
  --metal-d:var(--dark-metal-d); --metal-c:var(--dark-metal-c); --metal-b:var(--dark-metal-b);
  --metal-a:var(--dark-metal-a); --metal-s:var(--dark-metal-s); --metal-sp:var(--dark-metal-sp);
}