/* Phase 02 implementation; preserve the reference's cobalt/white visual language.
   System-font approximation only: no font files are supplied. */
:root {
  --color-cobalt: #0735d8;
  --color-cobalt-deep: #0626a5;
  --color-white: #ffffff;
  --color-paper: #f6f5f0;
  --color-ink: #10172c;
  --color-muted: #566079;
  --color-rule-on-blue: rgba(255, 255, 255, 0.65);
  --color-rule-on-paper: rgba(16, 23, 44, 0.2);
  --font-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-size-display: clamp(3.5rem, 13vw, 9rem);
  --font-size-heading: clamp(2.25rem, 8vw, 5.25rem);
  --font-size-subheading: clamp(1.5rem, 5vw, 2.5rem);
  --font-size-body: 1rem;
  --font-size-label: 0.75rem;
  --font-weight-display: 900;
  --font-weight-body: 400;
  --line-height-display: 0.95;
  --line-height-body: 1.5;
  --tracking-display: -0.055em;
  --tracking-label: 0.18em;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --radius-control: 0.875rem;
  --radius-card: 1.5rem;
  --radius-panel: clamp(1.5rem, 3vw, 2.5rem);
  --radius-pill: 999px;
  --border-rule: 1px;
  --control-min-height: 3rem;
  --page-gutter: 1.25rem;
  --content-max-width: 75rem;
  --color-field-border: #7b849c;
  --color-error: #9d2532;
  --shadow-panel: 0 16px 48px rgba(6, 38, 165, 0.08);
  --motion-fast: 140ms;
  --motion-normal: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-normal: 0ms;
  }
}