/* ============================================================================
   tokens.css — the only file that may contain a hex value
   First ported from Docs/ui-mockup.html. Since the October 2026 modernisation pass the
   app itself, and /dev/gallery, is the design of record; the mock-up is history.
   Every text pair here is measured by TokenContrastTests, in both themes.
   ============================================================================ */

:root{
  /* Native widgets — scrollbars, the date picker's icon, checkboxes — follow the theme. */
  color-scheme:light;
  --ink:#111111;
  --sage:#677979;          /* sampled from the logo */
  --sage-deep:#48585A;
  --blush:#EAC9C1;         /* sampled from the logo */
  --blush-deep:#CBA598;
  --paper:#F6F4F0;         /* was #FBFAF8: too close to white for a card to lift off it */
  --mist:#D9D9D9;
  --white:#FFFFFF;
  --hair:#E3E1DD;
  --muted:#5F6A6A;
  --ok:#3F6350;
  --owed:#9A4F3C;
  --warn:#8A6520;
  --ring-track:#E7E5E1;
  /* An administrator's ring: red with three mums or fewer, orange until the circle pays its
     way, green once it does. Graphics, not text, so 3:1 on both grounds — measured by
     TokenContrastTests. The orange is the tightest, at 3.43:1 on white and 3.12:1 on paper. */
  --ring-few:#C8372D; --ring-building:#D4700F; --ring-profit:#2F8A55;

  --font-title:"Marcellus",Georgia,"Times New Roman",serif;
  /* Body was PT Serif. Serif running text was most of what read as dated; Plex Sans was
     already here for numbers and chrome, so the whole UI is one family now and Marcellus
     is the brand's voice, on page titles only. */
  --font-body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --font-data:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --nav-w:232px;
  --logo-light:block; --logo-dark:none;

  /* Shape and depth. Radii were literal 3px/4px everywhere; shadows were one hairline. */
  --radius-s:6px; --radius:10px; --radius-l:14px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgb(17 17 17 / 4%), 0 1px 3px rgb(17 17 17 / 5%);
  --shadow-2:0 6px 20px rgb(17 17 17 / 8%), 0 1px 3px rgb(17 17 17 / 6%);
  --focus:#48585A;

  /* Small-text label colour. --sage (#677979) measures 4.17:1 on --paper, which
     fails WCAG AA for the 11px .eyebrow and th. --label is the same hue at
     4.68:1 on paper and 5.14:1 on white; --sage keeps the rules and chrome.
     TokenContrastTests holds --label to 4.5:1 on both grounds. */
  --label:#5F7171;
  /* Blush is the one colour that does not change between themes, so text sitting on it
     must not change either — these two pairs are fixed on purpose, not overlooked. */
  --on-blush:#111111;
  --on-owed:#FFFFFF;
  /* Control borders: --mist is 1.41:1 on white, under the 3:1 non-text floor, so anything
     whose border is the only thing identifying it uses this. #9AA3A3 was the first attempt
     and measured 2.58:1 on white and 2.47:1 on paper — under the floor it was introduced to
     clear. This is 3.89:1 on white and 3.77:1 on paper. Dark's is 3.96:1 on --white and
     already passed. */
  --control-border:#7A8383;
  /* Chart series colours — validated with the dataviz palette checker
     (lightness band, chroma floor, protan/deutan separation, contrast vs card). */
  --c1:#008C7A; --c2:#C25A38; --c3:#3A6EA5;
  /* Ageing ramp: one hue, light→dark, for ordered buckets only. */
  --r1:#E0AB93; --r2:#CA8261; --r3:#AE5B36; --r4:#85391A;
  /* Category tints: a soft ground with a deep text of the same hue. Eight, so a speaker's
     twenty-odd categories rarely share a colour on one card. Text on ground >= 4.5:1. */
  --tint1-bg:#DDF0EC; --tint1-fg:#1F5F55;
  --tint2-bg:#F7E1D8; --tint2-fg:#8A3D22;
  --tint3-bg:#DFE8F5; --tint3-fg:#2C5385;
  --tint4-bg:#EDE2F1; --tint4-fg:#6A3A7C;
  --tint5-bg:#E7EDD6; --tint5-fg:#4C5A1E;
  --tint6-bg:#F6DFE5; --tint6-fg:#8B2F4C;
  --tint7-bg:#F6EBCF; --tint7-fg:#7A5410;
  --tint8-bg:#E3E8EA; --tint8-fg:#3E4F57;
  --plot:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ink:#ECEAE6;
    --sage:#B4C4C4;
    --sage-deep:#CBD6D6;
    --blush:#EAC9C1;
    --blush-deep:#EAC9C1;
    --paper:#141718;
    --mist:#333B3C;
    --white:#1C2122;
    --hair:#2C3334;
    --muted:#A3AFAF;
    --ok:#8FBCA2;
    --owed:#E09980;
    --warn:#D3AC63;
    --ring-track:#2C3334;
    --ring-few:#F0756B; --ring-building:#F0A04B; --ring-profit:#5CC08A;

    --on-blush:#111111;
    --on-owed:#FFFFFF;
    --label:#B4C4C4;
    --control-border:#6E7A7B;
    --logo-light:none; --logo-dark:block;
    --c1:#2FA795; --c2:#D26E47; --c3:#5E8AC8;
    --r1:#8A4E35; --r2:#B06B49; --r3:#D18C67; --r4:#EDB394;
    --shadow-1:0 1px 2px rgb(0 0 0 / 35%);
    --shadow-2:0 6px 20px rgb(0 0 0 / 45%), 0 1px 3px rgb(0 0 0 / 35%);
    --focus:#CBD6D6;
    --tint1-bg:#173B36; --tint1-fg:#9FDCCF;
    --tint2-bg:#43261C; --tint2-fg:#F0B9A2;
    --tint3-bg:#1E3047; --tint3-fg:#AFC8EE;
    --tint4-bg:#352540; --tint4-fg:#D8BCE6;
    --tint5-bg:#2D351A; --tint5-fg:#C9D89A;
    --tint6-bg:#43212C; --tint6-fg:#F0B3C5;
    --tint7-bg:#3D3014; --tint7-fg:#EBCB86;
    --tint8-bg:#263136; --tint8-fg:#C2D0D6;
    --plot:#1C2122;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#ECEAE6;
  --sage:#B4C4C4;
  --sage-deep:#CBD6D6;
  --blush:#EAC9C1;
  --blush-deep:#EAC9C1;
  --paper:#141718;
  --mist:#333B3C;
  --white:#1C2122;
  --hair:#2C3334;
  --muted:#A3AFAF;
  --ok:#8FBCA2;
  --owed:#E09980;
  --warn:#D3AC63;
  --ring-track:#2C3334;
  --ring-few:#F0756B; --ring-building:#F0A04B; --ring-profit:#5CC08A;

  --on-blush:#111111;
  --on-owed:#FFFFFF;
  --label:#B4C4C4;
  --control-border:#6E7A7B;
  --logo-light:none; --logo-dark:block;
  --c1:#2FA795; --c2:#D26E47; --c3:#5E8AC8;
  --r1:#8A4E35; --r2:#B06B49; --r3:#D18C67; --r4:#EDB394;
  --shadow-1:0 1px 2px rgb(0 0 0 / 35%);
  --shadow-2:0 6px 20px rgb(0 0 0 / 45%), 0 1px 3px rgb(0 0 0 / 35%);
  --focus:#CBD6D6;
  --tint1-bg:#173B36; --tint1-fg:#9FDCCF;
  --tint2-bg:#43261C; --tint2-fg:#F0B9A2;
  --tint3-bg:#1E3047; --tint3-fg:#AFC8EE;
  --tint4-bg:#352540; --tint4-fg:#D8BCE6;
  --tint5-bg:#2D351A; --tint5-fg:#C9D89A;
  --tint6-bg:#43212C; --tint6-fg:#F0B3C5;
  --tint7-bg:#3D3014; --tint7-fg:#EBCB86;
  --tint8-bg:#263136; --tint8-fg:#C2D0D6;
  --plot:#1C2122;
}