/* ═══════════════════════════════════════════════════════════════════════
   AUTOBOTSIGNAL — CANONICAL DESIGN TOKENS (single origin: brand/theme/)
   App copies are write-only mirrors synced by brand/tools/sync.sh.
   NEVER hand-edit a synced copy — change this file and re-run sync.

   Contract:
   - Every component style in every app references ONLY these --abs-* vars
     (directly or via the app's Tailwind @theme mapping).
   - Dark is the default (:root). Light mode is html.light reassigning the
     same variables — no per-component overrides anywhere.
   - Theme switching is done by brand/theme/theme.js (shared cookie).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ── */
  --abs-accent: #f57b00;
  --abs-accent-light: #ff9f3d;
  --abs-accent-dark: #e06c00;
  --abs-accent-glow: #ff6a00;
  /* Orange used AS TEXT — needs more contrast on light backgrounds */
  --abs-accent-text: #f57b00;
  /* Text placed ON an orange gradient/button */
  --abs-on-accent: #0b0e15;
  /* Text sitting ON a solid status fill (e.g. a red notification-count pill).
     Status hues do not flip between themes, so these are identical in both —
     they exist so app code never has to hardcode `text-white`. */
  --abs-on-error: #ffffff;
  --abs-on-success: #06281c;
  /* Soft accent fills */
  --abs-accent-soft: rgba(245, 123, 0, 0.08);
  --abs-accent-soft-strong: rgba(245, 123, 0, 0.15);

  /* ── Background elevation ramp (deepest → most elevated) ── */
  --abs-bg-deepest: #030509;
  --abs-bg-page: #060a12;
  --abs-bg-sidebar: #080d16;
  --abs-bg-section: #0a101a;
  --abs-bg-elevated: #0d1420;
  --abs-bg-body: #050810;
  --abs-bg-card: rgba(13, 20, 32, 0.94);
  --abs-bg-card-hover: rgba(16, 24, 38, 0.96);
  --abs-bg-input: rgba(0, 0, 0, 0.35);
  --abs-bg-overlay: rgba(0, 0, 0, 0.72);

  /* ── Glass surfaces ── */
  --abs-glass: rgba(19, 24, 34, 0.92);
  --abs-glass-card: rgba(22, 28, 40, 0.94);
  --abs-glass-nav: rgba(11, 14, 21, 0.92);
  --abs-glass-panel: rgba(10, 16, 26, 0.98);

  /* ── Elevation tier surfaces (1 = lowest) ── */
  --abs-elev-1: rgba(10, 14, 20, 0.85);
  --abs-elev-2: rgba(11, 16, 24, 0.88);
  --abs-elev-3: rgba(12, 18, 28, 0.92);
  --abs-elev-4: rgba(13, 20, 32, 0.94);
  --abs-elev-5: rgba(13, 20, 32, 0.96);
  --abs-elev-6: rgba(14, 22, 36, 0.97);

  /* ── Text ramp ── */
  --abs-text-primary: #f2f6ff;
  --abs-text-secondary: #c8d0e0;
  --abs-text-muted: #8a94b0;
  --abs-text-faint: #929bb5;
  --abs-text-dim: #6b7490;
  --abs-text-hover: #c4ccde;

  /* ── Status (fills are theme-stable; *-text flips for contrast) ── */
  --abs-success: #10b981;
  --abs-success-text: #10b981;
  --abs-success-soft: rgba(16, 185, 129, 0.15);
  --abs-error: #ef4444;
  --abs-error-text: #ef4444;
  --abs-error-soft: rgba(239, 68, 68, 0.15);
  --abs-warning: #f59e0b;
  --abs-warning-text: #f59e0b;
  --abs-warning-soft: rgba(245, 158, 11, 0.15);
  --abs-info: #3b82f6;
  --abs-info-text: #3b82f6;
  --abs-info-soft: rgba(59, 130, 246, 0.15);
  --abs-violet: #8b5cf6;
  --abs-pink: #ec4899;

  /* ── Borders ── */
  --abs-border-subtle: rgba(255, 255, 255, 0.04);
  --abs-border-light: rgba(245, 123, 0, 0.06);
  --abs-border: rgba(245, 123, 0, 0.12);
  --abs-border-accent: rgba(245, 123, 0, 0.25);
  --abs-border-strong: rgba(245, 123, 0, 0.4);
  --abs-border-neutral: rgba(0, 0, 0, 0.0); /* browser default kill */
  --abs-divider: rgba(255, 255, 255, 0.04);

  /* ── Neutral interaction fills (replace bg-white/[0.0x] literals) ── */
  --abs-fill-1: rgba(255, 255, 255, 0.02);
  --abs-fill-2: rgba(255, 255, 255, 0.03);
  --abs-fill-3: rgba(255, 255, 255, 0.05);
  --abs-fill-hover: rgba(255, 255, 255, 0.04);

  /* ── Edge lighting (per-status card edges) ── */
  --abs-edge-brand: rgba(245, 123, 0, 0.35);
  --abs-edge-info: rgba(59, 130, 246, 0.3);
  --abs-edge-success: rgba(16, 185, 129, 0.3);
  --abs-edge-warning: rgba(245, 158, 11, 0.3);
  --abs-edge-error: rgba(239, 68, 68, 0.3);
  --abs-edge-neutral: rgba(245, 123, 0, 0.04);

  /* ── Grid / dot background patterns ── */
  --abs-grid-line: rgba(245, 123, 0, 0.015);
  --abs-grid-line-strong: rgba(245, 123, 0, 0.02);
  --abs-dot-pattern: rgba(245, 123, 0, 0.08);
  --abs-grid-neutral: rgba(255, 255, 255, 0.015);

  /* ── Shadows ── */
  --abs-shadow-card: 0 2px 16px rgba(0, 0, 0, 0.35);
  --abs-shadow-card-hover: 0 8px 36px rgba(245, 123, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.45);
  --abs-shadow-glow: 0 0 28px rgba(245, 123, 0, 0.5);
  --abs-shadow-glow-sm: 0 0 14px rgba(245, 123, 0, 0.25);
  --abs-shadow-glow-neon: 0 0 40px rgba(255, 106, 0, 0.35), 0 0 80px rgba(245, 123, 0, 0.12);
  --abs-shadow-btn: 0 0 20px rgba(245, 123, 0, 0.3);
  --abs-shadow-btn-hover: 0 0 30px rgba(245, 123, 0, 0.5);
  --abs-shadow-elev-1: 0 1px 4px rgba(0, 0, 0, 0.2);
  --abs-shadow-elev-2: 0 2px 10px rgba(0, 0, 0, 0.25);
  --abs-shadow-elev-3: 0 4px 18px rgba(0, 0, 0, 0.3);
  --abs-shadow-elev-4: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 2px rgba(245, 123, 0, 0.04);
  --abs-shadow-elev-5: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 4px rgba(245, 123, 0, 0.06);
  --abs-shadow-elev-6: 0 10px 36px rgba(0, 0, 0, 0.45), 0 0 8px rgba(245, 123, 0, 0.1);
  --abs-shadow-panel: -8px 0 32px rgba(0, 0, 0, 0.5), -2px 0 8px rgba(245, 123, 0, 0.04);
  --abs-text-glow: 0 0 20px rgba(245, 123, 0, 0.15);

  /* ── Signature gradients ── */
  --abs-gradient-accent: linear-gradient(135deg, #f57b00, #ff9f3d);
  --abs-gradient-title: linear-gradient(135deg, var(--abs-text-primary) 0%, var(--abs-accent-light) 100%);
  --abs-gradient-edge-brand: linear-gradient(180deg, #f57b00, #ff9f3d, #f57b00);

  /* ── Typography ──
     ONE font family across the whole product (user rule, 2026-08-01). There is
     no second face: --abs-font-mono is kept only so the ~200 existing
     `font-mono` call sites and the .code-text/.data-dense-row component classes
     keep resolving — it deliberately points at the SAME stack as --abs-font-sans.
     Do NOT reintroduce a distinct mono face here; that is what makes the app
     look like two products. Use `tabular-nums` (Plus Jakarta Sans ships the
     feature) when digits need to line up in a column. */
  --abs-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --abs-font-mono: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* ── Radii ── */
  --abs-radius-xs: 6px;
  --abs-radius-sm: 8px;
  --abs-radius-md: 12px;
  --abs-radius-lg: 16px;
  --abs-radius-xl: 20px;
  --abs-radius-2xl: 24px;
  --abs-radius-pill: 9999px;

  /* ── Spacing scale ── */
  --abs-space-1: 4px;
  --abs-space-2: 8px;
  --abs-space-3: 12px;
  --abs-space-4: 16px;
  --abs-space-5: 20px;
  --abs-space-6: 24px;
  --abs-space-8: 32px;
  --abs-space-12: 48px;
  --abs-space-16: 64px;

  /* ── Motion ── */
  --abs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --abs-duration-fast: 0.15s;
  --abs-duration: 0.2s;
  --abs-duration-slow: 0.3s;

  /* ── Scrollbar ── */
  --abs-scrollbar-thumb: #1e293b;
  --abs-scrollbar-thumb-hover: #334155;

  /* ── Charts (read at runtime via theme.js chartColors()) ── */
  --abs-chart-1: #f57b00;
  --abs-chart-2: #3b82f6;
  --abs-chart-3: #10b981;
  --abs-chart-4: #f59e0b;
  --abs-chart-5: #8b5cf6;
  --abs-chart-6: #ec4899;
  --abs-chart-candle-up: #10b981;
  --abs-chart-candle-down: #ef4444;
  --abs-chart-grid: rgba(255, 255, 255, 0.05);
  --abs-chart-axis: #8a94b0;
  --abs-chart-crosshair: rgba(245, 123, 0, 0.4);
  /* Tooltip surface for recharts/canvas overlays — flips with theme */
  --abs-chart-tooltip-bg: rgba(13, 20, 32, 0.96);
  --abs-chart-tooltip-border: rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT THEME — warm cream palette. Pure variable reassignment;
   no component may need an html.light rule of its own.
   ═══════════════════════════════════════════════════════════════════════ */
html.light {
  /* WCAG AA sweep 2026-07-21: every *-text token ≥4.5:1 on the cream
     surface ramp (worst case --abs-bg-elevated #e8e0d0). */
  --abs-accent-text: #a83a00;
  --abs-on-accent: #1e1008;
  --abs-accent-soft: rgba(245, 123, 0, 0.06);
  --abs-accent-soft-strong: rgba(245, 123, 0, 0.1);

  --abs-bg-deepest: #f5f0e8;
  --abs-bg-page: #f8f4ed;
  --abs-bg-sidebar: #f0ebe0;
  --abs-bg-section: #ebe4d5;
  --abs-bg-elevated: #e8e0d0;
  --abs-bg-body: #f8f4ed;
  --abs-bg-card: rgba(255, 252, 248, 0.94);
  --abs-bg-card-hover: rgba(245, 240, 232, 0.96);
  --abs-bg-input: #ffffff;
  --abs-bg-overlay: rgba(0, 0, 0, 0.35);

  --abs-glass: rgba(255, 255, 255, 0.85);
  --abs-glass-card: rgba(255, 255, 255, 0.9);
  --abs-glass-nav: rgba(255, 255, 255, 0.9);
  --abs-glass-panel: rgba(255, 255, 255, 0.97);

  --abs-elev-1: rgba(255, 255, 255, 0.85);
  --abs-elev-2: rgba(255, 255, 255, 0.88);
  --abs-elev-3: rgba(255, 255, 255, 0.9);
  --abs-elev-4: rgba(255, 255, 255, 0.92);
  --abs-elev-5: rgba(255, 255, 255, 0.94);
  --abs-elev-6: rgba(255, 255, 255, 0.95);

  --abs-text-primary: #1e1810;
  --abs-text-secondary: #5c4f3e;
  --abs-text-muted: #685a46;
  --abs-text-faint: #685a46;
  --abs-text-dim: #7d6e58;
  --abs-text-hover: #1e1810;

  --abs-success-text: #056b4f;
  --abs-success-soft: rgba(16, 185, 129, 0.1);
  --abs-error-text: #b91c1c;
  --abs-error-soft: rgba(239, 68, 68, 0.1);
  --abs-warning-text: #8a5c06;
  --abs-warning-soft: rgba(245, 158, 11, 0.1);
  --abs-info-text: #1d4ed8;
  --abs-info-soft: rgba(59, 130, 246, 0.1);

  --abs-border-subtle: rgba(0, 0, 0, 0.08);
  --abs-border-light: rgba(0, 0, 0, 0.1);
  --abs-border: rgba(0, 0, 0, 0.16);
  --abs-border-accent: rgba(245, 123, 0, 0.3);
  --abs-border-strong: rgba(245, 123, 0, 0.5);
  --abs-divider: rgba(0, 0, 0, 0.08);

  --abs-fill-1: rgba(0, 0, 0, 0.02);
  --abs-fill-2: rgba(0, 0, 0, 0.03);
  --abs-fill-3: rgba(0, 0, 0, 0.05);
  --abs-fill-hover: rgba(0, 0, 0, 0.04);

  --abs-edge-brand: rgba(245, 123, 0, 0.25);
  --abs-edge-info: rgba(59, 130, 246, 0.2);
  --abs-edge-success: rgba(16, 185, 129, 0.2);
  --abs-edge-warning: rgba(245, 158, 11, 0.2);
  --abs-edge-error: rgba(239, 68, 68, 0.2);
  --abs-edge-neutral: rgba(0, 0, 0, 0.06);

  --abs-grid-line: rgba(0, 0, 0, 0);
  --abs-grid-line-strong: rgba(0, 0, 0, 0.02);
  --abs-dot-pattern: rgba(245, 123, 0, 0.06);
  --abs-grid-neutral: rgba(0, 0, 0, 0.02);

  --abs-shadow-card: 0 2px 16px rgba(0, 0, 0, 0.08);
  --abs-shadow-card-hover: 0 8px 36px rgba(245, 123, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.12);
  --abs-shadow-glow: 0 0 28px rgba(245, 123, 0, 0.25);
  --abs-shadow-glow-sm: 0 0 14px rgba(245, 123, 0, 0.15);
  --abs-shadow-glow-neon: 0 0 40px rgba(255, 106, 0, 0.2), 0 0 80px rgba(245, 123, 0, 0.08);
  --abs-shadow-btn: 0 0 20px rgba(245, 123, 0, 0.2);
  --abs-shadow-btn-hover: 0 0 30px rgba(245, 123, 0, 0.35);
  --abs-shadow-elev-1: 0 1px 4px rgba(0, 0, 0, 0.06);
  --abs-shadow-elev-2: 0 2px 10px rgba(0, 0, 0, 0.08);
  --abs-shadow-elev-3: 0 4px 18px rgba(0, 0, 0, 0.1);
  --abs-shadow-elev-4: 0 6px 24px rgba(0, 0, 0, 0.12);
  --abs-shadow-elev-5: 0 8px 30px rgba(0, 0, 0, 0.14);
  --abs-shadow-elev-6: 0 10px 36px rgba(0, 0, 0, 0.16);
  --abs-shadow-panel: -8px 0 32px rgba(0, 0, 0, 0.15), -2px 0 8px rgba(245, 123, 0, 0.04);
  --abs-text-glow: none;

  --abs-gradient-title: linear-gradient(135deg, #1e1810 0%, #a83a00 100%);

  --abs-scrollbar-thumb: #d4c8b0;
  --abs-scrollbar-thumb-hover: #b8a88c;

  --abs-chart-grid: rgba(0, 0, 0, 0.06);
  --abs-chart-axis: #685a46;
  --abs-chart-tooltip-bg: rgba(255, 252, 248, 0.97);
  --abs-chart-tooltip-border: rgba(0, 0, 0, 0.1);
}