:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  /* Type scale — floor is Performance hero meta (.ds-portfolio-header-delta = body).
     Nothing in the app may render smaller than --ds-text-body. */
  --ds-text-title: 20px;
  --ds-text-hero: 28px;
  --ds-portfolio-hero-band: 2rem;
  /* Shared height for Snapshot|History|Overview mode tabs, range tabs, date action bar */
  --ds-control-h: var(--ds-portfolio-hero-band);
  --ds-text-headline: 16px;
  --ds-text-body: 14px;
  /* Caption role = body size (weight/color carry hierarchy, not smaller type) */
  --ds-text-caption: var(--ds-text-body);
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  /* Aliases for component rules */
  --ds-text-heading: var(--ds-text-headline);
  --ds-text-subhead: var(--ds-text-body);
  --ds-text-chart-bucket: var(--ds-text-body);
  --ds-text-min: var(--ds-text-body);
  /* Brand — forest green accents + charts; page is a single light surface (not a dark field). */
  --ds-brand-hero: #1a7a5e;
  --ds-brand-secondary: #0f5c47;
  --ds-brand-tertiary: #2f9e78;
  /* Brick red tuned to sit with forest greens (same value band as secondary green). */
  --ds-brand-debt: #b5453d;
  /* Full-page light field — no floating card on dark green. */
  --ds-bg: #f7f8f7;
  --ds-chrome-text: #0f2922;
  --ds-chrome-text-muted: #475569;
  --ds-chrome-surface: #eef0ef;
  --ds-chrome-border: #d9dedb;
  --ds-surface: #f7f8f7;
  --ds-surface-section: #eef0ef;
  --ds-surface-inset: #e4e7e5;
  --ds-border: #c5ccc8;
  --ds-border-subtle: #d9dedb;
  /* One-page look: no drop-shadow “floating card” elevation */
  --ds-shadow-panel: none;
  --ds-text: #020617;
  --ds-text-secondary: #334155;
  --ds-text-muted: #64748b;
  --ds-text-on-section: #020617;
  --ds-accent: var(--ds-brand-hero);
  --ds-chart-net-worth: var(--ds-brand-hero);
  --ds-chart-assets: var(--ds-brand-tertiary);
  --ds-chart-liabilities: var(--ds-brand-debt);
  --ds-chart-real-estate: var(--ds-brand-secondary);
  --ds-chart-primary: var(--ds-brand-hero);
  --ds-chart-secondary: var(--ds-brand-secondary);
  --ds-chart-tertiary: var(--ds-brand-tertiary);
  --ds-radius-sm: 0.75rem;
  --ds-radius-md: 1rem;
  --ds-radius-lg: 1.25rem;
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-amount-negative: var(--ds-brand-debt);
  --ds-gap: var(--ds-space-4);
  --ds-gap-stack: var(--ds-space-6);
  --ds-stack-min: var(--ds-space-4);
  --ds-chart-inset-top: 0;
  --ds-chart-title-gap: var(--ds-gap);
  --ds-chart-axis-bottom: var(--ds-space-6);
  --ds-chart-row-gap: var(--ds-gap);
  --ds-chart-height: 200px;
  /* Y-axis gutter for 14px tick labels (e.g. $123.5k) */
  --ds-chart-gutter: 56px;
  --ds-chart-plot-right: 8px;
  --ds-chart-grid: rgb(26 122 94 / 0.1);
  --ds-brand-hero-rgb: 26 122 94;
  --ds-bg-rgb: 247 248 247;
  --ds-amount-negative-rgb: 181 69 61;
  --ds-code-bg: var(--ds-surface-section);
  --ds-code-border: var(--ds-border-subtle);
  --ds-code-text: var(--ds-text-secondary);
  --ds-code-caption: var(--ds-text-muted);
}