/* WH SelfInvest — Design Tokens (institutional editorial system)
   Single source of truth for colour, type, spacing, radii, elevation and motion.
   Consumers: site.css, components/*, legal pages. Never hard-code these values. */

:root {
  /* ---- Colour: institutional navy / petrol / cool neutrals -------------- */
  --navy-950: #061222;
  --navy-900: #0a1b33;
  --navy-800: #0d2340;
  --navy-700: #14304f;
  --navy-600: #1e4263;
  --navy-500: #345a7c;

  --petrol-800: #093b44;
  --petrol-700: #0c4a54;
  --petrol-600: #0f5e6b;
  --petrol-500: #157584;
  --petrol-200: #a9cbcf;
  --petrol-100: #e3eff0;
  --petrol-50: #f1f7f7;

  --paper: #ffffff;
  --ground: #f6f7f9;
  --ground-2: #eef1f4;
  --ground-3: #e4e8ed;

  --line: #dde2e8;
  --line-strong: #c6ceda;

  --ink: #131c26;
  --ink-2: #43505f;
  --ink-3: #6b7885;
  --ink-on-dark: #edf1f5;
  --ink-on-dark-2: #a9b6c3;
  --ink-on-dark-3: #7c8b9a;

  --positive: #1b7f5b;
  --positive-soft: #e3f3ec;
  --negative: #a93227;
  --negative-soft: #f8ecea;
  --warning: #8a6416;
  --warning-soft: #f6efdd;
  --info: var(--petrol-600);
  --info-soft: var(--petrol-100);

  /* Semantic aliases */
  --accent: var(--petrol-600);
  --accent-strong: var(--petrol-700);
  --accent-contrast: #ffffff;
  --focus-ring: #157584;

  /* ---- Type ------------------------------------------------------------ */
  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-26: 26px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-44: 44px;

  --h1: clamp(38px, 4.6vw, 62px);
  --h2: clamp(28px, 3.1vw, 40px);
  --h3: clamp(19px, 1.7vw, 23px);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* ---- Space (4/8 rhythm) --------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  --container: 1200px;
  --container-narrow: 820px;
  --gutter: 28px;
  --section-y: clamp(64px, 7.5vw, 116px);

  /* ---- Radii / elevation (deliberately minimal) ------------------------ */
  --r-1: 2px;
  --r-2: 3px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(6, 18, 34, 0.05);

  /* ---- Motion (discreet) ----------------------------------------------- */
  --dur-fast: 160ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(0.21, 0.61, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);

  /* ---- Layout chrome --------------------------------------------------- */
  --header-h: 78px;
}

@media (max-width: 900px) {
  :root {
    --header-h: 66px;
    --gutter: 20px;
  }
}