/* ─────────────────────────────────────────────────────────────────────────────
   Brand tokens v4 — "Signal orange on white" (light only; no dark primary by decision)
   White surfaces, navy ink, one orange signal, teal for savings. Orange buttons carry NAVY text (6.5:1);
   white-on-orange fails AA and is never used. Navy is the primary button; orange is the signal.
   Fonts: Instrument Sans (display), Inter (text), JetBrains Mono (code). Alternatives: /brand/themes.html
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* Signal (orange) */
  --signal-50: #FFF4EC; --signal-100: #FFE6D3; --signal-200: #FFCDA8; --signal-300: #FFAD73; --signal-400: #FB8A3E;
  --signal-500: #F26B1D; --signal-600: #D85A12; --signal-700: #B2480E; --signal-800: #87370B; --signal-900: #5C2507;
  /* Ink (navy neutrals) */
  --ink-0: #FFFFFF; --ink-25: #FAFBFC; --ink-50: #F3F5F8; --ink-100: #E6E9EF; --ink-200: #D3D8E2; --ink-300: #B3BAC8;
  --ink-400: #8B94A7; --ink-500: #626C80; --ink-600: #44506A; --ink-700: #2B3650; --ink-800: #182642; --ink-900: #0B1A33;
  /* Secondary (teal = savings) and status */
  --teal-100: #D6F3EE; --teal-500: #0E9F8E; --teal-700: #0A756A;
  --ok: #178F5A; --warn: #B7791F; --bad: #C8402B; --info: #2457F5;

  /* Semantic (light) */
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: var(--ink-50); --line: var(--ink-100); --line-strong: var(--ink-200);
  --fg: var(--ink-900); --fg-2: var(--ink-600); --fg-3: var(--ink-400);
  --brand: var(--signal-500); --brand-hover: var(--signal-600); --brand-soft: var(--signal-50); --brand-ink: var(--ink-900); --on-brand: #FFFFFF; --brand-text: var(--signal-700);
  --accent: var(--teal-500); --accent-soft: var(--teal-100);
  --focus: 0 0 0 3px color-mix(in srgb, var(--signal-500) 35%, transparent);
  --glow: 0 30px 80px -40px rgba(242, 107, 29, .35);

  /* Type */
  --font-display: "Instrument Sans", "Inter Tight", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 12px; --text-sm: 13.5px; --text-md: 15px; --text-lg: 17px; --text-xl: 19px;
  --display-sm: clamp(26px, 3.2vw, 34px); --display-md: clamp(34px, 4.8vw, 52px); --display-lg: clamp(42px, 6.6vw, 80px);
  --leading-tight: 1.02; --leading-snug: 1.18; --leading-body: 1.6; --tracking-display: -0.035em;

  /* Space, radius, shadow, motion */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11,26,51,.06), 0 1px 1px rgba(11,26,51,.04);
  --shadow-2: 0 10px 30px -14px rgba(11,26,51,.18), 0 2px 6px rgba(11,26,51,.05);
  --shadow-3: 0 30px 80px -30px rgba(11,26,51,.26), 0 8px 20px -10px rgba(11,26,51,.1);
  --ease: cubic-bezier(.2,.8,.2,1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 380ms;
  --container: 1180px; --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; } }