/* theme.css — Northstar design foundation: the single source of brand tokens.
   Canonical palette: "purple onboarding" (locked 2026-06-14).

   STANDARD for every page (especially new ones):
     • link this file FIRST (before page styles / styles.css),
     • style with var(--token) — never hardcode brand colours, spacing, radii or fonts,
     • shared component styles belong in the foundation, not per-page.

   Migration note: existing pages still hold hardcoded values and migrate to these tokens
   over time. The dashboard now renders on this canonical purple palette — its old green
   styles.css :root override has been removed; styles.css resolves every brand colour from
   the tokens below. */
:root {
  /* Brand — purple */
  --accent: #6c63ff;
  --accent-strong: #5b4fcf;
  --accent-light: #8b84e8;
  --accent-tint: #f4f2ff;
  --accent-tint-2: #ede9ff;
  /* Lavender surfaces for the "goal set, no account yet" activation strip + projection pill */
  --accent-tint-3: #f3f1ff;   /* strip gradient start */
  --accent-tint-4: #eef0ff;   /* strip gradient end */
  --accent-tint-5: #f0eefb;   /* projection-only pill surface */
  --accent-line:   #ddd9f8;   /* lavender hairline border */

  /* Categorical purple scale — for multi-series data (accounts, allocation, chart
     series) so categories stay on-brand instead of using a rainbow. Use in order. */
  --cat-1: #6c63ff;
  --cat-2: #8b84e8;
  --cat-3: #5b4fcf;
  --cat-4: #b3aef0;
  --cat-5: #cdc9f5;

  /* Ink & text */
  --text: #0f1e45;
  --ink: #0f1e45;
  /* #10 E1: muted text darkened to meet WCAG AA (4.5:1) on both white and the lavender --bg,
     staying in the same slate family. Was #6b7897 (3.95 on --bg) / #8892a4 (2.81). */
  --muted: #596484;
  --muted-2: #5d6883;
  /* AA: darkened from #aab2c8 to reach 4.5:1 as TEXT on all light surfaces — white (5.09:1),
     the lavender --bg (4.55:1) and the cream surface (4.77:1). Same slate hue, just darker;
     decorative/border uses are unaffected in feel. */
  --faint: #646e88;

  /* Surfaces & lines */
  --bg: #f0f2fb;
  --surface: #ffffff;
  --surface-2: #fafafe;
  --line: #eaecf4;
  --line-strong: #d0d4e4;

  /* Status */
  --good: #1a9e6e;
  --good-bg: #e8f9ef;
  --bad: #ef5b6a;
  --warn: #f59c0a;
  --warn-bg: #fff8e6;
  --info: #185fa5;
  /* AA text variants of the status colours: the --good/--warn fills above stay as-is for
     badges/fills, but as TEXT on light/tinted backgrounds they fail 4.5:1 — use these. */
  --good-strong: #127a50;   /* AA green text — ≥4.5:1 on white, --good-bg, cream & --bg */
  --warn-strong: #a85805;   /* AA amber text — ≥4.5:1 on white, --warn-bg, #fff3e0 & cream */

  /* Elevation */
  --shadow-sm: 0 10px 22px rgba(15, 23, 42, 0.04);
  --shadow: 0 22px 55px rgba(15, 23, 42, 0.07);
  /* Foundation elevation ladder — bluish-navy, mirrors @northstar/theme `elevation` (app side). New
     surfaces use these; the two legacy names above stay as-is so marketing visuals don't shift. */
  --shadow-1: 0 10px 30px rgba(15, 30, 90, 0.05);
  --shadow-2: 0 18px 50px rgba(15, 30, 90, 0.08);
  --shadow-3: 0 28px 70px rgba(15, 30, 90, 0.1);

  /* 4-based spacing scale (Foundation) — the shared scalar scale, mirrors @northstar/theme `spacing`. */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-base: 16px;
  --space-md: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Shape & type */
  --radius: 20px;
  --radius-sm: 14px;
  --font-sans: 'Inter', sans-serif;

  /* Warm cream surface — the "Start investing" guided journey (start.html, Direction B).
     A deliberately off-palette, editorial theme for that page; signed off 2026-06. Purple
     (--accent) and semantic green/amber still apply on top of these neutrals. */
  --cream-bg: #faf7f4;
  --cream-surface: #ffffff;
  --cream-border: #ece6df;
  --cream-border-2: #e3dcd2;
  --cream-track: #f0ece6;
  --cream-track-2: #f3efe9;
  /* AA: warm-2..warm-5 darkened in-hue to reach 4.5:1 as text on cream/white.
     Was warm-2 #8a7a64 / warm-3 #9a8f7d / warm-4 #b5a995 / warm-5 #a89a86 (all <4.5:1). */
  --warm-1: #6b6256;
  --warm-2: #6a5e4b;
  --warm-3: #71654f;
  --warm-4: #796b54;
  --warm-5: #746856;
  --warm-6: #5b5345;
}