/* ============================================================
   VeridisQuo — design tokens. The ONE source of truth for every
   colour, space, type size, radius, shadow, duration and z-index.

   Two layers:
     1. PRIMITIVES — raw palette and scales. Never used by a
        component: they have no meaning, only a value.
     2. SEMANTIC   — roles (text-muted, border-control, score-2…)
        that point at a primitive. Components use these and only
        these. Re-pointing a role (a dark theme, a palette change)
        is a change to this file alone.

   Loaded by the first line of styles.css (@import), so every page
   that loads styles.css gets it. docs/design-system.md explains
   when to use which role; docs/frontend.md § Design tokens lists
   what lives here. Add a token only through a PR to this file.
   ============================================================ */

:root {
  /* ---------- 1. PRIMITIVES ---------- */

  /* Ink: the navy grey scale. 900 is the brand ink. */
  --ink-900: #0f1e3d;
  --ink-800: #24304d;
  --ink-700: #3a4561;
  --ink-600: #535d77;
  --ink-500: #6a7389;
  --ink-400: #8f96a8;
  --ink-300: #b4b9c6;
  --ink-200: #d5d8e0;
  --ink-100: #eceef2;

  /* Sand: the warm paper scale. 50 is the page. */
  --sand-50: #faf8f4;
  --sand-100: #f3f0e6;
  --sand-200: #ece7d8;
  --sand-300: #e4ddcc;
  --sand-400: #cfc6b0;
  --sand-600: #958a70;

  --white: #ffffff;
  --black-video: #14161a; /* behind a 9:16 cover, the letterbox of a video */

  /* Status hues, 50 / 100 / 300 / 500 / 700. 700 is text on the 50 tint.
     The 500s are fills carrying white text, so each one measures 4.5:1
     or better against white — which is why green-500 is #467f55 and not
     the #4f8a5e it used to be (4.09:1). */
  --green-50: #f1f6f2;
  --green-100: #dfeae2;
  --green-300: #9ebfa6;
  --green-500: #467f55;
  --green-700: #365e40;

  --orange-50: #fdf6ef;
  --orange-100: #f9eadc;
  --orange-300: #eebf93;
  --orange-500: #e08b3a;
  --orange-700: #985f27;

  --red-50: #fbf0ef;
  --red-100: #f5dddc;
  --red-300: #e19793;
  --red-500: #c9423a;
  --red-700: #892d27;

  --navy-50: #eef0f5;
  --navy-100: #d9dde9;
  --navy-300: #8b96bc;
  --navy-500: #2c4085;
  --navy-700: #1e2c5a;

  /* Gold: the score-3 hue and the dark text it carries. */
  --gold-500: #d4b24c;
  --gold-900: #3a2a00;

  /* Corporate brand blues: marketing and logo ONLY, never inside a
     product screen. */
  --brand-blue-050: #eef4fb;
  --brand-blue-100: #dbe7f6;
  --brand-blue-400: #4a9fd4;
  --brand-blue-500: #4491ce;
  --brand-blue-600: #3775c2;
  --brand-blue-700: #2b5bb7;
  --brand-blue-800: #24408a;

  /* Data-viz hues (the three Axes on /comment-ca-marche). Direct-labelled
     on the page; not for text. */
  --chart-1: var(--brand-blue-700);
  --chart-2: #1baf7a;
  --chart-3: #eda100;

  /* Type: families */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue",
    Arial, sans-serif;
  --font-display: "Newsreader", var(--font-serif); /* vitrine serif */
  --font-brand: "Poppins", var(--font-sans); /* wordmark only */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type: sizes. Ten steps plus one display size for the big numerals. */
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-17: 17px;
  --text-20: 20px;
  --text-22: 22px;
  --text-28: 28px;
  --text-32: 32px;
  --text-40: 40px;
  --text-56: 56px;

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-none: 1;
  --leading-tight: 1.15; /* headings */
  --leading-snug: 1.25; /* subheads, table cells */
  --leading-ui: 1.4; /* controls, chips, captions */
  --leading-body: 1.55; /* body copy */
  --leading-prose: 1.6; /* long-form reading */

  --tracking-tight: -0.01em; /* large serif */
  --tracking-wide: 0.04em; /* small labels */
  --tracking-caps: 0.08em; /* uppercase eyebrows */

  /* Space: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80, plus a
     2px half-step for outline offsets and the gaps inside badges. */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Shape */
  --radius: 4px; /* every rectangle */
  --radius-lg: 8px; /* the vitrine's two large dark panels, nothing else */
  --radius-pill: 999px; /* pills and chips */
  --radius-round: 50%; /* the score circle and dots */
  --border-width: 1px;
  --rule-width: 3px; /* the campaign note's left rule */

  /* Elevation: near-flat. 0 is none. */
  --shadow-1: 0 1px 4px rgba(15, 30, 61, 0.25); /* chip on an image */
  --shadow-2: 0 6px 18px rgba(15, 30, 61, 0.15); /* hover lift */
  --shadow-3: 0 16px 40px rgba(15, 30, 61, 0.22); /* modals, the dark wall */
  --shadow-panel: -8px 0 32px rgba(15, 30, 61, 0.18); /* a slide-over from the right edge */
  --lift: translateY(-2px); /* goes with --shadow-2 */

  /* Motion */
  --duration-fast: 120ms; /* lifts, chips */
  --duration-base: 150ms; /* colour and border changes */
  --duration-spin: 900ms;
  --duration-pulse: 1100ms;
  --duration-enter: 300ms; /* a tile fading up, a panel sliding in */
  --duration-reduced: 3s; /* spinner under prefers-reduced-motion */
  --ease: ease;

  /* Stacking. Nothing sets a z-index outside this scale. */
  --z-raised: 1; /* overlays inside a card or tile */
  --z-sticky: 10; /* sticky nav and rails */
  --z-dropdown: 20;
  --z-backdrop: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* Layout widths. Breakpoints cannot be custom properties (no var() in
     @media), so they are documented constants: 560 phone · 680 reading ·
     820 tablet · 980 wide. */
  --width-reading: 680px;
  --width-article: 780px; /* /notation */
  --width-wide: 1180px; /* grid and app */
  --width-modal: 480px; /* a confirm or a short form */
  --width-modal-wide: 640px; /* a form with several fields */
  --measure: 58ch; /* long text */

  /* ---------- 2. SEMANTIC ---------- */

  /* Surfaces */
  --surface-page: var(--sand-50);
  --surface-card: var(--white);
  --surface-muted: var(--sand-200); /* disclaimers, placeholders */
  --surface-inverse: var(--ink-900);
  --surface-video: var(--black-video); /* a video tile's frame, cover or not */

  /* Text */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-600); /* 6.2:1 on the page; ink-500 was 4.47 */
  --text-inverse: var(--sand-50); /* on --surface-inverse */
  --text-on-fill: var(--white); /* on a solid status or score fill */
  --fg-subtle: var(--ink-500); /* icons, dots, neutral fills — never text */
  --fill-neutral: var(--sand-400); /* the neutral segment of a meter or bar */

  /* Text and borders on an ink surface (the vitrine wall, dark pillars) */
  --on-ink-secondary: rgba(255, 255, 255, 0.82);
  --on-ink-muted: rgba(255, 255, 255, 0.6);
  --on-ink-border: rgba(255, 255, 255, 0.25);
  --on-ink-fill: rgba(255, 255, 255, 0.1);

  /* Borders */
  --border-hairline: var(--sand-300); /* dividers, card edges */
  --border-control: var(--sand-600); /* inputs, selects: 3.4:1 on white */
  --border-strong: var(--ink-900); /* hover/focus on cards and controls */

  /* Accent: links, primary-button hover, one italic emphasis per headline */
  --accent: var(--red-500);
  --link: var(--accent);

  /* Selection (filter chips). Ink, not accent: accent is also score-1. */
  --selected: var(--ink-900);
  --selected-tint: rgba(15, 30, 61, 0.06);
  --shadow-selected: inset 0 0 0 1px var(--selected);

  /* Focus. A solid ring: the old 35 % halo measured 1.65:1 on the page. */
  --focus-ring-color: var(--accent);
  --focus-ring-width: 3px;
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
  --focus-ring-offset: 2px;
  --focus-ring-inset: 0 0 0 3px rgba(15, 30, 61, 0.12); /* inputs, extra */

  /* Overlays */
  --overlay-ink: rgba(15, 30, 61, 0.78); /* chip over an image */
  --overlay-scrim: rgba(15, 30, 61, 0.45); /* over a tile */
  --overlay-scrim-light: rgba(15, 30, 61, 0.15);
  --surface-translucent: rgba(250, 248, 244, 0.92); /* sticky nav */

  /* The 1–4 Score ramp and the text each hue carries */
  --score-1: var(--red-500);
  --score-2: var(--orange-500);
  --score-3: var(--gold-500);
  --score-4: var(--green-500);
  --score-fg-1: var(--white);
  --score-fg-2: var(--ink-900); /* white was 2.65:1 */
  --score-fg-3: var(--gold-900);
  --score-fg-4: var(--white);

  /* Status tones (Alert, Pill) */
  --success-bg: var(--green-50);
  --success-border: var(--green-300);
  --success-fg: var(--green-700);
  --success-solid: var(--green-500);
  --warning-bg: var(--orange-50);
  --warning-border: var(--orange-300);
  --warning-fg: var(--orange-700);
  --warning-solid: var(--orange-500);
  --error-bg: var(--red-50);
  --error-border: var(--red-300);
  --error-fg: var(--red-700);
  --error-solid: var(--red-500);
  --info-bg: var(--navy-50);
  --info-border: var(--navy-300);
  --info-fg: var(--navy-700);
  --info-solid: var(--navy-500);

  /* Domain */
  --campaign-rule: var(--navy-500); /* the campaign note's left rule */

  /* Controls: the two paddings that are component tokens, not steps */
  --control-pad-y: 14px;
  --control-pad-x: 16px;
  --button-pad-x: 22px;
}

/* Composite primitives that reference other tokens. */
:root {
  --brand-gradient: linear-gradient(
    105deg,
    var(--brand-blue-700) 0%,
    var(--brand-blue-400) 100%
  );
}