/* CBS site tokens. Source of truth for the three palettes: product's CBS_PALETTES.md (7 Nov 2026, P2P-030), copied here exactly. Do not tune a product value: fix a failing pair in a DERIVED token below (tests/palette-contrast.js and tests/browser-matrix.js check every pair).
   Roles: --brand, --on-brand, --link, --glass (decorative only, never text), --surface, --bg, --text, --muted, --border (soft divider), --ui (control outline, 3:1 on --bg).
   Palette: data-palette on <html> (evergreen | clearsky | ledgerteal). Theme: data-theme = system | light | dark. */
:root{color-scheme:light dark}
/* Evergreen Glass (default) light */
:root,:root[data-palette="evergreen"]{--bg:#FFFFFF;--surface:#F3F8F5;--text:#0F1A15;--muted:#4A5D53;--border:#D5E3DB;--brand:#146B43;--on-brand:#FFFFFF;--link:#1F5FD1;--glass:#8EDCB4;--ui:#7A9286;}
/* Clear Sky light */
:root[data-palette="clearsky"]{--bg:#FFFFFF;--surface:#EEF4FD;--text:#0A1630;--muted:#4A5770;--border:#D6E0F2;--brand:#1B3B8F;--on-brand:#FFFFFF;--link:#245DC8;--glass:#36C2E0;--ui:#7B8BAA;}
/* Ledger Teal light */
:root[data-palette="ledgerteal"]{--bg:#FFFFFF;--surface:#EAF6F7;--text:#0B1F2A;--muted:#475E66;--border:#D3E6E8;--brand:#0F5E6E;--on-brand:#FFFFFF;--link:#0B6F86;--glass:#7FD6DD;--ui:#76939A;}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]),:root:not([data-theme="light"])[data-palette="evergreen"]{--bg:#0F1A15;--surface:#16241D;--text:#EEF6F1;--muted:#A7BDB1;--border:#2A3B32;--brand:#4FD18A;--on-brand:#0F1A15;--link:#8DB4F7;--glass:#2E6B4C;--ui:#6E8A7B;}
:root:not([data-theme="light"])[data-palette="clearsky"]{--bg:#0A1630;--surface:#111F3D;--text:#EEF3FD;--muted:#A9B6D3;--border:#24345A;--brand:#7FA7F5;--on-brand:#0A1630;--link:#8FB5FA;--glass:#1E5A78;--ui:#6E80A8;}
:root:not([data-theme="light"])[data-palette="ledgerteal"]{--bg:#0B1F2A;--surface:#122B36;--text:#ECF7F8;--muted:#A3BEC3;--border:#25424C;--brand:#5ED2DC;--on-brand:#0B1F2A;--link:#7FD9E0;--glass:#1D5A62;--ui:#6B8D94;}
}
/* dark, chosen explicitly */
:root[data-theme="dark"],:root[data-theme="dark"][data-palette="evergreen"]{--bg:#0F1A15;--surface:#16241D;--text:#EEF6F1;--muted:#A7BDB1;--border:#2A3B32;--brand:#4FD18A;--on-brand:#0F1A15;--link:#8DB4F7;--glass:#2E6B4C;--ui:#6E8A7B;}
:root[data-theme="dark"][data-palette="clearsky"]{--bg:#0A1630;--surface:#111F3D;--text:#EEF3FD;--muted:#A9B6D3;--border:#24345A;--brand:#7FA7F5;--on-brand:#0A1630;--link:#8FB5FA;--glass:#1E5A78;--ui:#6E80A8;}
:root[data-theme="dark"][data-palette="ledgerteal"]{--bg:#0B1F2A;--surface:#122B36;--text:#ECF7F8;--muted:#A3BEC3;--border:#25424C;--brand:#5ED2DC;--on-brand:#0B1F2A;--link:#7FD9E0;--glass:#1D5A62;--ui:#6B8D94;}
:root[data-theme="light"]{color-scheme:light}:root[data-theme="dark"]{color-scheme:dark}
/* ---- derived tokens (this is where contrast is tuned) ---- */
/* deep "anchor" surface for the switching band (same in light and dark: a deep tone from the palette's dark ground and brand), its soft text, and the bright badge/accent (the palette's dark-mode brand) */
:root,:root[data-palette="evergreen"]{--anchor:#0C261B;--anchor-soft:#CDEBDD;--anchor-accent:#4FD18A;--anchor-accent-ink:#0F1A15;--anchor-btn:#FFFFFF;--anchor-btn-ink:#0C261B}
:root[data-palette="clearsky"]{--anchor:#0D1C3E;--anchor-soft:#CFE0F7;--anchor-accent:#7FA7F5;--anchor-accent-ink:#0A1630;--anchor-btn:#FFFFFF;--anchor-btn-ink:#0D1C3E}
:root[data-palette="ledgerteal"]{--anchor:#0C2834;--anchor-soft:#CDEBEE;--anchor-accent:#5ED2DC;--anchor-accent-ink:#0B1F2A;--anchor-btn:#FFFFFF;--anchor-btn-ink:#0C2834}
/* links use the palette LINK colour (--ilink is the old name, kept as an alias) */
:root{--ilink:var(--link)}
/* tinted fills: brand at 10% on the surface (icon badges, eyebrow). --elev = the raised card: white in light, a touch lighter than --surface in dark */
:root{--tint:color-mix(in srgb,var(--brand) 10%,var(--surface));--badge:var(--tint);--elev:#FFFFFF;--shadow-hero:0 24px 48px -12px rgba(11,43,28,.12),0 4px 12px rgba(11,43,28,.06);--shadow-lift:0 14px 32px -12px rgba(11,43,28,.2),0 2px 8px rgba(11,43,28,.08)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--elev:color-mix(in srgb,var(--surface) 94%,#fff);--shadow-hero:0 24px 48px -12px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.35);--shadow-lift:0 14px 32px -12px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{--elev:color-mix(in srgb,var(--surface) 94%,#fff);--shadow-hero:0 24px 48px -12px rgba(0,0,0,.55),0 4px 12px rgba(0,0,0,.35);--shadow-lift:0 14px 32px -12px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.35)}
/* hero pipeline steps (timeline edges and dots): derived from link, brand and glass; each is 3:1 or better against --bg, --surface and --elev in every palette, light and dark */
:root{--seg-1:var(--link);--seg-2:color-mix(in srgb,var(--link) 50%,var(--brand));--seg-3:color-mix(in srgb,var(--brand) 60%,var(--glass));--seg-4:var(--brand)}
/* motion aliases (hero.css, tour.css read these; nothing else defines color) */
:root{--mo-bg:var(--surface);--mo-card:var(--elev);--mo-ink:var(--text);--mo-muted:var(--muted);--mo-line:var(--border);--mo-accent:var(--brand);--mo-accent-ink:var(--on-brand);--mo-glass:var(--glass);--mo-pop:var(--link);--mo-focus:var(--link)}
/* logo versions */
.logo-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-l{display:none}:root:not([data-theme="light"]) .logo-d{display:inline}}
:root[data-theme="dark"] .logo-l{display:none}:root[data-theme="dark"] .logo-d{display:inline}
:root[data-theme="light"] .logo-l{display:inline}:root[data-theme="light"] .logo-d{display:none}
/* ---- Pass 4 layout and link switches ---- */
/* ONE spacing token for the gap between major page sections (mobile 64px, desktop 96px); each section pads half of it top and bottom. Change it here. */
:root{--section-gap:clamp(64px,calc(26px + 6vw),96px);--section-pad:calc(var(--section-gap) / 2)}
/* ONE switch for the default underline on inline text links (WCAG 1.4.1). To revert to no underline at rest set this to none. */
:root{--link-underline:underline}
/* switching band edge: transparent in light; in dark the same subtle border token the Why CBS cards use, so the band does not melt into the canvas */
:root{--band-border:transparent}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--band-border:var(--border)}}
:root[data-theme="dark"]{--band-border:var(--border)}