/* REACH Nexus — design tokens
 * Single source of truth for colour, type and spacing.
 * Edit values here; do not hard-code colours elsewhere. */

:root {
  /* Brand colours — restrained palette per triage review.
     Dark blue is primary. Dark red is the single accent.
     Golden + light yellow are demoted to surfaces / callouts only. */
  --color-primary:        #335c67;   /* dark blue — header, primary buttons, links */
  --color-primary-dark:   #234048;   /* hover states */
  --color-primary-tint:   #e9e0cf;   /* oak-shadow tint — section dividers, sticky header bg, code-bg, partner block (warm v1, was #e3ebed) */
  --color-accent:         #9e2a2b;   /* single hot accent — living-lab markers, key CTAs */
  --color-accent-dark:    #540b0e;   /* hover state on accent */
  --color-callout:        #c8854a;   /* warm ochre — used sparingly for highlight callouts (warm v1, was #e09f3e) */
  --color-surface-warm:   #f9ebcd;   /* parchment — section dividers, callout boxes (warm v1, was #fff7d6) */

  --color-bg:             #f5f1ea;   /* linen — page background (warm v1, was #fafaf7) */
  --color-surface:        #ffffff;   /* cards */
  --color-text:           #1f2730;   /* body text */
  --color-text-muted:     #5b6770;   /* meta, captions */
  --color-border:         #d8dee0;
  --color-border-strong:  #b9c2c4;

  /* Semantic role aliases — use these in component CSS, not the brand swatches */
  --color-link:           var(--color-primary);
  --color-link-hover:     var(--color-accent-dark);
  --color-cta:            var(--color-accent);
  --color-cta-hover:      var(--color-accent-dark);
  --color-marker-living-lab: var(--color-accent);
  --color-marker-modelling:  var(--color-primary);

  /* Type system */
  --font-display: "Spectral", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text-xs:    0.8125rem;
  --text-sm:    0.9375rem;
  --text-base:  1.0625rem;
  --text-lg:    1.1875rem;
  --text-xl:    1.5rem;
  --text-2xl:   2rem;
  --text-3xl:   2.625rem;
  --text-4xl:   3.25rem;

  --leading-tight: 1.2;
  --leading-snug:  1.4;
  --leading-body:  1.65;

  /* Spacing scale (4px base) */
  --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-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-narrow: 720px;
  --container:         1100px;
  --container-wide:    1320px;
  --measure: 70ch;

  /* Borders & shadows — kept restrained */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(31, 39, 48, 0.06);
  --shadow:    0 4px 12px rgba(31, 39, 48, 0.08);

  /* Motion */
  --t-fast: 120ms;
  --t-base: 200ms;
}

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