/* ============================================================
   BlueHook Design System — TOKENS (single source of truth)
   Loaded FIRST, on every surface (console templates + injected shell),
   so the console, the shell chrome, and every custom page read one
   palette, one type scale, one spacing/radius/shadow/motion system,
   and one dark theme. Consumed by bh-components.css, bh-chrome.css,
   bluehook.css (overrides) and the custom pages.

   Values below are the established BlueHook console palette (kept
   identical so the console renders unchanged); the type / spacing /
   z-index scales are NEW and additive (nothing consumes them yet).
   ============================================================ */
/* Reserve the scrollbar gutter so the fixed topbar (centered search + user
   menu) doesn't shift left/right as pages with and without a scrollbar load. */
html { scrollbar-gutter: stable; }

:root {
    /* --- Brand ------------------------------------------------ */
    --bh-primary: #2563EB;
    --bh-primary-hover: #1D4ED8;
    --bh-primary-grad: linear-gradient(180deg, #3B74F1 0%, #2563EB 100%);
    --bh-primary-grad-hover: linear-gradient(180deg, #2f68e8 0%, #1D4ED8 100%);
    --bh-primary-light: rgba(37, 99, 235, 0.08);
    --bh-primary-glow: rgba(37, 99, 235, 0.16);
    --bh-primary-weak: #EEF3FE;
    --bh-primary-line: #C9DAFB;
    --bh-navy: #0B1524;
    --bh-navy-light: rgba(11, 21, 36, 0.05);
    --bh-accent: #38BDF8;
    --bh-accent-hover: #0EA5E9;

    /* --- Semantic status ------------------------------------- */
    --bh-success: #15803D;
    --bh-success-light: rgba(21, 128, 61, 0.10);
    --bh-warning: #B45309;
    --bh-warning-light: rgba(180, 83, 9, 0.12);
    --bh-danger: #D0342C;
    --bh-danger-light: rgba(208, 52, 44, 0.10);
    --bh-info: #2563EB;
    --bh-info-light: rgba(37, 99, 235, 0.10);

    /* --- Surfaces (cool slate) ------------------------------- */
    --bh-bg-body: #F6F8FC;
    --bh-bg-sidebar: #0B1524;
    --bh-bg-topbar: #FFFFFF;
    --bh-bg-card: #FFFFFF;
    --bh-bg-card-hover: #FBFCFE;
    --bh-bg-input: #FFFFFF;
    --bh-bg-elevated: #F1F5FB;
    --bh-bg-modal: #FFFFFF;
    --bh-bg-table-row: #FFFFFF;
    --bh-bg-table-stripe: #FBFCFE;
    --bh-bg-table-hover: #F5F8FF;

    /* --- Navy rail ------------------------------------------- */
    --bh-nav-bg: #0B1524;
    --bh-nav-2: #0F1D33;
    --bh-nav-line: #1E2E49;
    --bh-nav-text: #AEBBD1;
    --bh-nav-faint: #6C7C99;
    --bh-nav-hover: #0F1D33;

    /* --- Borders --------------------------------------------- */
    --bh-border: #E4E9F2;
    --bh-border-light: #EEF2F8;
    --bh-border-strong: #D4DBE8;
    --bh-border-focus: var(--bh-primary);

    /* --- Text ------------------------------------------------ */
    --bh-text: #0E1A2B;
    --bh-text-secondary: #25324A;
    --bh-text-muted: #5D6B84;
    --bh-text-faint: #8794AB;
    --bh-text-inverse: #FFFFFF;

    /* --- Shadows --------------------------------------------- */
    --bh-shadow-sm: 0 1px 2px rgba(14, 26, 43, 0.06);
    --bh-shadow: 0 1px 3px rgba(14, 26, 43, 0.07), 0 6px 16px -4px rgba(14, 26, 43, 0.09);
    --bh-shadow-lg: 0 14px 44px -8px rgba(14, 26, 43, 0.22), 0 4px 12px -4px rgba(14, 26, 43, 0.10);
    --bh-shadow-card: 0 1px 2px rgba(14, 26, 43, 0.04), 0 4px 14px -6px rgba(14, 26, 43, 0.08);
    --bh-shadow-focus: 0 0 0 3px var(--bh-primary-glow);
    --bh-ring: 0 0 0 1px var(--bh-border);

    /* --- Layout sizing --------------------------------------- */
    --bh-sidebar-width: 250px;
    --bh-sidebar-collapsed: 66px;
    --bh-topbar-height: 58px;

    /* --- Radius scale ---------------------------------------- */
    --bh-radius: 10px;
    --bh-radius-sm: 7px;
    --bh-radius-lg: 14px;
    --bh-radius-xl: 18px;
    --bh-radius-pill: 999px;

    /* --- Typography ------------------------------------------ */
    --bh-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bh-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --bh-font-heading: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Type scale (NEW — additive). Fluid-ish, modern-SaaS rhythm. */
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;
    --fs-display: 38px;
    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-normal: 1.55;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --ls-tight: -0.02em;
    --ls-wide: 0.04em;
    --ls-caps: 0.08em;

    /* Semantic heading sizes (NEW — additive). */
    --h1: 24px;
    --h2: 19px;
    --h3: 16px;
    --h4: 14px;

    /* --- Spacing scale (NEW — additive, 4px base) ------------ */
    --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;
    --sp-16: 64px;

    /* --- Z-index scale (NEW — additive) ---------------------- */
    --z-base: 1;
    --z-rail: 60;
    --z-topbar: 50;
    --z-dropdown: 55;
    --z-drawer: 70;
    --z-modal: 80;
    --z-toast: 90;
    --z-tooltip: 100;

    /* --- Motion ---------------------------------------------- */
    --bh-transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --bh-transition-slow: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    --bh-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --bh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* --- Chart palette (NEW — themeable, consumed by bh-charts.js) --- */
    --bh-chart-1: #2563EB;
    --bh-chart-2: #38BDF8;
    --bh-chart-3: #15803D;
    --bh-chart-4: #B45309;
    --bh-chart-5: #D0342C;
    --bh-chart-6: #7C3AED;
    --bh-chart-grid: #EEF2F8;
    --bh-chart-axis: #8794AB;
}

/* ============================================================
   Dark Mode — variable overrides. One mechanism for the WHOLE
   product: every surface adds `.bh-app` to <body> (the console via
   base.html, custom pages via bh-shell.js), and the topbar toggle
   adds/removes `.dark-mode`. Overriding the tokens here flips the
   entire app — console + shell + custom pages — in one place.
   ============================================================ */
body.bh-app.dark-mode {
    --bh-primary: #4d94ff;
    --bh-primary-hover: #2f7df5;
    --bh-primary-light: rgba(77, 148, 255, 0.14);
    --bh-primary-glow: rgba(77, 148, 255, 0.30);
    --bh-primary-weak: #17233b;
    --bh-primary-line: #274063;

    --bh-success: #10b981;
    --bh-success-light: rgba(16, 185, 129, 0.12);
    --bh-warning: #f59e0b;
    --bh-warning-light: rgba(245, 158, 11, 0.12);
    --bh-danger: #ef4444;
    --bh-danger-light: rgba(239, 68, 68, 0.12);
    --bh-info: #06b6d4;
    --bh-info-light: rgba(6, 182, 212, 0.12);

    --bh-bg-body: #0f1117;
    --bh-bg-sidebar: #0d0f14;
    --bh-bg-topbar: #111318;
    --bh-bg-card: #161923;
    --bh-bg-card-hover: #1c1f2e;
    --bh-bg-input: #1a1d2a;
    --bh-bg-elevated: #1e2130;
    --bh-bg-modal: #161923;
    --bh-bg-table-row: #161923;
    --bh-bg-table-stripe: #1a1d28;
    --bh-bg-table-hover: #1e2235;

    --bh-border: #252836;
    --bh-border-light: #1e2130;
    --bh-border-strong: #313548;

    --bh-text: #e8eaed;
    --bh-text-secondary: #9ca3af;
    --bh-text-muted: #6b7280;
    --bh-text-faint: #5b6373;
    --bh-text-inverse: #0f1117;

    --bh-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --bh-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    --bh-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --bh-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);

    --bh-chart-grid: #252836;
    --bh-chart-axis: #6b7280;
}