/* Design tokens. Source: docs/design/design-rules.md section 3 (FLD-01, FLD-05, DIS-03, ACC-01, ACC-02, ACC-03, EMO-04).
   Contrast figures are checked by tests/test_design_tokens.py. */
:root {
  /* Touch targets (FLD-01, FLD-02) */
  --target-min: 44px;
  --target-field: 56px;
  --target-gap: 8px;

  /* Type scale (FLD-05, ACC-03): 16px body, 18px in field flows, relative so 200% text reflows */
  --text-base: 1rem;
  --text-field: 1.125rem;
  --text-small: 0.875rem;
  --text-h1: 1.75rem;
  --text-h2: 1.375rem;
  --line-height: 1.5;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Colour: text and surfaces (4.5:1 minimum, 7:1 for field-flow text) */
  --color-paper: #ffffff;
  --color-surface: #f2f5f7;
  --color-ink: #14202b;
  --color-ink-muted: #44505b;
  --color-border: #6b7782;
  --color-link: #0a4a73;
  --color-primary: #0a4a73;
  --color-on-primary: #ffffff;

  /* Status semantics (ACC-02): always colour plus icon shape plus text label */
  --status-critical-bg: #fde8e8;
  --status-critical-text: #7a0f12;
  --status-critical-border: #b3191d;
  --status-warning-bg: #fff2cc;
  --status-warning-text: #4a2f00;
  --status-warning-border: #8a5a00;
  --status-success-bg: #e3f4e6;
  --status-success-text: #0f4d1a;
  --status-success-border: #1b6b2b;
  --status-information-bg: #e1effa;
  --status-information-text: #08395a;
  --status-information-border: #0a5a8f;

  /* Focus indicator (ACC-01): at least 2px, 3:1 against adjacent colours */
  --focus-width: 3px;
  --focus-color: #003d99;
  --focus-offset: 2px;

  /* Motion (EMO-04): under 300ms */
  --motion-fast: 150ms;

  /* Layout: the persistent report bar is a 56 px button, 12 px padding each side and a 1 px rule,
     plus the phone's bottom safe-area inset; body padding follows it so the footer is never covered */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --report-bar-height: calc(var(--target-field) + var(--space-3) * 2 + 1px + var(--safe-bottom));
  --bp-phone: 600px;
  --measure: 40rem;
}