/*
 * Design tokens — the single source of visual truth (validated Phase 1 v3).
 * A rebrand or color change is an edit to this file only; templates and
 * site.css never hardcode a color, font size, or spacing value.
 */
:root {
  /* Color — SI red identity (red hex pending brand confirmation, see PLAN.md) */
  --color-primary: #e2001a;
  --color-primary-dark: #b80016;
  --color-ink: #0e1626;
  --color-text: #1a1d23;
  --color-text-muted: #49515c; /* 7.6:1 on white (owner-requested contrast) */
  --color-bg: #fff;
  --color-bg-alt: #f5f6f8;
  --color-hero-tint: #fdecec;
  --color-border: #e6e8ec;
  --color-on-dark: #fff;
  --color-on-dark-muted: #a9b3c0; /* 8.5:1 on ink */
  --color-primary-on-dark: #ff6b77; /* brand red lifted for dark sections — 6.6:1 on ink (E2001A only reaches 3.6:1) */
  --color-on-dark-muted-soft: #9aa4b2; /* video block only — v1 composition kept by owner */

  /* Typography — single family: Inter (headings at 800), the validated v3 look.
     (Space Grotesk was the initial proposal; owner kept the one-family option, 2026-07-08.) */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);
  --weight-display: 800;
  --text-display: clamp(2.5rem, 1.5rem + 3.4vw, 4rem); /* 40–64px */
  --text-h1: clamp(2rem, 1.3rem + 2.6vw, 3rem); /* 32–48px */
  --text-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); /* 26–36px */
  --text-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); /* 20–24px */
  --text-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16–18px */
  --text-small: 0.875rem; /* 14px */
  --leading-heading: 1.15;
  --leading-body: 1.65;

  /* One-line section/page titles (laptop) — resize to fit, wrap on mobile */
  --text-h2-oneline: clamp(0.95rem, 2.45vw, 1.625rem);
  --text-post-title: clamp(1.06rem, 2.9vw, 1.94rem);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-pad: 84px; /* v2: airy section rhythm (desktop) */
  --section-pad-mobile: 56px;

  /* Radius & shadow */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(14 22 38 / 6%), 0 8px 24px rgb(14 22 38 / 6%);
  --shadow-card-hover: 0 2px 4px rgb(14 22 38 / 8%), 0 14px 32px rgb(14 22 38 / 10%);

  /* Motion & interaction (audit) — disabled globally under prefers-reduced-motion */
  --transition-fast: 160ms ease;
  --color-border-strong: #c9cfd8; /* hover state of card/accordion borders */

  /* Layout */
  --container-max: 1200px;
  --gutter: 24px;
  --gutter-mobile: 16px;
}