:root {
  /* Retirement Planner UI design system: raw palette kept for compatibility. */
  --navy: #0f1e3c;
  --navy-mid: #1a2f5a;
  --blue: #1e4d8c;
  --accent: #c8a96e;
  --accent-light: #e8d4a8;
  --green: #2d7a4f;
  --green-light: #e8f5ee;
  --red: #c0392b;
  --red-dark: #a5322e;
  --red-light: #fdf0ee;
  --grey-light: #f0f2f7;
  /* #8a9ab5 was ~2.85:1 on white/page-bg — fails WCAG AA's 4.5:1 for text.
     --grey is used exclusively as a text colour (never a border or
     background), so this is a complete fix with no other blast radius.
     Darkest shade of the same hue that still clears 4.5:1 everywhere it's
     used. Was mobile-only; promoted to the default after finding the same
     failure on desktop, which renders the identical value. */
  --grey: #5b6f90;
  --text: #1a2035;
  --text-light: #5a6a85;
  --border: #dde3f0;
  --shadow-subtle: 0 1px 3px rgba(15,30,60,0.14);
  --shadow: 0 4px 24px rgba(15,30,60,0.10);
  --shadow-lg: 0 8px 48px rgba(15,30,60,0.15);

  /* Semantic tokens */
  --font-ui: 'DM Sans', sans-serif;
  --font-display: 'Playfair Display', serif;
  /* Shared type scale. Responsive changes are made here so every typography
     variant and component consumer moves together. */
  --font-size-compact: 0.8rem;
  --font-size-supporting: 0.82rem;
  --font-size-body: 0.9rem;
  --font-size-page-title: 1.35rem;
  --font-size-metric-lg: 1.6rem;
  --font-size-metric-md: 1.35rem;
  --font-size-metric-sm: 1.15rem;
  --font-size-metric-xs: 0.98rem;
  --line-height-compact: 1.3;
  --line-height-supporting: 1.45;
  --line-height-body: 1.5;
  --line-height-tight: 1.2;
  --color-page: var(--grey-light);
  --color-surface: #fff;
  --color-surface-soft: rgba(255,255,255,0.86);
  --color-text: var(--text);
  --color-text-muted: var(--text-light);
  /* --accent (#c8a96e) is ~2:1 on white/page-bg as text — fails WCAG AA.
     It also has 25+ non-text uses (borders, focus rings, status
     highlights) that must stay the brighter original colour, so text uses
     route through this separate token instead of --accent directly.
     Darkest shade of the same hue that still clears 4.5:1 everywhere it's
     used. Was mobile-only; promoted to the default after finding the same
     failure on desktop, which renders the identical value. */
  --color-text-accent: #866933;
  --color-line: var(--border);
  --color-action: var(--navy);
  --color-action-hover: var(--blue);
  --color-action-subtle: var(--grey-light);
  --color-focus: var(--accent);

  /* Semantic state colours. Components consume these aliases instead of
     inferring product meaning from the raw palette. The explicit text or icon
     beside each colour remains the accessible source of meaning. */
  --color-information: var(--blue);
  --color-information-surface: #edf4fb;
  --color-positive: var(--green);
  --color-positive-surface: var(--green-light);
  --color-warning: var(--color-text-accent);
  --color-warning-accent: var(--accent);
  --color-warning-surface: #fbf7ed;
  --color-danger: var(--red);
  --color-danger-surface: var(--red-light);
  --color-comparison-better: var(--color-positive);
  --color-comparison-better-surface: var(--color-positive-surface);
  --color-comparison-worse: var(--color-danger);
  --color-comparison-worse-surface: var(--color-danger-surface);
  --color-comparison-neutral: var(--color-text-muted);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;

  --radius-xs: 6px;
  --radius-sm: 7px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  --border-thin: 1px solid var(--color-line);
  --border-control: 1.5px solid var(--color-line);
  --transition-fast: 0.15s ease;
  --transition-med: 0.22s ease;

  --z-menu: 700;
  --z-drawer-backdrop: 800;
  --z-drawer: 801;
  --z-toast: 9000;
  --z-tooltip: 10000;
  --z-modal: 11000;
}

/* Touch layouts use the slightly larger supporting-copy size on both phones
   and portrait tablets. Content stacking is owned separately by components. */
@media (max-width: 1024px) {
  :root {
    --font-size-supporting: 0.85rem;
  }
}