/* SmartPropFact design tokens — the single source both modes and every screen share.
   Source of truth: DESIGN.md (2026-09-06, direction locked from the round-3 home mockups). */
:root {
  /* type */
  --font-sans: -apple-system, "SF Pro Display", "SF Pro Text", "Hiragino Sans", "Zen Kaku Gothic New", sans-serif;
  --fs-hero: 40px; --fs-title: 22px; --fs-figure: 19px; --fs-body: 15px; --fs-label: 13px; --fs-micro: 12px;
  --lh-tight: 1.2; --lh-body: 1.5;
  /* spacing (4px base) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --gutter: 16px;
  /* radii (hierarchical) */
  --r-hero: 28px; --r-card: 22px; --r-control: 16px; --r-chip: 999px; --r-tabbar: 32px; --r-thumb: 8px;
  /* surfaces — light */
  --bg: #f2f4f7; --surface: #ffffff; --surface-2: #f7f8fa; --hairline: rgba(16,24,40,.08);
  --text: #111318; --text-2: #5b6470; --text-3: #8a93a0;
  --shadow-card: 0 8px 24px rgba(16,24,40,.08);
  --tint: #111318; --on-tint: #ffffff;              /* interactive: ink */
  --hero-bg: linear-gradient(160deg,#0f1a2b,#142238); --hero-text: #ffffff; --hero-text-2: rgba(255,255,255,.72);
  --tabbar-bg: #111318; --tabbar-active-bg: #ffffff; --tabbar-active-text: #111318; --tabbar-icon: #ffffff;
  /* semantic vocabulary — meanings are law (see DESIGN.md §Color) */
  --equity: #059669;      /* green: paper/equity, principal turning into asset */
  --cash: #6b7280;        /* gray: non-deductible cash (principal) */
  --cash-deductible: #94a3b8; /* light gray: deductible cash */
  --taxable: #fbbf24;     /* amber: taxable income */
  --drag: #dc2626;        /* red: drag, arrears, missed */
  --market: #2563eb;      /* blue: market/sale only */
  --equity-fill: rgba(5,150,105,.18);
  /* tints (backgrounds behind semantic text/chips) */
  --equity-tint: color-mix(in srgb, var(--equity) 14%, transparent);
  --taxable-tint: color-mix(in srgb, var(--taxable) 22%, transparent);
  --drag-tint: color-mix(in srgb, var(--drag) 12%, transparent);
  --market-tint: color-mix(in srgb, var(--market) 12%, transparent);
  --cash-tint: color-mix(in srgb, var(--cash) 14%, transparent);
  --taxable-text: #b45309;   /* amber legible on white; dark mode uses --taxable itself */
  /* hero-scoped: the navy card keeps the dark-tuned semantics in both modes */
  --hero-equity: #30d158; --hero-drag: #ff453a; --hero-cash: #9aa3ad; --hero-taxable: #fbbf24;
  --hero-market: #0a84ff; --hero-cash-deductible: #6e7883;
}
:root[data-theme="dark"] {
  --bg: #0b0c0f; --surface: #16181d; --surface-2: #1c1e24; --hairline: rgba(255,255,255,.06);
  --text: #f2f3f5; --text-2: #a4abb6; --text-3: #6e7684;
  --shadow-card: 0 10px 30px rgba(0,0,0,.45);
  --tint: #ffffff; --on-tint: #111318;
  --hero-bg: linear-gradient(160deg,#0f1a2b,#142238); --hero-text: #ffffff; --hero-text-2: rgba(255,255,255,.72);
  --tabbar-bg: #1c1e24; --tabbar-active-bg: #ffffff; --tabbar-active-text: #111318; --tabbar-icon: #ffffff;
  --equity: #30d158; --cash: #9aa3ad; --cash-deductible: #6e7883; --taxable: #fbbf24; --drag: #ff453a; --market: #0a84ff;
  --equity-fill: rgba(48,209,88,.22);
  --taxable-text: #fbbf24;
}