/* ═══════════════════════════════════════════════════════════════════════
   SARVIS DILIGENCE — DESIGN TOKENS (single brand standard)
   The one source of truth for visual style. Linked by every page.
   Two layers: value-anchored primitives, then semantic aliases.
   Use the SEMANTIC tokens (--ink, --text-muted, --border, --accent) in new
   code — never raw hex/px. Full spec + component rules: ../STYLE.md
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ═══ PROTOTYPE: "on-brand + financial-forward" palette (2026-05-22) ═══
     Primitive NAMES are legacy (navy/green/red/amber/teal); their VALUES are
     the proposed brand mapping below. If approved, rename in a follow-up pass.
       navy  → Teal / Tidepool (primary accent)
       green → Emerald (gains/success)
       red   → Brick (loss/danger)
       amber → Gold (warning/premium)
       teal  → Clay (partner/rare emphasis)  */

  /* ── Neutral ramp (faint-cool neutral gray — de-greened; pairs with teal) ── */
  --n-950: #1B1E20;  --n-800: #2C3032;  --n-700: #41464A;
  --n-600: #565C5F;  --n-550: #646A6D;  --n-500: #727A7D;
  --n-450: #868D90;  --n-400: #9AA1A3;  --n-350: #B0B6B8;
  --n-300: #C5CACC;  --n-250: #D7DBDC;  --n-200: #E2E5E6;
  --n-150: #EDEFF0;  --n-100: #F2F4F5;  --n-75:  #FCFDFE;
  --n-50:  #FDFEFE;  --n-0:   #FFFFFF;

  /* ── Brand hues (financial-forward) ── */
  --navy-600: #1C3D3B; --navy-500: #2E5D5A; --navy-400: #4A7370;   /* Teal / Tidepool */
  --navy-200: #C2D4D0; --navy-100: #E4ECEA;
  --green-600: #0F3D2E; --green-500: #1F7A5C;                       /* Emerald */
  --green-200: #BCDFD0; --green-100: #E6F2EC;
  --red-600: #6E261E; --red-500: #B5483B;                           /* Brick */
  --red-200: #EAC4BD; --red-100: #FBEAE7;
  --amber-700: #5E4514; --amber-500: #B0852E;                       /* Gold */
  --amber-200: #E6D2A0; --amber-100: #F7EFDC;
  --teal-600: #7A3B27; --teal-500: #C46A4A;                         /* Clay (partner) */
  --teal-200: #E6C3B3; --teal-100: #F6E7E0;

  /* ── Semantic: text ── */
  --ink: var(--n-950);
  --text-strong: var(--n-700);
  --text-secondary: var(--n-600);
  --text-muted: var(--n-500);
  --text-subtle: var(--n-450);
  --text-faint: var(--n-400);
  --text-disabled: var(--n-350);
  --text-placeholder: var(--n-300);

  /* ── Semantic: surfaces ── */
  --surface: var(--n-75);
  --surface-raised: var(--n-0);
  --surface-sunken: var(--n-100);
  --surface-alt: var(--n-50);

  /* ── Semantic: borders ── */
  --border-strong: var(--n-250);
  --border: var(--n-200);
  --border-faint: var(--n-150);

  /* ── Semantic: accent + status ── */
  --accent: var(--navy-500);
  --accent-strong: var(--navy-600);
  --accent-bg: var(--navy-100);
  --accent-border: var(--navy-200);
  --success: var(--green-500);
  --success-bg: var(--green-100);
  --success-border: var(--green-200);
  --danger: var(--red-500);
  --danger-bg: var(--red-100);
  --danger-border: var(--red-200);
  --warning: var(--amber-500);
  --warning-bg: var(--amber-100);
  --warning-border: var(--amber-200);
  --partner: var(--teal-500);
  --partner-bg: var(--teal-100);

  /* ── Radii ── */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px;
  --r-pill: 999px; --r-circle: 50%;

  /* ── Type scale ── */
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px;
  --fs-md: 14px; --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 28px;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ── Spacing ── */
  --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px;
  --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px;

  /* ── Elevation + effects ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.18);
  --focus-ring: 0 0 0 3px rgba(53,77,104,0.1);

  /* ── Motion ── */
  --t-fast: 0.12s; --t-base: 0.15s; --t-slow: 0.2s;
}