/*
 * Site-wide design tokens.
 *
 * Everything that should be a one-place-change (colors, fonts, radii,
 * spacing) lives here as a CSS custom property. Page/component styles
 * should read these instead of hard-coding values.
 */

:root {
  /* ---- Fonts ---- */
  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  /* Type scale (headings use clamp() so they stay responsive) */
  --fs-h1: clamp(32px, 5.6vw, 60px);
  --fs-h2: clamp(27px, 3.6vw, 38px);
  --fs-h3-lg: clamp(24px, 2.6vw, 32px);
  --fs-h3: 22px;
  --fs-h4: 20px;
  --fs-body-lg: 17px;
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-tiny: 14px;
  --fs-micro: 13px;
  --fs-nano: 12px;

  /* ---- Colors: brand ---- */
  --color-primary: #E31E24;
  --color-primary-hover: #A8141A;
  --color-primary-soft-bg: #FDECEC;
  --color-accent: #FF8A8D;
  --color-accent-strong: #FF6B6F;
  --color-success: #009045;
  --color-success-soft-bg: #E9F5EE;

  /* ---- Colors: neutrals (light surfaces) ---- */
  --color-bg: #FAF8F4;
  --color-bg-alt: #F2EFE9;
  --color-surface: #FFFFFF;
  --color-border: #E4DFD6;
  --color-border-strong: #DCD6CB;
  --color-chip-bg: #EDE8DF;

  /* ---- Colors: text (on light surfaces) ---- */
  --color-text: #1A1D1B;
  --color-text-muted: #555C55;
  --color-text-faint: #8A9088;

  /* ---- Colors: dark surfaces (footer, bands, overlays) ---- */
  --color-dark: #1A1D1B;
  --color-dark-border: #2A2E2B;
  --color-dark-text: #F5F3EE;
  --color-dark-text-muted: #A9AEA7;
  --color-dark-nav-text: #D6DAD5;

  /* ---- Radii ---- */
  --radius-pill: 999px;
  --radius-lg: 22px;
  --radius-md: 18px;
  --radius-sm: 12px;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-pad: clamp(18px, 5vw, 32px);
  --section-gap: clamp(56px, 9vw, 96px);

  /* ---- Motion ---- */
  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;
  --transition-reveal: 700ms cubic-bezier(.2, .7, .3, 1);
}