/* Design tokens — source of truth: docs/design/DESIGN.md §3. Load first. */
:root {
  /* Colour — warm paper + ink + one accent colour (road-sign blue) */
  --paper:        #F3F0E8;
  --paper-sunk:   #E9E5DA;
  --surface:      #FBFAF6;
  --ink:          #17160F;
  --ink-2:        #47443C;
  --ink-3:        #625E56;
  --line:         #D9D4C7;
  --line-strong:  #17160F;
  --line-input:   #857F72;  /* ≥3:1 on paper & surface — interactive boundaries */

  /* Accent — Polish road-sign blue (informational signs). Changed from road-marking yellow
     per client, 2026-10-12. White text on accent = 7.4:1; accent as text on paper ≈ 6.5:1. */
  --accent:       #1F4FB5;  /* primary CTA bg, active states, links (sparingly) */
  --accent-hover: #183F92;
  --accent-press: #12316F;
  --accent-ink:   #FFFFFF;  /* text on accent */
  --accent-soft:  #E3EAF8;  /* active chip / selected tile / listbox highlight bg */
  --accent-line:  #8FB0F0;  /* dashed road line + focus ring on asphalt */

  /* Deprecated aliases (yellow era) — keep old names working, same values as accent */
  --signal:       var(--accent);
  --signal-press: var(--accent-hover);
  --signal-ink:   var(--accent-ink);
  --signal-wash:  var(--accent-soft);

  --asphalt:      #1B1C1E;
  --asphalt-2:    #26272A;
  --asphalt-line: #3A3B3F;
  --on-asphalt:   #F3F0E8;
  --on-asphalt-2: #B9B5AB;

  --ok:           #1E7047;
  --ok-wash:      #E2F0E6;
  --error:        #B42318;
  --error-wash:   #FBE6E3;

  /* Focus is ink, not accent: "where am I" must not look like "what's selected" (and it stays
     visible on the blue buttons and the blue skip link). Asphalt: the light accent line. */
  --focus:        var(--ink);
  --focus-on-dark:#8FB0F0;
  --scrim:        rgb(23 22 15 / 0.48);

  /* Type */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);  /* 13 → 14 */
  --step-0:  clamp(1rem,      0.97rem + 0.18vw, 1.125rem);  /* 16 → 18 */
  --step-1:  clamp(1.1875rem, 1.12rem + 0.36vw, 1.4375rem); /* 19 → 23 */
  --step-2:  clamp(1.4375rem, 1.3rem + 0.71vw, 1.9375rem);  /* 23 → 31 */
  --step-3:  clamp(1.75rem,   1.5rem + 1.25vw, 2.625rem);   /* 28 → 42 */
  --step-4:  clamp(2.25rem,   1.7rem + 2.7vw, 4.125rem);    /* 36 → 66 */
  --step-5:  clamp(2.875rem,  1.85rem + 5.1vw, 6.5rem);     /* 46 → 104 */

  --lh-tight: 0.92;
  --lh-snug:  1.15;
  --lh-body:  1.55;

  /* Space (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter:  clamp(16px, 4vw, 40px);
  --section: clamp(56px, 9vw, 128px);
  --max:     1320px;
  --measure: 66ch;

  /* Shape */
  --r-1: 4px;   /* inputs, chips, buttons */
  --r-2: 8px;   /* cards, photos */
  --r-3: 16px;  /* sheet top corners */
  --hairline: 1px solid var(--line);

  /* Elevation — used sparingly; the system is mostly flat with hairlines */
  --shadow-1:     0 1px 0 rgb(23 22 15 / 0.05), 0 1px 3px rgb(23 22 15 / 0.06);
  --shadow-2:     0 2px 4px rgb(23 22 15 / 0.05), 0 12px 32px -8px rgb(23 22 15 / 0.18);
  --shadow-sheet: 0 -12px 40px rgb(23 22 15 / 0.22);

  /* Motion */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-hover:  ease;
  --dur-press:   120ms;
  --dur-fast:    160ms;
  --dur-base:    220ms;
  --dur-step:    260ms;
  --dur-sheet:   420ms;
  --dur-exit:    200ms;

  --tap: 48px;
  --header-h: 60px;
}
@media (min-width: 900px) { :root { --header-h: 72px; } }