/* SAVA — design tokens
   Base: imported design system (2026-07-25 handoff). Corrected per Impeccable
   critique before implementation — see DESIGN.md for the record. */
:root{
/* --- color: brand blue --- */
--blue-950:#0F1E33;--blue-900:#122A52;--blue-800:#123876;--blue-700:#134A9E;--blue-600:#1958C7;--blue-500:#2E6FE0;--blue-400:#6E9AF0;--blue-200:#C2D6FA;--blue-100:#E4EDFC;--blue-50:#F2F6FE;
/* --- color: cool-paper neutrals --- */
--paper-0:#F9F9F7;--paper-50:#F1F1EE;--stone-100:#E5E5E0;--stone-200:#D6D6CF;--stone-300:#BFBFB5;--stone-500:#87877D;--stone-700:#4F4F48;--stone-900:#25251F;
/* --- color: ink (text) --- */
--ink-900:#181B22;--ink-700:#3B3F49;--ink-500:#666B76;
/* --- color: semantic accents ---
   amber-600 corrected 2026-07-25 (polish pass): the imported value (#A8701C)
   measured 3.35:1 as badge text on amber-100, below WCAG AA 4.5:1. Darkened;
   still reads as a warm amber, used for both the warning badge text and the
   warning status dot. */
--amber-600:#8A5A16;--amber-100:#F3E4C6;--green-600:#3E6B4C;--green-100:#DDEADF;--brick-600:#A63B2C;--brick-100:#F3DDD6;
/* --- color: secondary accent teal ("la vie de l'école") ---
   accent-text is darker than accent: the imported accent (#0C9C86) at 12px on
   light tints measured ~3.1:1, below the 4.5:1 AA floor — flagged P0 in
   critique 2026-07-25. accent-text is for label/text use; accent stays for
   backgrounds, borders, icons, dots. */
--teal-600:#0C9C86;--teal-500:#12B39A;--teal-100:#CFEEE7;--teal-50:#E9F7F3;
--accent:var(--teal-600);--accent-text:#0A6B5A;--accent-soft:var(--teal-50);--accent-tint:var(--teal-100);
/* --- semantic aliases --- */
--surface-page:var(--paper-0);--surface-card:#FFFFFF;--surface-sunken:var(--paper-50);--surface-inverse:var(--blue-950);
--border-hairline:var(--stone-200);--border-strong:var(--stone-900);
--text-primary:var(--ink-900);--text-secondary:var(--ink-500);--text-on-inverse:var(--paper-0);--text-brand:var(--blue-600);--text-brand-hover:var(--blue-700);
/* text-muted corrected 2026-07-25 (polish pass): stone-500 measured 3.2:1 on
   paper-50 (footer meta text), below WCAG AA 4.5:1. Darkened for text use;
   stone-500 itself is kept for non-text/decorative use. */
--text-muted:#6B6B62;
--action-primary:var(--blue-600);--action-primary-hover:var(--blue-700);--action-primary-press:var(--blue-800);
--focus-ring:var(--blue-500);--focus-ring-tint:var(--blue-100);
--status-success:var(--green-600);--status-success-bg:var(--green-100);
--status-warning:var(--amber-600);--status-warning-bg:var(--amber-100);
--status-danger:var(--brick-600);--status-danger-bg:var(--brick-100);
--status-live:var(--blue-600);--status-live-bg:var(--blue-100);
--status-neutral:var(--stone-700);--status-neutral-bg:var(--stone-100);
/* tint surfaces: the pale panel used by callouts, trust pills, the tinted
   section variant, and lead-module cards — split from the raw blue-50/100
   scale so dark mode can remap the panel without touching every consumer. */
--surface-tint:var(--blue-50);--surface-tint-border:var(--blue-100);
--surface-tint-teal:var(--teal-50);--surface-tint-teal-border:var(--teal-100);
--text-on-tint:var(--blue-700);
/* heading-strong: the deep-blue headline color (hero h1, callout titles,
   two-ways card titles) — split from raw blue-950 so it can flip to a light
   tint when the page canvas itself goes dark. */
--text-heading-strong:var(--blue-950);
/* brand-mark: brand-blue icons and decorative numerals (card icons, the
   two-ways header icon, the problem-list numerals) — split from raw
   blue-600 because that value drops below 3:1 on a dark card surface. */
--brand-mark:var(--blue-600);
/* text-on-section-inverse: text for the *inverse section* only (the one
   "peak" block that contrasts with the page around it) — kept apart from
   --text-on-inverse, which stays fixed for the primary button label and the
   screen-mock's own permanently-dark surface. Only this one flips in dark
   mode, so the inverse section keeps contrasting with its surroundings
   instead of disappearing into an already-dark page. */
--text-on-section-inverse:var(--paper-0);--accent-on-section-inverse:var(--teal-100);
--text-secondary-on-section-inverse:var(--blue-100);

/* --- type --- */
--font-display:'Space Grotesk',system-ui,sans-serif;
--font-serif:'Source Serif 4',Georgia,serif;
--font-mono:'IBM Plex Mono',ui-monospace,monospace;
--text-display-xl:4.5rem;--text-display-lg:3.25rem;
--text-h1:2.25rem;--text-h2:1.75rem;--text-h3:1.375rem;--text-h4:1.125rem;
--text-body-lg:1.25rem;--text-body:1.0625rem;--text-small:0.9375rem;--text-caption:0.8125rem;--text-mono-label:0.8125rem;
--leading-tight:1.1;--leading-snug:1.3;--leading-body:1.6;--leading-editorial:1.7;
--tracking-tight:-0.01em;--tracking-wide:0.04em;--tracking-label:0.08em;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:800;

/* --- spacing --- */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--content-max:1120px;--content-max-narrow:720px;

/* --- layout / breakpoints (reference, copy into media queries) --- */
--bp-sm:640px;--bp-md:768px;--bp-lg:1024px;--bp-xl:1280px;

/* --- shape & elevation: sharp, editorial — no rounding except the live-dot pill.
   Corrected: MarketingHome.jsx hardcoded 8px on several ad-hoc surfaces,
   contradicting this token set — flagged P1 in critique 2026-07-25. All
   surfaces in this implementation honor radius-sm/md/lg = 0. */
--radius-sm:0px;--radius-md:0px;--radius-lg:0px;--radius-pill:999px;
--shadow-sm:0 1px 2px rgba(24,27,34,0.06);
--shadow-md:0 4px 16px rgba(24,27,34,0.08);
--shadow-lg:0 12px 32px rgba(24,27,34,0.12);
--ease-standard:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(0,0,.2,1);
--duration-fast:120ms;--duration-base:180ms;--duration-slow:280ms;
--border-w:1px;
}

/* --- dark mode: composed explicitly, not a mechanical invert ---
   The brand blue (action-primary/hover/press) is left untouched: filled
   buttons already read correctly against either canvas, and the institutional
   blue must stay one fixed color per the One Voice Rule. The screen mock is
   likewise untouched — it's a permanently-dark surface (a real display), not
   a themed one, so it looks identical in both modes. Everything else below is
   a deliberate remap, not an inversion: most notably, the "inverse" section
   (the one block meant to contrast with the page around it) flips from dark
   to light, because on a light page a dark block stands out — on a dark page
   a dark block would vanish. Its role, not its literal color, is preserved.
   See DESIGN.md's Theming section for the reasoning and named rule. */
@media (prefers-color-scheme: dark){
  :root{
    --surface-page:#0B1420;--surface-card:#0F1E33;--surface-sunken:#070D16;--surface-inverse:#F2F6FE;
    --border-hairline:rgba(255,255,255,.12);--border-strong:rgba(255,255,255,.4);
    --text-primary:#F2F3F5;--text-secondary:#A7AEBB;--text-muted:#8890A0;--text-brand:#6E9AF0;--text-brand-hover:#C2D6FA;
    --text-on-section-inverse:#181B22;--accent-on-section-inverse:#0A6B5A;
    --text-secondary-on-section-inverse:#134A9E;
    --text-heading-strong:#E4EDFC;--text-on-tint:#E4EDFC;--brand-mark:#6E9AF0;
    --accent-text:#CFEEE7;
    --focus-ring:#6E9AF0;--focus-ring-tint:#123876;
    --surface-tint:#14264A;--surface-tint-border:#134A9E;
    --surface-tint-teal:#0B3B34;--surface-tint-teal-border:#0C9C86;
    --status-success:#7FCB98;--status-success-bg:#123420;
    --status-warning:#E8B96B;--status-warning-bg:#3A2A0E;
    --status-danger:#E8897A;--status-danger-bg:#3A1712;
    --status-live:#6E9AF0;--status-live-bg:#14264A;
    --status-neutral:#B7BEC9;--status-neutral-bg:#1C2536;
    --shadow-lg:0 20px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05);
  }
}