/* ==========================================================================
   DESIGN TOKENS
   Single source of truth for color, type, spacing and layout values.
   Every other CSS file references these variables instead of raw values.
   ========================================================================== */

:root {
  /* ---- Color: brand ---- */
  --color-ink: #1b2a38;          /* primary text, header/footer background */
  --color-ink-700: #253745;      /* lighter navy, secondary surfaces */
  --color-ink-600: #33495c;      /* hover state on navy surfaces */
  --color-brass: #b8863f;        /* accent: CTAs, links, stat highlights */
  --color-brass-dark: #96692b;   /* accent hover/active */
  --color-brass-tint: #f3e9d8;   /* very light accent background */

  /* ---- Color: neutrals ---- */
  --color-paper: #f5f6f4;        /* page background, cool off-white */
  --color-surface: #ffffff;      /* card/form surfaces */
  --color-line: #dde1e0;         /* hairline borders/dividers */
  --color-text: #1b2a38;         /* body text (matches ink) */
  --color-text-secondary: #55636e; /* meta text, captions */
  --color-text-on-dark: #f5f6f4; /* text on navy backgrounds */
  --color-text-on-dark-secondary: #aebac3;

  /* ---- Color: feedback ---- */
  --color-success: #2f7d5c;
  --color-success-tint: #e6f2ec;
  --color-error: #b3432b;
  --color-error-tint: #fbeae6;

  /* ---- Typography ---- */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --fs-h2: clamp(1.6rem, 1.35rem + 1.1vw, 1.9rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-stat: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);

  --lh-tight: 1.15;
  --lh-heading: 1.3;
  --lh-body: 1.65;

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4.5rem;   /* 72px */
  --space-7: 6rem;     /* 96px */

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(27, 42, 56, 0.06), 0 1px 1px rgba(27, 42, 56, 0.04);
  --shadow-md: 0 8px 24px rgba(27, 42, 56, 0.08), 0 2px 6px rgba(27, 42, 56, 0.05);
  --shadow-lg: 0 20px 48px rgba(27, 42, 56, 0.14);

  /* ---- Header height (used to offset sticky elements / anchor scrolling) ---- */
  --header-height: 76px;
}