/* Theme Variables - Auto-generated from theme-config.json */
:root {
  /* Color System */
  --color-primary: var(--color-primary-main, #8e2de2);
  --color-primary-light: var(--color-primary-light, #b366ff);
  --color-primary-dark: var(--color-primary-dark, #5c00b3);
  
  --color-secondary: var(--color-secondary-main, #eaafc8);
  --color-secondary-light: var(--color-secondary-light, #ffe1f0);
  --color-secondary-dark: var(--color-secondary-dark, #b77f9e);
  
  --color-accent: var(--color-accent-main, #4a00e0);
  --color-accent-light: var(--color-accent-light, #7e3bff);
  --color-accent-dark: var(--color-accent-dark, #0000ad);
  
  /* Text Colors */
  --color-text: var(--color-text-primary, #ffffff);
  --color-text-secondary: var(--color-text-secondary, #e2e8f0);
  --color-text-muted: var(--color-text-muted, #94a3b8);
  
  /* Background Colors */
  --color-bg: var(--color-background-default, #0f172a);
  --color-bg-paper: var(--color-background-paper, #1e293b);
  --color-bg-overlay: var(--color-background-overlay, rgba(15, 23, 42, 0.8));
  
  /* Gradients */
  --gradient-hero: var(--gradient-hero, linear-gradient(135deg, #654ea3, #eaafc8));
  --gradient-badge: var(--gradient-badge, linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(99, 102, 241, 0.3)));
  --gradient-aura: var(--gradient-aura, linear-gradient(45deg, #ff00ff, #ff00cc, #ff0099, #ff0066, #ff0033, #ff0000, #ff3300, #ff6600, #ff9900, #ffcc00, #ffff00, #ccff00, #99ff00, #66ff00, #33ff00, #00ff00, #00ff33, #00ff66, #00ff99, #00ffcc, #00ffff, #00ccff, #0099ff, #0066ff, #0033ff, #0000ff, #3300ff, #6600ff, #9900ff, #cc00ff));
  
  /* Glow Effects */
  --glow-hero: var(--glow-hero, rgba(234, 175, 200, 0.4));
  
  /* Typography */
  --font-family: var(--font-family, "'Inter', 'Segoe UI', system-ui, sans-serif");
  
  --font-h1-size: var(--font-h1-size, 3.5rem);
  --font-h1-weight: var(--font-h1-weight, 800);
  --font-h1-line-height: var(--font-h1-line-height, 1.2);
  
  --font-h2-size: var(--font-h2-size, 2.5rem);
  --font-h2-weight: var(--font-h2-weight, 700);
  --font-h2-line-height: var(--font-h2-line-height, 1.3);
  
  --font-body-size: var(--font-body-size, 1rem);
  --font-body-weight: var(--font-body-weight, 400);
  --font-body-line-height: var(--font-body-line-height, 1.6);
  
  /* Spacing */
  --spacing-unit: 8px;
  --spacing-1: calc(var(--spacing-unit) * 1);
  --spacing-2: calc(var(--spacing-unit) * 2);
  --spacing-3: calc(var(--spacing-unit) * 3);
  --spacing-4: calc(var(--spacing-unit) * 4);
  --spacing-5: calc(var(--spacing-unit) * 5);
  
  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Transitions */
  --transition-short: 0.2s;
  --transition-medium: 0.3s;
  --transition-long: 0.5s;
  
  /* Z-index */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
}

/* Apply theme to components */
.hero-card-image {
  background: var(--gradient-hero);
}

.hero-card-badge {
  background: var(--gradient-badge);
  color: var(--color-text);
}

.nova-thought.aura-neon-burst {
  background: var(--gradient-aura);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}