/* GENERATED from shared/caa-theme/tokens.css by scripts/sync-shared.mjs — do not edit here. */
/* ============================================================
   CAA shared theme — ONE look for both apps.
   The audit dashboard (app/) is the reference; the sales pipeline
   (capital-sales-pipeline/app/) aliases its own variables to these.

   Edit ONLY this file, then run `node scripts/sync-shared.mjs`; the
   apps load the generated copies (css/caa-theme.css), linked BEFORE
   each app's own stylesheets.

   Both apps theme through <html data-theme="light|dark">. Light is the
   default (`:root` carries the light values); dark is [data-theme="dark"].

   Pipeline design rules hold here too: no gradients, glows or washes in
   this file — flat values only.
   ============================================================ */

:root {
  /* Spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Radii */
  --r-1: 3px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-pill: 999px;
  /* Primary (solid red) buttons — "Ask CAA Bot", Save, Sign in… — one radius in both apps. */
  --r-btn: 9px;

  /* Type — Inter for everything, JetBrains Mono for code */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px;
  --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px;
  --lh-tight: 1.2; --lh-normal: 1.45;

  /* Small labels (KPI titles, table headers, nav group labels): sentence case
     in both apps — never UPPERCASE with tracking. */
  --label-size: 12px; --label-weight: 600;
  --th-size: 12px;    --th-weight: 600;

  /* Brand */
  --brand-red: #c8102e;
  --brand-red-soft: #e63946;
  --brand-amber: var(--brand-red);
  --brand-amber-soft: var(--brand-red-soft);

  /* Easing + duration */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
}

/* ===== LIGHT theme (default) ===== */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg-0: #f1f4fa;                    /* App background (subtle cool tint, not pure white) */
  --bg-1: #ffffff;                    /* Cards / panels */
  --bg-2: #f7f9fd;                    /* Subtle nested surfaces (table headers, etc.) */
  --bg-3: #eaeef7;                    /* Resting hover */
  --bg-hover: #eef2fa;                /* Interactive hover */
  --bg-active: #e2e8f4;
  --bg-sidebar: #ffffff;

  /* Borders */
  --border-1: #e3e8f1;
  --border-2: #c8d1e0;
  --border-3: #a8b4c8;
  --border-strong: #5b6678;

  /* Text */
  --text-1: #0f172a;                  /* Primary */
  --text-2: #45526b;
  --text-3: #6b7790;
  --text-mute: #6b7790;   /* was #97a1b3 = 2.6:1 — failed AA; this is 4.3:1 */

  /* Accents */
  --accent: #2563eb;                  /* Interactive blue */
  --accent-soft: #dbe7ff;
  --accent-text: #1d3a8a;
  --accent-hover: #1d4ed8;

  --success: #047857;
  --success-soft: #d1fae5;
  --success-bg: #ecfdf5;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --warning-bg: #fffbeb;
  --danger: #b91c1c;
  --danger-soft: #fee2e2;
  --danger-bg: #fef2f2;
  --info: #0369a1;
  --info-soft: #e0f2fe;
  --info-bg: #f0f9ff;

  --brand-red-bg: #fef2f4;

  /* Shadows — layered, soft. */
  --shadow-1: 0 1px 1px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-3: 0 4px 8px rgba(15, 23, 42, 0.06), 0 12px 24px rgba(15, 23, 42, 0.10);
  --shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);

  --ring-brand: 0 0 0 3px color-mix(in srgb, var(--brand-red) 22%, transparent);
}

/* ===== DARK theme ===== */
[data-theme="dark"] {
  --bg-0: #0a1020;
  --bg-1: #111a2e;
  --bg-2: #16223a;
  --bg-3: #1d2c48;
  --bg-hover: #1a2640;
  --bg-active: #233358;
  --bg-sidebar: #0e1626;

  --border-1: #1f2c48;
  --border-2: #2c3d63;
  --border-3: #3a5081;
  --border-strong: #4c6699;

  --text-1: #e8edf6;
  --text-2: #aab4c8;
  --text-3: #7b8aa6;
  --text-mute: #8494b0;   /* was #5a6987 = 2.9:1 on dark — this is 4.6:1 */

  --accent: #5b9aff;
  --accent-soft: #1f3a6b;
  --accent-text: #cfe1ff;
  --accent-hover: #7caeff;

  --success: #34d399;
  --success-soft: #103627;
  --success-bg: #0d2a1f;
  --warning: #fbbf24;
  --warning-soft: #3a2a08;
  --warning-bg: #2a1f06;
  --danger: #f87171;
  --danger-soft: #3d1414;
  --danger-bg: #2a0e0e;
  --info: #38bdf8;
  --info-soft: #082f3e;
  --info-bg: #061f2c;

  --brand-red-bg: #2a0e13;

  --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  --ring-brand: 0 0 0 3px color-mix(in srgb, var(--brand-red) 35%, transparent);
}