/* FlexTrust Kinetic design tokens (docs/DESIGN.md; architecture inherited
   from the FlexYield handover, docs/bridge/design). Two user-switchable
   seams: dark (default, emerald) and light (deep teal, body.ft-light).
   Every color in the app must route through these tokens; alpha variants
   are derived with color-mix — never hardcoded rgba twins. This file
   loads last (Propshaft alphabetical order), so it owns the cascade. */

body {
  /* dark seam */
  --bg: #0B0E1A;
  --surface: #111827;
  --band: rgba(17, 24, 39, 0.55);
  --nav-bg: rgba(11, 14, 26, 0.72);
  --input-bg: rgba(11, 14, 26, 0.7);
  --ink: #F1F5F9;
  --ink2: #94A3B8;
  --ink3: #7C889A; /* was #64748B — 4.0:1, below AA; now 5.35:1 on bg, 4.94 on surface (design review 2026-09-14) */
  --line: #FFFFFF;
  --accent: #10D9A0;
  --accent-hov: #3BE3B4;
  --on-accent: #0B0E1A;
  --ok: #4ADE80;
  --warn: #FBBF24;
  --err: #F87171;
  --shadow-c: rgba(0, 0, 0, 0.5);
  --scrim: rgba(11, 14, 26, 0.55); /* drawer backdrop (phone console) */
  --code-bg: rgba(0, 0, 0, 0.45);
  --code-ink: rgba(241, 245, 249, 0.9);

  color-scheme: dark;
}

/* The landing page sits on a deeper black in the dark seam. */
body.landing { --bg: #060812; }

/* Light seam keys off html[data-seam] (single pre-paint source of truth;
   seam-bug fix 2026-08-21 — the head script sets it before first paint,
   seam_controller writes the same attribute). body.ft-light kept as an
   alias during the transition so nothing regresses if it reappears. */
html[data-seam="light"] body,
body.ft-light {
  --bg: #F6F5FB;
  --surface: #FFFFFF;
  /* Was #ECECF1 — a cool neutral that read grubby against the
     lavender --bg (handoff 2 §3, approved 2026-08-22). */
  --band: oklch(0.945 0.012 300);
  --nav-bg: rgba(255, 255, 255, 0.8);
  --input-bg: #FFFFFF;
  --ink: #191B1F;
  --ink2: #606267; /* was #6E7076 (4.57:1) — one step darker so the ladder keeps three AA steps */
  --ink3: #6E7076; /* was #9A9CA3 — 2.5:1, far below AA; now 4.57:1 on paper (design review 2026-09-14) */
  --line: #191B1F;
  --accent: #0F766E;
  --accent-hov: #14957F;
  --on-accent: #FFFFFF;
  --ok: #15803D;
  --warn: #D97706;
  --err: #DC2626;
  --shadow-c: rgba(25, 27, 31, 0.15);
  --scrim: rgba(25, 27, 31, 0.45);
  /* code blocks intentionally stay dark in the light seam */
  --code-bg: #0F1D1B;
  --code-ink: rgba(255, 255, 255, 0.88);

  color-scheme: light;
}

/* Landing, light seam (SETTLED 2026-08-21, DECISIONS.md): was #FFFFFF,
   which read clinical against the emerald/teal accents. Faint lavender
   at the same lightness — a cast, not a colour; ties to the #F6F5FB
   violet on the other light-seam pages. --surface stays #FFFFFF. */
html[data-seam="light"] body.landing,
body.ft-light.landing {
  --bg: oklch(0.982 0.009 300);
  --band: oklch(0.952 0.012 300);
}

/* Derived tints shared across components (color-mix, no rgba twins). */
body {
  --line-4: color-mix(in srgb, var(--line) 4%, transparent);
  --line-8: color-mix(in srgb, var(--line) 8%, transparent);
  --line-10: color-mix(in srgb, var(--line) 10%, transparent);
  --line-18: color-mix(in srgb, var(--line) 18%, transparent);
  --accent-08: color-mix(in srgb, var(--accent) 8%, transparent);
  --accent-14: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-35: color-mix(in srgb, var(--accent) 35%, transparent);

  /* Shape scale (design review 2026-09-14; shape rules shared with the
     sibling, colours ours). Type steps by ROLE — every font-size in the app
     stylesheets routes through one of these; public display sizes
     (hero, section titles, prices) keep their clamp() values. */
  --fs-micro: 0.6875rem;   /* 11px — table heads, tiny caps labels */
  --fs-label: 0.75rem;     /* 12px — quiet caps card labels, chips */
  --fs-meta: 0.8125rem;    /* 13px — context lines, notes, help text */
  --fs-table: 0.875rem;    /* 14px — table cells, controls, links */
  --fs-card: 0.9375rem;    /* 15px — card titles, body in cards */
  --fs-body: 1rem;         /* 16px — body */
  --fs-section: 1.1875rem; /* 19px — section titles */
  --fs-mast: 1.75rem;      /* 28px — page masthead, stat values */
  /* Radii: app card 14, public card 24, controls 12, pills 999. */
  --r-card: 14px;
  --r-card-public: 24px;
  --r-control: 12px;
  --r-pill: 999px;
  /* Spacing steps: 10 inside, 16 between cards, 20 head → content. */
  --sp-1: 0.625rem;
  --sp-2: 1rem;
  --sp-3: 1.25rem;
  /* One control height for input / select / textarea / button. */
  --control-h: 2.25rem;
  --font-display: "Cabinet Grotesk", ui-sans-serif, "Helvetica Neue", sans-serif;
  --font-body: "Satoshi", ui-sans-serif, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

/* Compact boundary (one, at 860px): touch-size controls. */
@media (max-width: 860px) { body { --control-h: 2.75rem; } }