/**
 * Shared Theme CSS Variables
 *
 * This file defines CSS custom properties for all theme variants.
 * Variables are set by @manacore/shared-theme's createThemeStore() at runtime,
 * but this file provides sensible defaults for static rendering.
 *
 * Usage in app.css (Tailwind v4):
 * ```css
 * @import "tailwindcss";
 * @import "@manacore/shared-tailwind/themes.css";
 * ```
 *
 * Tailwind v4 Integration:
 * - Base color values are defined in :root with --theme-* prefix
 * - @theme inline references these via var(--theme-*)
 * - This generates utility classes (bg-background, text-foreground, etc.)
 * - Theme variants override --theme-* values in [data-theme] selectors
 */

/* ===== Tailwind v4 Theme Configuration ===== */
@theme inline {
  /*
   * Theme Colors - Reference CSS variables that are defined in :root
   * This tells Tailwind to generate utility classes that use these variables
   */
  --color-primary: var(--theme-primary);
  --color-primary-foreground: var(--theme-primary-foreground);
  --color-secondary: var(--theme-secondary);
  --color-secondary-foreground: var(--theme-secondary-foreground);
  --color-background: var(--theme-background);
  --color-foreground: var(--theme-foreground);
  --color-surface: var(--theme-surface);
  --color-surface-hover: var(--theme-surface-hover);
  --color-surface-elevated: var(--theme-surface-elevated);

  /* Elevation system - progressively lighter surfaces for overlays */
  --color-surface-elevated-1: var(--theme-surface-elevated-1);
  --color-surface-elevated-2: var(--theme-surface-elevated-2);
  --color-surface-elevated-3: var(--theme-surface-elevated-3);
  --color-muted: var(--theme-muted);
  --color-muted-foreground: var(--theme-muted-foreground);
  --color-border: var(--theme-border);
  --color-border-strong: var(--theme-border-strong);
  --color-error: var(--theme-error);
  --color-success: var(--theme-success);
  --color-warning: var(--theme-warning);
  --color-input: var(--theme-input);
  --color-ring: var(--theme-ring);

  /* ShadCN-compatible color aliases */
  --color-card: var(--theme-card);
  --color-card-foreground: var(--theme-card-foreground);
  --color-accent: var(--theme-accent);
  --color-accent-foreground: var(--theme-accent-foreground);

  /* Legacy aliases */
  --color-content: var(--theme-content);
  --color-content-hover: var(--theme-content-hover);
  --color-content-page: var(--theme-content-page);
  --color-menu: var(--theme-menu);
  --color-menu-hover: var(--theme-menu-hover);
}

@theme {
  /* Brand color */
  --color-mana: #4287f5;

  /* Border radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-DEFAULT: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 9999px;

  /* Box shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-DEFAULT: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-none: none;

  /* Font families */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace;

  /* Animations */
  --animate-spin-slow: spin 3s linear infinite;
  --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce-slow: bounce 2s infinite;
  --animate-fade-in: fadeIn 0.2s ease-out;
  --animate-fade-out: fadeOut 0.2s ease-in;
  --animate-slide-in: slideIn 0.2s ease-out;
  --animate-slide-out: slideOut 0.2s ease-in;
}

/* ===== Keyframes ===== */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes slideIn {
  0% { transform: translateY(-10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideOut {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-10px); opacity: 0; }
}

/* ===== Default Theme (Lume Light) ===== */
:root {
  /* Base theme values - these are referenced by @theme inline */
  --theme-primary: hsl(47 95% 58%);
  --theme-primary-foreground: hsl(0 0% 0%);
  --theme-secondary: hsl(47 100% 41%);
  --theme-secondary-foreground: hsl(0 0% 0%);
  --theme-background: hsl(0 0% 87%);
  --theme-foreground: hsl(0 0% 17%);
  --theme-surface: hsl(0 0% 100%);
  --theme-surface-hover: hsl(0 0% 96%);
  --theme-surface-elevated: hsl(0 0% 100%);
  /* Elevation system - progressively lighter surfaces for overlays */
  --theme-surface-elevated-1: hsl(0 0% 100%);
  --theme-surface-elevated-2: hsl(0 0% 100%);
  --theme-surface-elevated-3: hsl(0 0% 100%);
  --theme-muted: hsl(0 0% 90%);
  --theme-muted-foreground: hsl(0 0% 40%);
  --theme-border: hsl(0 0% 90%);
  --theme-border-strong: hsl(0 0% 80%);
  --theme-error: hsl(6 78% 57%);
  --theme-success: hsl(145 63% 42%);
  --theme-warning: hsl(36 100% 50%);
  --theme-input: hsl(0 0% 100%);
  --theme-ring: hsl(47 95% 58%);

  /* ShadCN-style aliases */
  --theme-card: hsl(0 0% 100%);
  --theme-card-foreground: hsl(0 0% 17%);
  --theme-accent: hsl(0 0% 96%);
  --theme-accent-foreground: hsl(0 0% 17%);

  /* Legacy aliases */
  --theme-content: hsl(0 0% 100%);
  --theme-content-hover: hsl(0 0% 96%);
  --theme-content-page: hsl(0 0% 87%);
  --theme-menu: hsl(0 0% 90%);
  --theme-menu-hover: hsl(0 0% 96%);

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;

  /* ShadCN legacy aliases (HSL components for hsl(var()) usage) */
  --background: 0 0% 87%;
  --foreground: 0 0% 17%;
  --primary: 47 95% 58%;
  --primary-foreground: 0 0% 0%;
  --secondary: 47 100% 41%;
  --secondary-foreground: 0 0% 0%;
  --muted: 0 0% 90%;
  --muted-foreground: 0 0% 40%;
  --border: 0 0% 90%;
  --input: 0 0% 100%;
  --ring: 47 95% 58%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 17%;
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 17%;
}

/* ===== Dark Mode ===== */
.dark,
:root.dark {
  /* Override theme values for dark mode */
  --theme-primary: hsl(47 95% 58%);
  --theme-primary-foreground: hsl(0 0% 0%);
  --theme-secondary: hsl(47 70% 29%);
  --theme-secondary-foreground: hsl(0 0% 100%);
  --theme-background: hsl(0 0% 6%);
  --theme-foreground: hsl(0 0% 100%);
  --theme-surface: hsl(0 0% 12%);
  --theme-surface-hover: hsl(0 0% 16%);
  --theme-surface-elevated: hsl(0 0% 14%);
  /* Elevation system - progressively lighter surfaces for overlays */
  --theme-surface-elevated-1: hsl(0 0% 16%);
  --theme-surface-elevated-2: hsl(0 0% 20%);
  --theme-surface-elevated-3: hsl(0 0% 24%);
  --theme-muted: hsl(0 0% 20%);
  --theme-muted-foreground: hsl(0 0% 60%);
  --theme-border: hsl(0 0% 26%);
  --theme-border-strong: hsl(0 0% 35%);
  --theme-error: hsl(6 78% 57%);
  --theme-success: hsl(145 63% 49%);
  --theme-warning: hsl(48 100% 50%);
  --theme-input: hsl(0 0% 14%);
  --theme-ring: hsl(47 95% 58%);

  /* ShadCN-style aliases */
  --theme-card: hsl(0 0% 12%);
  --theme-card-foreground: hsl(0 0% 100%);
  --theme-accent: hsl(0 0% 16%);
  --theme-accent-foreground: hsl(0 0% 100%);

  /* Legacy aliases */
  --theme-content: hsl(0 0% 12%);
  --theme-content-hover: hsl(0 0% 16%);
  --theme-content-page: hsl(0 0% 6%);
  --theme-menu: hsl(0 0% 20%);
  --theme-menu-hover: hsl(0 0% 16%);

  /* ShadCN legacy aliases (HSL components for hsl(var()) usage) */
  --background: 0 0% 6%;
  --foreground: 0 0% 100%;
  --primary: 47 95% 58%;
  --primary-foreground: 0 0% 0%;
  --secondary: 47 70% 29%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 20%;
  --muted-foreground: 0 0% 60%;
  --border: 0 0% 26%;
  --input: 0 0% 14%;
  --ring: 47 95% 58%;
  --card: 0 0% 12%;
  --card-foreground: 0 0% 100%;
  --accent: 0 0% 16%;
  --accent-foreground: 0 0% 100%;
}

/* ===== Lume Theme (Gold) ===== */
[data-theme="lume"] {
  --theme-primary: hsl(47 95% 58%);
  --theme-primary-foreground: hsl(0 0% 0%);
  --theme-secondary: hsl(47 100% 41%);
  --theme-secondary-foreground: hsl(0 0% 0%);
  --theme-background: hsl(0 0% 87%);
  --theme-foreground: hsl(0 0% 17%);
  --theme-surface: hsl(0 0% 100%);
  --theme-surface-hover: hsl(0 0% 96%);
  --theme-surface-elevated: hsl(0 0% 100%);
  --theme-surface-elevated-1: hsl(0 0% 100%);
  --theme-surface-elevated-2: hsl(0 0% 100%);
  --theme-surface-elevated-3: hsl(0 0% 100%);
  --theme-muted: hsl(0 0% 90%);
  --theme-muted-foreground: hsl(0 0% 40%);
  --theme-border: hsl(0 0% 90%);
  --theme-border-strong: hsl(0 0% 80%);
  --theme-error: hsl(6 78% 57%);
  --theme-success: hsl(145 63% 42%);
  --theme-warning: hsl(36 100% 50%);
  --theme-input: hsl(0 0% 100%);
  --theme-ring: hsl(47 95% 58%);
  --theme-card: hsl(0 0% 100%);
  --theme-card-foreground: hsl(0 0% 17%);
  --theme-accent: hsl(0 0% 96%);
  --theme-accent-foreground: hsl(0 0% 17%);
  --theme-content: hsl(0 0% 100%);
  --theme-content-hover: hsl(0 0% 96%);
  --theme-content-page: hsl(0 0% 87%);
  --theme-menu: hsl(0 0% 90%);
  --theme-menu-hover: hsl(0 0% 96%);
}

[data-theme="lume"].dark,
.dark[data-theme="lume"] {
  --theme-primary: hsl(47 95% 58%);
  --theme-primary-foreground: hsl(0 0% 0%);
  --theme-secondary: hsl(47 70% 29%);
  --theme-secondary-foreground: hsl(0 0% 100%);
  --theme-background: hsl(0 0% 6%);
  --theme-foreground: hsl(0 0% 100%);
  --theme-surface: hsl(0 0% 12%);
  --theme-surface-hover: hsl(0 0% 16%);
  --theme-surface-elevated: hsl(0 0% 14%);
  --theme-surface-elevated-1: hsl(0 0% 16%);
  --theme-surface-elevated-2: hsl(0 0% 20%);
  --theme-surface-elevated-3: hsl(0 0% 24%);
  --theme-muted: hsl(0 0% 20%);
  --theme-muted-foreground: hsl(0 0% 60%);
  --theme-border: hsl(0 0% 26%);
  --theme-border-strong: hsl(0 0% 35%);
  --theme-error: hsl(6 78% 57%);
  --theme-success: hsl(145 63% 49%);
  --theme-warning: hsl(48 100% 50%);
  --theme-input: hsl(0 0% 14%);
  --theme-ring: hsl(47 95% 58%);
  --theme-card: hsl(0 0% 12%);
  --theme-card-foreground: hsl(0 0% 100%);
  --theme-accent: hsl(0 0% 16%);
  --theme-accent-foreground: hsl(0 0% 100%);
  --theme-content: hsl(0 0% 12%);
  --theme-content-hover: hsl(0 0% 16%);
  --theme-content-page: hsl(0 0% 6%);
  --theme-menu: hsl(0 0% 20%);
  --theme-menu-hover: hsl(0 0% 16%);
}

/* ===== Nature Theme (Green) ===== */
[data-theme="nature"] {
  --theme-primary: hsl(122 39% 49%);
  --theme-primary-foreground: hsl(0 0% 100%);
  --theme-secondary: hsl(122 38% 63%);
  --theme-secondary-foreground: hsl(0 0% 0%);
  --theme-background: hsl(80 33% 97%);
  --theme-foreground: hsl(122 56% 24%);
  --theme-surface: hsl(0 0% 100%);
  --theme-surface-hover: hsl(120 25% 95%);
  --theme-surface-elevated: hsl(0 0% 100%);
  --theme-surface-elevated-1: hsl(0 0% 100%);
  --theme-surface-elevated-2: hsl(0 0% 100%);
  --theme-surface-elevated-3: hsl(0 0% 100%);
  --theme-muted: hsl(120 25% 95%);
  --theme-muted-foreground: hsl(122 20% 40%);
  --theme-border: hsl(120 25% 91%);
  --theme-border-strong: hsl(120 26% 79%);
  --theme-error: hsl(0 65% 67%);
  --theme-success: hsl(122 39% 49%);
  --theme-warning: hsl(36 100% 50%);
  --theme-input: hsl(0 0% 100%);
  --theme-ring: hsl(122 39% 49%);
  --theme-card: hsl(0 0% 100%);
  --theme-card-foreground: hsl(122 56% 24%);
  --theme-accent: hsl(120 25% 95%);
  --theme-accent-foreground: hsl(122 56% 24%);
  --theme-content: hsl(0 0% 100%);
  --theme-content-hover: hsl(120 25% 95%);
  --theme-content-page: hsl(80 33% 97%);
  --theme-menu: hsl(120 25% 95%);
  --theme-menu-hover: hsl(120 25% 95%);
}

[data-theme="nature"].dark,
.dark[data-theme="nature"] {
  --theme-primary: hsl(122 39% 49%);
  --theme-primary-foreground: hsl(0 0% 100%);
  --theme-secondary: hsl(122 30% 35%);
  --theme-secondary-foreground: hsl(0 0% 100%);
  --theme-background: hsl(0 0% 7%);
  --theme-foreground: hsl(0 0% 100%);
  --theme-surface: hsl(120 10% 12%);
  --theme-surface-hover: hsl(120 10% 16%);
  --theme-surface-elevated: hsl(120 10% 14%);
  --theme-surface-elevated-1: hsl(120 10% 16%);
  --theme-surface-elevated-2: hsl(120 10% 20%);
  --theme-surface-elevated-3: hsl(120 10% 24%);
  --theme-muted: hsl(120 10% 20%);
  --theme-muted-foreground: hsl(120 10% 60%);
  --theme-border: hsl(120 10% 25%);
  --theme-border-strong: hsl(120 10% 35%);
  --theme-error: hsl(0 65% 57%);
  --theme-success: hsl(122 50% 55%);
  --theme-warning: hsl(48 100% 50%);
  --theme-input: hsl(120 10% 14%);
  --theme-ring: hsl(122 39% 49%);
  --theme-card: hsl(120 10% 12%);
  --theme-card-foreground: hsl(0 0% 100%);
  --theme-accent: hsl(120 10% 16%);
  --theme-accent-foreground: hsl(0 0% 100%);
  --theme-content: hsl(120 10% 12%);
  --theme-content-hover: hsl(120 10% 16%);
  --theme-content-page: hsl(0 0% 7%);
  --theme-menu: hsl(120 10% 20%);
  --theme-menu-hover: hsl(120 10% 16%);
}

/* ===== Stone Theme (Blue Gray) ===== */
[data-theme="stone"] {
  --theme-primary: hsl(200 18% 46%);
  --theme-primary-foreground: hsl(0 0% 100%);
  --theme-secondary: hsl(200 15% 62%);
  --theme-secondary-foreground: hsl(0 0% 0%);
  --theme-background: hsl(210 17% 97%);
  --theme-foreground: hsl(200 19% 18%);
  --theme-surface: hsl(0 0% 100%);
  --theme-surface-hover: hsl(200 10% 94%);
  --theme-surface-elevated: hsl(0 0% 100%);
  --theme-surface-elevated-1: hsl(0 0% 100%);
  --theme-surface-elevated-2: hsl(0 0% 100%);
  --theme-surface-elevated-3: hsl(0 0% 100%);
  --theme-muted: hsl(200 10% 94%);
  --theme-muted-foreground: hsl(200 10% 45%);
  --theme-border: hsl(200 10% 88%);
  --theme-border-strong: hsl(200 12% 75%);
  --theme-error: hsl(4 90% 63%);
  --theme-success: hsl(145 63% 42%);
  --theme-warning: hsl(36 100% 50%);
  --theme-input: hsl(0 0% 100%);
  --theme-ring: hsl(200 18% 46%);
  --theme-card: hsl(0 0% 100%);
  --theme-card-foreground: hsl(200 19% 18%);
  --theme-accent: hsl(200 10% 94%);
  --theme-accent-foreground: hsl(200 19% 18%);
  --theme-content: hsl(0 0% 100%);
  --theme-content-hover: hsl(200 10% 94%);
  --theme-content-page: hsl(210 17% 97%);
  --theme-menu: hsl(200 10% 94%);
  --theme-menu-hover: hsl(200 10% 94%);
}

[data-theme="stone"].dark,
.dark[data-theme="stone"] {
  --theme-primary: hsl(200 15% 52%);
  --theme-primary-foreground: hsl(0 0% 0%);
  --theme-secondary: hsl(200 12% 35%);
  --theme-secondary-foreground: hsl(0 0% 100%);
  --theme-background: hsl(0 0% 7%);
  --theme-foreground: hsl(0 0% 100%);
  --theme-surface: hsl(200 10% 12%);
  --theme-surface-hover: hsl(200 10% 16%);
  --theme-surface-elevated: hsl(200 10% 14%);
  --theme-surface-elevated-1: hsl(200 10% 16%);
  --theme-surface-elevated-2: hsl(200 10% 20%);
  --theme-surface-elevated-3: hsl(200 10% 24%);
  --theme-muted: hsl(200 10% 20%);
  --theme-muted-foreground: hsl(200 10% 60%);
  --theme-border: hsl(200 10% 25%);
  --theme-border-strong: hsl(200 10% 35%);
  --theme-error: hsl(4 90% 58%);
  --theme-success: hsl(145 63% 49%);
  --theme-warning: hsl(48 100% 50%);
  --theme-input: hsl(200 10% 14%);
  --theme-ring: hsl(200 15% 52%);
  --theme-card: hsl(200 10% 12%);
  --theme-card-foreground: hsl(0 0% 100%);
  --theme-accent: hsl(200 10% 16%);
  --theme-accent-foreground: hsl(0 0% 100%);
  --theme-content: hsl(200 10% 12%);
  --theme-content-hover: hsl(200 10% 16%);
  --theme-content-page: hsl(0 0% 7%);
  --theme-menu: hsl(200 10% 20%);
  --theme-menu-hover: hsl(200 10% 16%);
}

/* ===== Ocean Theme (Blue) ===== */
[data-theme="ocean"] {
  --theme-primary: hsl(199 98% 45%);
  --theme-primary-foreground: hsl(0 0% 100%);
  --theme-secondary: hsl(199 92% 64%);
  --theme-secondary-foreground: hsl(0 0% 0%);
  --theme-background: hsl(199 100% 97%);
  --theme-foreground: hsl(199 100% 18%);
  --theme-surface: hsl(0 0% 100%);
  --theme-surface-hover: hsl(199 100% 94%);
  --theme-surface-elevated: hsl(0 0% 100%);
  --theme-surface-elevated-1: hsl(0 0% 100%);
  --theme-surface-elevated-2: hsl(0 0% 100%);
  --theme-surface-elevated-3: hsl(0 0% 100%);
  --theme-muted: hsl(199 100% 94%);
  --theme-muted-foreground: hsl(199 50% 40%);
  --theme-border: hsl(199 71% 87%);
  --theme-border-strong: hsl(199 79% 76%);
  --theme-error: hsl(4 90% 63%);
  --theme-success: hsl(145 63% 42%);
  --theme-warning: hsl(36 100% 50%);
  --theme-input: hsl(0 0% 100%);
  --theme-ring: hsl(199 98% 45%);
  --theme-card: hsl(0 0% 100%);
  --theme-card-foreground: hsl(199 100% 18%);
  --theme-accent: hsl(199 100% 94%);
  --theme-accent-foreground: hsl(199 100% 18%);
  --theme-content: hsl(0 0% 100%);
  --theme-content-hover: hsl(199 100% 94%);
  --theme-content-page: hsl(199 100% 97%);
  --theme-menu: hsl(199 100% 94%);
  --theme-menu-hover: hsl(199 100% 94%);
}

[data-theme="ocean"].dark,
.dark[data-theme="ocean"] {
  --theme-primary: hsl(199 98% 48%);
  --theme-primary-foreground: hsl(0 0% 0%);
  --theme-secondary: hsl(199 60% 35%);
  --theme-secondary-foreground: hsl(0 0% 100%);
  --theme-background: hsl(0 0% 7%);
  --theme-foreground: hsl(0 0% 100%);
  --theme-surface: hsl(199 30% 12%);
  --theme-surface-hover: hsl(199 30% 16%);
  --theme-surface-elevated: hsl(199 30% 14%);
  --theme-surface-elevated-1: hsl(199 30% 16%);
  --theme-surface-elevated-2: hsl(199 30% 20%);
  --theme-surface-elevated-3: hsl(199 30% 24%);
  --theme-muted: hsl(199 20% 20%);
  --theme-muted-foreground: hsl(199 20% 60%);
  --theme-border: hsl(199 20% 25%);
  --theme-border-strong: hsl(199 20% 35%);
  --theme-error: hsl(4 90% 58%);
  --theme-success: hsl(145 63% 49%);
  --theme-warning: hsl(48 100% 50%);
  --theme-input: hsl(199 30% 14%);
  --theme-ring: hsl(199 98% 48%);
  --theme-card: hsl(199 30% 12%);
  --theme-card-foreground: hsl(0 0% 100%);
  --theme-accent: hsl(199 30% 16%);
  --theme-accent-foreground: hsl(0 0% 100%);
  --theme-content: hsl(199 30% 12%);
  --theme-content-hover: hsl(199 30% 16%);
  --theme-content-page: hsl(0 0% 7%);
  --theme-menu: hsl(199 20% 20%);
  --theme-menu-hover: hsl(199 30% 16%);
}

/* ===== Dark mode via media query (fallback) ===== */
@media (prefers-color-scheme: dark) {
  :root:not(.dark):not([data-theme]) {
    --theme-primary: hsl(47 95% 58%);
    --theme-primary-foreground: hsl(0 0% 0%);
    --theme-secondary: hsl(47 70% 29%);
    --theme-secondary-foreground: hsl(0 0% 100%);
    --theme-background: hsl(0 0% 6%);
    --theme-foreground: hsl(0 0% 100%);
    --theme-surface: hsl(0 0% 12%);
    --theme-surface-hover: hsl(0 0% 16%);
    --theme-surface-elevated: hsl(0 0% 14%);
    --theme-surface-elevated-1: hsl(0 0% 16%);
    --theme-surface-elevated-2: hsl(0 0% 20%);
    --theme-surface-elevated-3: hsl(0 0% 24%);
    --theme-muted: hsl(0 0% 20%);
    --theme-muted-foreground: hsl(0 0% 60%);
    --theme-border: hsl(0 0% 26%);
    --theme-border-strong: hsl(0 0% 35%);
    --theme-error: hsl(6 78% 57%);
    --theme-success: hsl(145 63% 49%);
    --theme-warning: hsl(48 100% 50%);
    --theme-input: hsl(0 0% 14%);
    --theme-ring: hsl(47 95% 58%);
    --theme-card: hsl(0 0% 12%);
    --theme-card-foreground: hsl(0 0% 100%);
    --theme-accent: hsl(0 0% 16%);
    --theme-accent-foreground: hsl(0 0% 100%);
    --theme-content: hsl(0 0% 12%);
    --theme-content-hover: hsl(0 0% 16%);
    --theme-content-page: hsl(0 0% 6%);
    --theme-menu: hsl(0 0% 20%);
    --theme-menu-hover: hsl(0 0% 16%);
  }
}

/* ===== Base Styles ===== */
@layer base {
  * {
    border-color: var(--color-border);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }

  /* Smooth color transitions for theme switching */
  html {
    color-scheme: light;
  }

  html.dark {
    color-scheme: dark;
  }
}

/* ===== Component Utilities ===== */
@layer components {
  /* Primary Button */
  .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .btn-primary:hover {
    filter: brightness(0.9);
  }

  .btn-primary:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
  }

  /* Secondary Button */
  .btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-foreground);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .btn-secondary:hover {
    filter: brightness(0.95);
  }

  /* Ghost Button */
  .btn-ghost {
    background-color: transparent;
    color: var(--color-foreground);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .btn-ghost:hover {
    background-color: var(--color-surface-hover);
  }

  /* Card */
  .card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
  }

  .card-elevated {
    background-color: var(--color-surface-elevated);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  }

  /* Input */
  .input {
    background-color: var(--color-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    color: var(--color-foreground);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .input:focus {
    border-color: var(--color-ring);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-ring) 20%, transparent);
    outline: none;
  }

  .input::placeholder {
    color: var(--color-muted-foreground);
  }

  /* Badge */
  .badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 500;
    background-color: var(--color-muted);
    color: var(--color-muted-foreground);
  }

  .badge-primary {
    background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
  }

  .badge-success {
    background-color: color-mix(in srgb, var(--color-success) 10%, transparent);
    color: var(--color-success);
  }

  .badge-error {
    background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
    color: var(--color-error);
  }

  .badge-warning {
    background-color: color-mix(in srgb, var(--color-warning) 10%, transparent);
    color: var(--color-warning);
  }
}