/* ==========================================================================
   FTA Design Tokens — "Ledger" design system, production palette of the
   Fund Trail Analyzer: navy (#1F3D75) primary, green header bands, white surfaces.
   Single source of truth for color, type, spacing, radius, elevation.
   Light palette only.
   ========================================================================== */

:root {
  /* ---------- Typography ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fs-display: 36px;  --lh-display: 44px;
  --fs-h1: 28px;       --lh-h1: 36px;
  --fs-h2: 22px;       --lh-h2: 30px;
  --fs-h3: 18px;       --lh-h3: 26px;
  --fs-h4: 15px;       --lh-h4: 22px;
  --fs-body-lg: 16px;  --lh-body-lg: 26px;
  --fs-body: 14px;     --lh-body: 22px;
  --fs-body-sm: 13px;  --lh-body-sm: 20px;
  --fs-caption: 12px;  --lh-caption: 16px;
  --fs-overline: 11px;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ---------- Radius ---------- */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;

  /* ---------- Raw scales ---------- */
  --blue-50: #EEF3FF; --blue-100: #DCE6FF; --blue-200: #BCCDFE; --blue-300: #8EA8FF;
  --blue-500: #3461E8; --blue-600: #1F3D75; --blue-700: #18305C; --blue-800: #18348A;
  --teal-50: #E8F6F4; --teal-600: #0E7C72; --teal-700: #0B645C;
  --n-0: #FFFFFF; --n-25: #FBFBFD; --n-50: #F5F6F9; --n-100: #EDEFF4; --n-200: #E1E4EB;
  --n-300: #CAD0DA; --n-400: #99A2B2; --n-500: #6A7488; --n-600: #4A5366; --n-700: #333B4C;
  --n-800: #1E2432; --n-900: #121826; --n-950: #0A0E18;

  /* ---------- Semantic roles (light) ---------- */
  --bg: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-25);          /* subtle panels, table header */
  --surface-3: var(--n-100);         /* wells, skeleton base */
  --surface-inverse: var(--n-900);
  --sidebar-bg: var(--n-25);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: var(--n-900);
  --text-2: var(--n-600);
  --text-3: var(--n-500);
  --text-disabled: var(--n-400);
  --text-inverse: var(--n-0);

  --primary: var(--blue-600);
  --primary-hover: var(--blue-700);
  --primary-ink: var(--blue-600);    /* primary used as text/icon */
  --primary-soft: var(--blue-50);
  --primary-soft-2: var(--blue-100);
  --on-primary: #FFFFFF;

  --secondary: var(--teal-600);
  --secondary-soft: var(--teal-50);
  --secondary-ink: var(--teal-700);

  --success: #15803D;  --success-soft: #EAF6EE; --success-ink: #166534;
  --warning: #B45309;  --warning-soft: #FDF3E4; --warning-ink: #92400E;
  --error:   #C8322F;  --error-soft:   #FCEDEC; --error-ink:   #A32622;
  --info:    #0369A1;  --info-soft:    #E8F3FA; --info-ink:    #075985;

  --th-bg: #dcf3e4; --th-ink: #2b623e; /* table header band (green, as in FTA) */
  --kpi-ico: #1F3D75;                   /* KPI card icons: the sidebar navy */

  --credit-ink: #15803D;    /* Cr amounts */
  --debit-ink: var(--n-900);/* Dr amounts stay neutral: red is reserved for errors */

  --focus: 0 0 0 3px rgba(31, 61, 117, .28);
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, .22), 0 4px 10px -4px rgba(16, 24, 40, .08);
  --scrim: rgba(10, 14, 24, .42);

  /* ---------- Data-viz (validated reference slots 1-3, 8) ---------- */
  --series-1: #2a78d6;  /* blue   — Middle node / Credit bars */
  --series-2: #eb6834;  /* orange — End node / Debit bars */
  --series-3: #1baf7a;  /* aqua   — Start node */
  --series-8: #e34948;  /* red    — Bidirectional edge (always dashed + ↔) */
  --grid: #E6E8EE;
  --axis: #C3C8D2;
  --edge: #A7AFBD;
  --seq-0: #F1F4F9;
  --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec; --seq-4: #3987e5;
  --seq-5: #256abf; --seq-6: #184f95; --seq-7: #0d366b;
  --seq-ink-light: var(--n-900); --seq-ink-dark: #FFFFFF;

  color-scheme: light;
}