/* THE FIVE LEADS, final pass, per Celine's ruling 16 Sep 2026: "I like option
   five... maybe the cream is a little too dark... maybe it's just all
   white... instead of blue on the sidebar, maybe cream, like a dark pastel
   cream... so it matches more with the lion." White is the base of every
   lead now. Forest is reserved for big titles, the mark and numerals.
   Pastels (Mint, Powder blue, Lemon, from palette.css) sit only on chips,
   chart fills and state colour, never on the sidebar's active item or the
   credits meter: those get their own deeper pastel cream, --lead-active,
   because a blue active item read as off brand against the lion's own
   green and cream identity.

   L5a White ground, whisper cream cards, lightest cream sidebar. DEFAULT,
       until she rules between the five.
   L5b All white: ground, cards and sidebar, cards carry a hairline border.
   L5c Lightest cream sidebar, whisper cream cards, white ground.
   L5d All white with a hairline, cards carry a thin pastel top edge (Mint,
       Powder blue or Lemon, cycling) so the palette still shows in small
       measured places even on the plainest of the five.
   L5e As L5a, but the primary button is solid Forest with Cream text,
       matching the sidebar treatment L3/L4 explored, kept here as an
       explicit option rather than folded into every lead.

   Contrast, computed and verified before these hexes were written:
   Forest on the deeper pastel cream #EDE3D2 (the active item and the meter)
   8.71:1. Forest on whisper cream #FBF9F5 10.54:1. Forest on lightest cream
   #FAF7F2 10.37:1. Cream #F8F5F1 on Forest #1B4332 (L5e's button) 10.19:1. */

:root, [data-lead]{ --lead-active:#EDE3D2; --lead-active-ink:#1B4332; --chrome-rest:#F4F0EA; }

[data-lead="L5a"]{
  --bg:#FFFFFF; --surface:#FBF9F5; --surface-2:#F5F0E7; --border:#ECE8E1;
  --chrome-bg:#FAF7F2; --chrome-ink:var(--ink-strong); --chrome-muted:var(--ink-muted);
  --chrome-border:#EFE9DD; --chrome-hover:#F3EEE3;
}
[data-lead="L5b"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FAFAF8; --border:#ECE8E1;
  --chrome-bg:#FFFFFF; --chrome-ink:var(--ink-strong); --chrome-muted:var(--ink-muted);
  --chrome-border:#ECE8E1; --chrome-hover:#F6F5F2;
}
[data-lead="L5b"] .cl-card{border-color:#ECE8E1}
[data-lead="L5c"]{
  --bg:#FFFFFF; --surface:#FBF9F5; --surface-2:#F5F0E7; --border:#ECE8E1;
  --chrome-bg:#FAF7F2; --chrome-ink:var(--ink-strong); --chrome-muted:var(--ink-muted);
  --chrome-border:#EFE9DD; --chrome-hover:#F3EEE3;
}
/* L5d, DEFAULT, locked by Celine 16 Sep 2026. White ground and cards with a
   hairline, a white sidebar with the same hairline, rail items resting at
   #F4F0EA, the active item and the credits meter in the pastel cream
   #EDE3D2. Each KPI tile carries its own named pastel top edge rather than a
   cycling one: Published Mint, Next post and Reach Powder blue, Needs you
   (Approvals waiting) Lemon, assigned per tile in app.js's roomHome, not by
   position, so the colour always means the same thing. */
[data-lead="L5d"]{
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#FAFAF8; --border:#ECE8E1;
  --chrome-bg:#FFFFFF; --chrome-ink:var(--ink-strong); --chrome-muted:var(--ink-muted);
  --chrome-border:#ECE8E1; --chrome-hover:#EDE9DF;
}
[data-lead="L5d"] .cl-card{border-color:#ECE8E1}
[data-lead="L5d"] .cl-nav a:not([aria-current="page"]){background:var(--chrome-rest)}
[data-lead="L5e"]{
  --bg:#FFFFFF; --surface:#FBF9F5; --surface-2:#F5F0E7; --border:#ECE8E1;
  --chrome-bg:#FAF7F2; --chrome-ink:var(--ink-strong); --chrome-muted:var(--ink-muted);
  --chrome-border:#EFE9DD; --chrome-hover:#F3EEE3;
  --accent:#1B4332; --accent-ink:#F8F5F1;
}
[data-lead="L5e"] .cl-nav a[aria-current="page"]{background:var(--lead-active);color:var(--lead-active-ink)}

/* the active nav item and the credits meter: every lead, the deeper pastel
   cream, never the leading palette colour, so the rail reads as brand cream
   and green rather than as "the blue app" */
[data-lead] .cl-nav a[aria-current="page"]{background:var(--lead-active);color:var(--lead-active-ink);font-weight:700}
[data-lead] .cl-credits-bar span{background:var(--lead-active)}

/* dark mode inverts every lead's chrome to a deep Forest ground with cream
   text, never a light sidebar left stranded against a dark canvas (that read
   as near invisible text until this was verified against a real screenshot,
   not just reasoned about). The three pastels stay as accents on chips and
   chart fills at their own light hexes, still readable against a dark card
   per the contrast pass in _READ_ME_FIRST.md; only the chrome and the active
   item invert. */
@media (prefers-color-scheme:dark){
  [data-lead]:not([data-mode="light"]){
    --chrome-bg:#1B4332; --chrome-ink:#F8F5F1; --chrome-muted:#C9BFA6;
    --chrome-border:rgba(248,245,241,.14); --chrome-hover:rgba(248,245,241,.08);
    --lead-active:rgba(205,235,221,.24); --lead-active-ink:#F8F5F1; --chrome-rest:transparent;
    --chrome-tagline:#F8F5F1;
  }
}
[data-lead][data-mode="dark"]{
  --chrome-bg:#1B4332; --chrome-ink:#F8F5F1; --chrome-muted:#C9BFA6;
  --chrome-border:rgba(248,245,241,.14); --chrome-hover:rgba(248,245,241,.08);
  --lead-active:rgba(205,235,221,.24); --lead-active-ink:#F8F5F1; --chrome-rest:transparent;
  --chrome-tagline:#F8F5F1;
}

/* the one optional dark switch, still available behind any lead */
[data-chrome="dark"]{
  --chrome-bg:#1B4332!important; --chrome-ink:#F8F5F1!important; --chrome-muted:#C9BFA6!important;
  --chrome-border:rgba(248,245,241,.14)!important; --chrome-hover:rgba(248,245,241,.08)!important;
}
[data-chrome="dark"] .cl-nav a[aria-current="page"]{background:var(--lead-active);color:var(--lead-active-ink)}