/* Dynamic Theme Variables - Higher Specificity */
:root, html, body {
  /* Dynamic Brand Colors - Override with !important */
  --primary: 253 78% 20% !important;
  --primary-foreground: 210 40% 98% !important;
  --secondary: 284 100% 9% !important;
  --secondary-foreground: 210 40% 98% !important;
  --accent: 192 100% 25% !important;
  --accent-foreground: 240 63% 5% !important;
  --background: 240 63% 5% !important;
  --foreground: 210 40% 98% !important;
  --muted: 243 55% 9% !important;
  --card: 243 55% 9% !important;
  --popover: 243 55% 9% !important;
  --border: 206 27% 34% !important;
  --input: 206 27% 34% !important;
  --ring: 253 78% 20% !important;
  
  /* Custom Dynamic Colors */
  --brand-primary: 253 78% 20% !important;
  --brand-secondary: 284 100% 9% !important;
  --brand-tertiary: 192 100% 25% !important;
  --brand-accent: 192 100% 25% !important;
  --brand-accent-1: 264 69% 37% !important;
  --brand-accent-2: 192 100% 80% !important;
  --brand-accent-3: 258 34% 50% !important;
  --brand-surface: 243 55% 9% !important;
  --brand-surface-elevated: 251 48% 9% !important;
  --brand-text: 210 40% 98% !important;
  --brand-primary-hex: #1c0b5b !important;
  --brand-secondary-hex: #22002e !important;
  --brand-tertiary-hex: #006680 !important;
  --brand-accent-1-hex: #511d9f !important;
  --brand-accent-2-hex: #99ebff !important;
  --brand-accent-3-hex: #6e54ab !important;
  --brand-primary-rgb: 28, 11, 91 !important;
  --brand-secondary-rgb: 34, 0, 46 !important;
  --brand-tertiary-rgb: 0, 102, 128 !important;
  --brand-accent-1-rgb: 81, 29, 159 !important;
  --brand-accent-2-rgb: 153, 235, 255 !important;
  --brand-accent-3-rgb: 110, 84, 171 !important;
  --brand-bg-rgb: 5, 5, 22 !important;
  --brand-bg-mid-rgb: 10, 7, 25 !important;
  --brand-surface-rgb: 11, 10, 34 !important;
  --brand-surface-elevated-rgb: 16, 12, 34 !important;
  
  /* Override legacy custom variables */
  --accent-primary: 253 78% 20% !important;
  --accent-secondary: 284 100% 9% !important;
  --accent-amber: 192 100% 25% !important;
  --dark-bg: 240 63% 5% !important;
  --dark-surface: 243 55% 9% !important;
  --dark-elevated: 251 48% 9% !important;
  
  /* Dynamic Gradient Variables */
  --gradient-primary-start: #1c0b5b !important;
  --gradient-primary-end: #22002e !important;
  --gradient-hero-start: #050516 !important;
  --gradient-hero-end: #0b0a22 !important;
  
  /* Computed gradient values */
  --brand-gradient: linear-gradient(135deg, #1c0b5b 0%, #22002e 52%, #006680 100%) !important;
  --bg-gradient: var(--brand-gradient) !important;
  --app-background: radial-gradient(circle at 16% 8%, rgba(81, 29, 159, 0.18), transparent 32%), radial-gradient(circle at 86% 12%, rgba(153, 235, 255, 0.16), transparent 34%), linear-gradient(135deg, #050516 0%, #0a0719 52%, #0f0e20 100%) !important;
  --page-gradient: var(--app-background) !important;
  --hero-gradient: radial-gradient(circle at 22% 18%, rgba(28, 11, 91, 0.28), transparent 42%), radial-gradient(circle at 78% 22%, rgba(153, 235, 255, 0.20), transparent 36%), linear-gradient(135deg, #050516 0%, #0a0719 48%, #0b0a22 100%) !important;
  --surface-gradient: linear-gradient(145deg, rgba(11, 10, 34, 0.92), rgba(16, 12, 34, 0.88)) !important;
  --brand-glow: 0 18px 48px rgba(28, 11, 91, 0.28) !important;
  --brand-glow-soft: 0 10px 28px rgba(34, 0, 46, 0.18) !important;
  --brand-border-color: rgba(153, 235, 255, 0.34) !important;

  /* Legacy landing variables now derive from the brand palette */
  --landing-background-start: #050516 !important;
  --landing-background-mid: #0a0719 !important;
  --landing-background-end: #0f0e20 !important;
  --landing-glow-primary: #1c0b5b !important;
  --landing-glow-secondary: #99ebff !important;
  --landing-glow-accent: #6e54ab !important;
  --landing-hero-panel-color: #0b0a22 !important;
  --landing-hero-background-start: #050516 !important;
  --landing-hero-background-mid: #0a0719 !important;
  --landing-hero-background-end: #0b0a22 !important;
}

.dark, .dark *, [data-theme="dark"], html.dark {
  --primary: 253 78% 20% !important;
  --primary-foreground: 210 40% 98% !important;
  --secondary: 284 100% 9% !important;
  --secondary-foreground: 210 40% 98% !important;
  --accent: 192 100% 25% !important;
  --accent-foreground: 240 63% 5% !important;
  --background: 240 63% 5% !important;
  --foreground: 210 40% 98% !important;
  --muted: 243 55% 9% !important;
  --card: 243 55% 9% !important;
  --popover: 243 55% 9% !important;
  --border: 206 27% 34% !important;
  --input: 206 27% 34% !important;
  --ring: 253 78% 20% !important;
}