@custom-variant dark (&:is(.dark *));

:root {
  --font-size: 16px;
  --background: #f8fafc; /* Slate 50 (Light) */
  --foreground: #0f172a; /* Slate 900 */
  --card: #ffffff; /* White card */
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;
  --primary: #4f46e5; /* Indigo 600 */
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9; /* Slate 100 */
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b; /* Slate 500 */
  --accent: #e2e8f0; /* Slate 200 */
  --accent-foreground: #0f172a;
  --destructive: #e11d48; /* Rose 600 */
  --destructive-foreground: #ffffff;
  --border: #e2e8f0; /* Slate 200 */
  --input: #ffffff;
  --input-background: #ffffff;
  --switch-background: #cbd5e1;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #4f46e5;
  --chart-1: #4f46e5; /* Indigo */
  --chart-2: #10b981; /* Emerald */
  --chart-3: #f59e0b; /* Amber */
  --chart-4: #ec4899; /* Pink */
  --chart-5: #06b6d4; /* Cyan */
  --radius: 0.75rem;
}

.dark {
  --background: #0b0f19; /* Deep navy (Dark) */
  --foreground: #f8fafc; /* Slate 50 */
  --card: #151d30; /* Dark slate card */
  --card-foreground: #f8fafc;
  --popover: #151d30;
  --popover-foreground: #f8fafc;
  --primary: #6366f1; /* Neon Indigo */
  --primary-foreground: #ffffff;
  --secondary: #1e293b; /* Slate 800 */
  --secondary-foreground: #f8fafc;
  --muted: #1e293b;
  --muted-foreground: #94a3b8; /* Slate 400 */
  --accent: #312e81; /* Deep Indigo accent */
  --accent-foreground: #f8fafc;
  --destructive: #f43f5e; /* Rose 500 */
  --destructive-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.08);
  --input: #1e293b;
  --input-background: #0f172a;
  --switch-background: #334155;
  --ring: #6366f1;
  --chart-1: #6366f1;
  --chart-2: #10b981;
  --chart-3: #f59e0b;
  --chart-4: #ec4899;
  --chart-5: #06b6d4;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-input-background: var(--input-background);
  --color-switch-background: var(--switch-background);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground transition-colors duration-300;
  }

  html {
    font-size: var(--font-size);
  }

  h1 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  h4 {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  label {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  button {
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
  }

  input {
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
  }
}

/* Accessibility overrides for Tailwind hardcoded text, borders, and backdrops in Light Mode */
html:not(.dark) {
  .text-slate-100 { color: #0f172a !important; }
  .text-slate-200 { color: #1e293b !important; }
  .text-slate-300 { color: #334155 !important; }
  .text-slate-400 { color: #475569 !important; }
  .text-slate-500 { color: #64748b !important; }
  .text-slate-600 { color: #334155 !important; }
  .text-slate-700 { color: #1e293b !important; }
  
  /* Map glowing neon colors (designed for dark backgrounds) to high-contrast equivalents */
  .text-indigo-400 { color: #4f46e5 !important; } /* indigo-600 */
  .text-indigo-300 { color: #3730a3 !important; } /* indigo-800 */
  .text-indigo-200 { color: #3730a3 !important; }
  .text-rose-400 { color: #e11d48 !important; } /* rose-600 */
  .text-rose-200 { color: #9f1239 !important; } /* rose-800 */
  .text-orange-400 { color: #ea580c !important; } /* orange-600 */
  .text-amber-400 { color: #d97706 !important; } /* amber-600 */
  .text-emerald-400 { color: #059669 !important; } /* emerald-600 */
  .text-emerald-200 { color: #065f46 !important; }
  .text-cyan-400 { color: #0891b2 !important; } /* cyan-600 */
  .text-purple-400 { color: #7c3aed !important; } /* purple-600 */
  
  /* Map dark-theme background overlays to readable light-mode values */
  .bg-slate-900\/30 { background-color: rgba(15, 23, 42, 0.04) !important; }
  .bg-slate-950\/20 { background-color: rgba(15, 23, 42, 0.03) !important; }
  .bg-slate-950\/40 { background-color: rgba(15, 23, 42, 0.05) !important; }
  .bg-slate-900\/40 { background-color: rgba(15, 23, 42, 0.05) !important; }
  .bg-slate-900\/60 { background-color: rgba(15, 23, 42, 0.04) !important; }
  .bg-slate-900\/10 { background-color: rgba(15, 23, 42, 0.05) !important; }
  .bg-card\/40 { background-color: rgba(255, 255, 255, 0.8) !important; }
  .bg-card\/60 { background-color: rgba(255, 255, 255, 0.8) !important; }
  
  /* Bypassing invisible borders on light backgrounds */
  .border-white\/5 { border-color: rgba(15, 23, 42, 0.08) !important; }
  .border-indigo-500\/20 { border-color: rgba(79, 70, 229, 0.15) !important; }
  .border-rose-500\/20 { border-color: rgba(225, 29, 72, 0.15) !important; }
  .border-emerald-500\/20 { border-color: rgba(16, 185, 129, 0.15) !important; }
  
  /* Make sure ticking chart tooltips are readable */
  .recharts-tooltip-wrapper {
    & > div {
      background-color: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.1) !important;
      color: #0f172a !important;
    }
  }
}