/* Theme variables — loaded outside Tailwind pipeline so class-based switching works */

/* Light mode (default) */
:root {
  /* Invert slate scale so dark-themed Tailwind classes read correctly on light bg.
     400-900 shifted one step darker so text-slate-500/600 stay readable on white. */
  --color-slate-50: #020617;
  --color-slate-100: #0f172a;
  --color-slate-200: #1e293b;
  --color-slate-300: #334155;
  --color-slate-400: #475569;
  --color-slate-500: #64748b;
  --color-slate-600: #64748b;
  --color-slate-700: #cbd5e1;
  --color-slate-800: #e2e8f0;
  --color-slate-900: #f1f5f9;
  --color-slate-950: #f8fafc;
  /* Invert gray scale too — same one-step shift for readability */
  --color-gray-50: #030712;
  --color-gray-100: #111827;
  --color-gray-200: #1f2937;
  --color-gray-300: #374151;
  --color-gray-400: #4b5563;
  --color-gray-500: #6b7280;
  --color-gray-600: #9ca3af;
  --color-gray-700: #d1d5db;
  --color-gray-800: #e5e7eb;
  --color-gray-900: #f3f4f6;
  --color-gray-950: #f9fafb;
  /* Override blue scale → Light Blue (Tailwind sky) so the brand reads
     "QuickBooks-style clean light theme" but with sky instead of green.
     All blue-* Tailwind classes resolve to this scale. */
  --color-blue-50: #f0f9ff;
  --color-blue-100: #e0f2fe;
  --color-blue-200: #bae6fd;
  --color-blue-300: #7dd3fc;
  --color-blue-400: #38bdf8;
  --color-blue-500: #0ea5e9;
  --color-blue-600: #0273ad; /* sky, nudged darker: 5.2:1 with white text (was #0284c7 at 4.1) */
  --color-blue-700: #0369a1;
  --color-blue-800: #075985;
  --color-blue-900: #0c4a6e;
  --color-blue-950: #082f49;
  /* Light theme — sky-blue primary (sampled from logo), clean whites */
  --header-bg: rgba(255,255,255,0.97);
  --header-text: #1a1a1a;
  --bg-base: #f2f4f7;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f8fa;
  --bg-input: #ffffff;
  --border-subtle: #d4d7dc;
  --border-active: rgba(14,165,233,0.5);
  --text-primary: #1a1a1a;
  --text-secondary: #4c4f54;
  --text-muted: #6b6c72;
  --brand: #0ea5e9;
  --brand-glow: rgba(14,165,233,0.12);
  --success: #108a00;
  --danger: #d13b2e;
  --warning: #bf7900;
  /* Financial KPI accents — darker shades on white for AA contrast.
     Pair with --kpi-*-glow for theme-aware textShadow. */
  --kpi-quote: #0d9488;     /* teal */
  --kpi-quote-glow: rgba(13,148,136,0.18);
  --kpi-actual: #ea580c;    /* orange */
  --kpi-actual-glow: rgba(234,88,12,0.18);
  --kpi-profit: #059669;    /* emerald */
  --kpi-profit-glow: rgba(5,150,105,0.18);

  --background: #f2f4f7;
  --foreground: #1a1a1a;
  --card: #ffffff;
  --card-foreground: #1a1a1a;
  --popover: #ffffff;
  --popover-foreground: #1a1a1a;
  --primary: #0ea5e9;
  --primary-foreground: #ffffff;
  --secondary: #f0f1f2;
  --secondary-foreground: #393a3d;
  --muted: #f0f1f2;
  --muted-foreground: #6b6c72;
  --accent: rgba(14,165,233,0.08);
  --accent-foreground: #0284c7;
  --destructive: #d13b2e;
  --border: #d4d7dc;
  --input: #ffffff;
  --ring: rgba(14,165,233,0.4);
  --chart-1: #0ea5e9;
  --chart-2: #10b981;
  --chart-3: #d13b2e;
  --chart-4: #8138e8;
  --chart-5: #bf7900;
  --sidebar: #393a3d;
  --sidebar-foreground: #d4d7dc;
  --sidebar-primary: #0ea5e9;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: rgba(14,165,233,0.15);
  --sidebar-accent-foreground: #7dd3fc;
  --sidebar-border: rgba(255,255,255,0.08);
  --sidebar-ring: rgba(14,165,233,0.4);

  /* ── Accent palettes: darken the pastel steps for light mode ──
     The app's badges/labels were written for dark mode using the
     200/300/400 steps (text-emerald-300, text-cyan-400, …) — pastels
     that are nearly invisible on white. Same trick as the slate/gray
     inversion above: remap those steps to the readable 600/700
     shades of the SAME hue. ~1,800 usages fixed in one place; the
     .dark block restores the originals. (500+ steps are untouched —
     they're already readable on white.) */
  --color-emerald-200: #047857; --color-emerald-300: #047857; --color-emerald-400: #047857;
  --color-emerald-600: #047857; /* default #059669 is only 3.8:1 as text on white */
  --color-amber-200: #92400e;   --color-amber-300: #92400e;   --color-amber-400: #92400e;
  --color-cyan-200: #0e7490;    --color-cyan-300: #0e7490;    --color-cyan-400: #0e7490;
  --color-sky-200: #0369a1;     --color-sky-300: #0369a1;     --color-sky-400: #0369a1;
  --color-violet-200: #6d28d9;  --color-violet-300: #6d28d9;  --color-violet-400: #6d28d9;
  --color-teal-200: #0f766e;    --color-teal-300: #0f766e;    --color-teal-400: #0f766e;
  --color-rose-200: #be123c;    --color-rose-300: #be123c;    --color-rose-400: #be123c;
  --color-red-200: #b91c1c;     --color-red-300: #b91c1c;     --color-red-400: #b91c1c;
  --color-orange-200: #9a3412;  --color-orange-300: #9a3412;  --color-orange-400: #9a3412;
  --color-purple-200: #7e22ce;  --color-purple-300: #7e22ce;  --color-purple-400: #7e22ce;
  --color-indigo-200: #4338ca;  --color-indigo-300: #4338ca;  --color-indigo-400: #4338ca;
  --color-pink-200: #be185d;    --color-pink-300: #be185d;    --color-pink-400: #be185d;
  --color-green-200: #15803d;   --color-green-300: #15803d;   --color-green-400: #15803d;
  --color-yellow-200: #854d0e;  --color-yellow-300: #854d0e;  --color-yellow-400: #854d0e;
  --color-lime-200: #3f6212;    --color-lime-300: #3f6212;    --color-lime-400: #3f6212;
  /* red-500: default #ef4444 sits at 3.76:1 on white — one notch darker
     clears AA; the translucent bg-red-500/xx washes barely shift. */
  --color-red-500: #dc2626;
  /* blue maps to the sky ramp app-wide (see scale override above) —
     darken its pastel steps within that ramp too. */
  --color-blue-200: #0369a1;    --color-blue-300: #0369a1;    --color-blue-400: #0369a1;
}

/* Dark mode — applied when next-themes sets class="dark" on <html> */
.dark {
  /* Restore original slate scale for dark mode */
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #8494a9;
  --color-slate-600: #74839a; /* 4.6:1 on card (was 3.7) */
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  /* Restore original gray scale */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: #030712;
  --header-bg: rgba(10,15,30,0.95);
  --header-text: #f1f5f9;
  --bg-base: #0a0f1e;
  --bg-card: #111827;
  --bg-card-hover: #1a2236;
  --bg-input: #1a2236;
  --border-subtle: rgba(255,255,255,0.12);
  --border-active: rgba(14,165,233,0.6);
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #74839a;
  /* Light-blue brand — sky-400 reads bright on dark bg, matches light-mode identity */
  --brand: #38bdf8;
  --brand-glow: rgba(56,189,248,0.25);
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f97316;
  /* Financial KPI accents — bright glowing shades on dark bg */
  --kpi-quote: #2dd4bf;     /* teal */
  --kpi-quote-glow: rgba(45,212,191,0.6);
  --kpi-actual: #fb923c;    /* orange */
  --kpi-actual-glow: rgba(251,146,60,0.6);
  --kpi-profit: #34d399;    /* emerald */
  --kpi-profit-glow: rgba(52,211,153,0.6);

  --background: #0a0f1e;
  --foreground: #f1f5f9;
  --card: #111827;
  --card-foreground: #f1f5f9;
  --popover: #1a2236;
  --popover-foreground: #f1f5f9;
  --primary: #38bdf8;
  --primary-foreground: #0a0f1e;
  --secondary: rgba(255,255,255,0.06);
  --secondary-foreground: #cbd5e1;
  --muted: rgba(255,255,255,0.04);
  --muted-foreground: #94a3b8;
  --accent: rgba(56,189,248,0.15);
  --accent-foreground: #7dd3fc;
  --destructive: #ef4444;
  --border: rgba(255,255,255,0.08);
  --input: #1a2236;
  --ring: rgba(56,189,248,0.5);
  --chart-1: #38bdf8;
  --chart-2: #10b981;
  --chart-3: #f97316;
  --chart-4: #a78bfa;
  --chart-5: #ef4444;
  --sidebar: #0d1117;
  --sidebar-foreground: #94a3b8;
  --sidebar-primary: #38bdf8;
  --sidebar-primary-foreground: #0a0f1e;
  --sidebar-accent: rgba(56,189,248,0.15);
  --sidebar-accent-foreground: #7dd3fc;
  --sidebar-border: rgba(255,255,255,0.06);
  --sidebar-ring: rgba(56,189,248,0.5);

  /* Restore the original pastel accent steps for dark mode */
  --color-emerald-200: #a7f3d0; --color-emerald-300: #6ee7b9; --color-emerald-400: #34d399;
  --color-amber-200: #fde68a;   --color-amber-300: #fcd34d;   --color-amber-400: #fbbf24;
  --color-cyan-200: #a5f3fc;    --color-cyan-300: #67e8f9;    --color-cyan-400: #22d3ee;
  --color-sky-200: #bae6fd;     --color-sky-300: #7dd3fc;     --color-sky-400: #38bdf8;
  --color-violet-200: #ddd6fe;  --color-violet-300: #c4b5fd;  --color-violet-400: #a78bfa;
  --color-teal-200: #99f6e4;    --color-teal-300: #5eead4;    --color-teal-400: #2dd4bf;
  --color-rose-200: #fecdd3;    --color-rose-300: #fda4af;    --color-rose-400: #fb7185;
  --color-red-200: #fecaca;     --color-red-300: #fca5a5;     --color-red-400: #f87171;
  --color-orange-200: #fed7aa;  --color-orange-300: #fdba74;  --color-orange-400: #fb923c;
  --color-purple-200: #e9d5ff;  --color-purple-300: #d8b4fe;  --color-purple-400: #c084fc;
  --color-indigo-200: #c7d2fe;  --color-indigo-300: #a5b4fc;  --color-indigo-400: #818cf8;
  --color-pink-200: #fbcfe8;    --color-pink-300: #f9a8d4;    --color-pink-400: #f472b6;
  --color-green-200: #bbf7d0;   --color-green-300: #86efac;   --color-green-400: #4ade80;
  --color-yellow-200: #fef08a;  --color-yellow-300: #fde047;  --color-yellow-400: #facc15;
  --color-lime-200: #d9f99d;    --color-lime-300: #bef264;    --color-lime-400: #a3e635;
  /* blue rides the sky ramp in dark mode too */
  --color-blue-200: #bae6fd;    --color-blue-300: #7dd3fc;    --color-blue-400: #38bdf8;
}