/* Design tokens: the one place the planner's colours, type, radii and control sizes are defined.
   Loaded straight after the planner's inline styles and before every other stylesheet, and by the Guide library and
   Learning hub pages. Other sheets use these values through var(); tests/style-ratchet.test.mjs fails if a brand or
   semantic token is defined anywhere else. The planner's inline :root keeps only the drawing engine's own colours
   (stage, equipment categories and its status pair). See "Colours and type" in docs/page-redesign.md. */
:root {
  /* Brand: navy and sky blue. Sky blue is a fill on navy or white and text on navy, never text on white. */
  --ev-navy: #122b3e; --ev-navy-2: #183a52; --ev-navy-glow: radial-gradient(circle at 92% -40%, #2c5b7c 0, transparent 55%);
  --ev-sky: #6aa6ff; --ev-sky-hover: #8cbcff; --ev-sky-ink: #0f2436;
  --ev-on-navy: #b8c9d6; --ev-on-navy-dim: #8fa9bd; --ev-amber: #ffcf73;

  /* Action: blue is the primary action on light surfaces; sky blue is the primary on navy; navy marks a selected value. */
  --accent: #2563eb; --accent-hover: #1556d0; --accentText: #2056c5; --accentInk: #fff;
  --green: var(--accent); --green2: var(--accent-hover); /* older planner names for the same action blue */

  /* Text, lines and surfaces */
  --ink: #183043; --dim: #4f6576; --faint: #5d7384;
  --line: #e0e7ed; --line2: #c8d4df;
  --panel: #f5f7fa; --panel2: #fff;
  /* Page surface behind the cards: cool mist (Ben, 4 November 2026, in place of the 31 October warm stone), a very light
     blue-grey so white cards stand out, its faint 28 px grid in navy ink, the planner's top bar white, and card edges one
     step darker than --line. The website's site bar is navy (site-bar.css). */
  --page: #eef2f6; --page-grid: #12304a08; --top-bar: #ffffff; --card-line: #d6dfe7;
  /* Form controls: the resting border of text inputs, selects and textareas (WCAG 1.4.11 asks 3:1 for a control's boundary).
     #687d8e is 4.3:1 on white, 4.0:1 on --panel and 3.8:1 on --page; a focused field still turns navy under the focus ring.
     Cards, dividers and table lines keep --line and --line2. */
  --field-border: #687d8e; --control-border: var(--field-border); /* older planner name for the same border */
  --field-ink: #334f63;

  /* Status: done or within limits, needs attention, fails, and information. */
  --ev-ok: #4a7a14; --ev-ok-bg: #eef6d9;
  --ev-warn: #8f5d0f; --ev-warn-bg: #fff1d6;
  --ev-bad: #b0392f; --ev-bad-bg: #fdecea;
  --ev-info: #2056c5; --ev-info-bg: #e9f0fe;

  /* Focus ring: navy on light surfaces; navy surfaces re-point it to sky blue (design-preview.css). */
  --focus: #122b3e;

  /* Type: Hanken Grotesk is the one interface family. Canvas and PDF drawing set their own faces. */
  --font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: var(--font); --font-data: var(--font);
  --text-2xs: 11px;  /* micro labels, table heads, meta */
  --text-xs: 12px;   /* hints, captions, compact controls: the floor for interactive text */
  --text-ui: 13px;   /* buttons, fields, most interface text */
  --text-sm: 14px;   /* body copy, list titles */
  --text-base: 16px; /* card titles, phone fields (no zoom on focus) */
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;  /* page titles */
  --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.6;

  /* Shape, space and depth */
  --ev-radius: 8px; --ev-radius-lg: 14px; --ev-space: 24px;
  --ev-shadow: 0 1px 2px #10283c0f, 0 8px 24px #10283c0d; --ev-shadow-hover: 0 16px 36px #10283c26;

  /* Buttons: one height, font size and radius for every button family; 44px on touch screens. */
  --btn-h: 40px; --btn-h-sm: 32px; --btn-fs: 13px; --btn-r: 8px;
}
@media (pointer: coarse) {
  :root {--btn-h: 44px;}
}
/* Cards on the project pages use the larger radius. */
#evScreen {--ev-radius: var(--ev-radius-lg);}