/**
 * Theme CSS Variables
 * ====================
 * These CSS custom properties are loaded directly (not processed by Tailwind)
 * to ensure they're ALWAYS present in production.
 * 
 * This file is imported via <link> in index.html to bypass Tailwind's purging.
 */

:root {
  /* Font Variables */
  --font-size: 16px;
  --font-sans: "Instrument Sans", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
  --font-display: "Sora", "Instrument Sans", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  /* Layout Variables */
  --sidebar-width: 280px;
  --history-w: 300px;
  --radius: 0.75rem;
  --sidebar-primary-w: 280px;
  --sidebar-secondary-w: 260px;
  --gutter: 24px;
  --section-gap: 24px;

  /* Typography Variables */
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --h1-size: 2.5rem;
  --h1-line: 1.1;
  --h1-weight: 700;
  --h1-tracking: -0.02em;
  --h2-size: 1.5rem;
  --h2-line: 1.3;
  --h2-weight: 600;
  --h2-tracking: -0.01em;

  /* Animation Variables for cross-platform consistency */
  --animation-duration-fast: 150ms;
  --animation-duration-normal: 200ms;
  --animation-duration-slow: 300ms;
  --animation-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --animation-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --animation-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========== LIGHT THEME COLOR TOKENS ========== */
  --background: 210 17% 98%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 250 80% 55%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted: 214 32% 91%;
  --muted-foreground: 215 16% 47%;
  --accent: 210 40% 96%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 215 20% 65% / 0.2;
  --input: 0 0% 100% / 0;
  --input-background: 0 0% 100%;
  --switch-background: 212 15% 82%;
  --ring: 250 80% 55% / 0.4;

  /* Chart Colors */
  --chart-1: 250 80% 55%;
  --chart-2: 221 83% 53%;
  --chart-3: 35 92% 50%;
  --chart-4: 169 79% 40%;
  --chart-5: 343 76% 50%;

  /* Sidebar Colors */
  --sidebar: 210 17% 98%;
  --sidebar-foreground: 222 47% 11%;
  --sidebar-primary: 250 80% 55%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 214 32% 91%;
  --sidebar-accent-foreground: 222 47% 11%;
  --sidebar-border: 215 20% 65% / 0.2;
  --sidebar-ring: 250 80% 55% / 0.4;

  /* Background Effects */
  --bg-spot-1: 250 80% 55% / 0.08;
  --bg-spot-2: 217 91% 60% / 0.08;
  --bg-grid: 222 47% 11% / 0.03;
  --panel-sheen: 0 0% 100% / 0.4;

  /* Radix Transform Origins */
  --radix-dropdown-menu-content-transform-origin: center center;
  --radix-popover-content-transform-origin: center center;
  --radix-select-content-transform-origin: center center;
  --radix-tooltip-content-transform-origin: center center;
  --radix-hover-card-content-transform-origin: center center;
  --radix-menubar-content-transform-origin: center center;
  --radix-context-menu-content-transform-origin: center center;
  --radix-popper-transform-origin: center center;
}

/* ========== DARK THEME COLOR TOKENS ========== */
.dark {
  color-scheme: dark;
  --background: 240 6% 10%;
  --foreground: 240 5% 96%;
  --card: 240 5% 13%;
  --card-foreground: 240 5% 96%;
  --popover: 240 5% 13%;
  --popover-foreground: 240 5% 96%;
  --primary: 250 95% 72%;
  --primary-foreground: 240 10% 3.9%;
  --secondary: 240 4% 18%;
  --secondary-foreground: 240 5% 96%;
  --muted: 240 4% 18%;
  --muted-foreground: 240 5% 80%;
  --accent: 240 4% 18%;
  --accent-foreground: 240 5% 96%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 4% 22%;
  --input: 240 4% 20%;
  --input-background: 240 6% 10%;
  --switch-background: 240 4% 28%;
  --ring: 250 95% 72% / 0.5;

  /* Chart Colors - Dark */
  --chart-1: 250 90% 70%;
  --chart-2: 217 91% 65%;
  --chart-3: 45 93% 50%;
  --chart-4: 151 65% 55%;
  --chart-5: 350 89% 65%;

  /* Sidebar Colors - Dark */
  --sidebar: 240 6% 10%;
  --sidebar-foreground: 240 5% 96%;
  --sidebar-primary: 250 95% 72%;
  --sidebar-primary-foreground: 240 10% 3.9%;
  --sidebar-accent: 240 4% 18%;
  --sidebar-accent-foreground: 240 5% 96%;
  --sidebar-border: 240 4% 20%;
  --sidebar-ring: 250 95% 72% / 0.5;

  /* Background Effects - Dark */
  --bg-spot-1: 250 95% 72% / 0.15;
  --bg-spot-2: 217 90% 65% / 0.10;
  --bg-grid: 0 0% 100% / 0.05;
  --panel-sheen: 0 0% 100% / 0.04;
}