/* Dynamic Theme Variables - Higher Specificity */
:root, html, body {
  /* Dynamic Brand Colors - Override with !important */
  --primary: 228 97% 12% !important;
  --primary-foreground: 210 40% 98% !important;
  --secondary: 217 86% 49% !important;
  --secondary-foreground: 210 40% 98% !important;
  --accent: 162 100% 29% !important;
  --accent-foreground: 229 81% 4% !important;
  --background: 229 81% 4% !important;
  --foreground: 210 40% 98% !important;
  --muted: 227 66% 7% !important;
  --card: 227 66% 7% !important;
  --popover: 227 66% 7% !important;
  --border: 206 27% 34% !important;
  --input: 206 27% 34% !important;
  --ring: 228 97% 12% !important;
  
  /* Custom Dynamic Colors */
  --brand-primary: 228 97% 12% !important;
  --brand-secondary: 217 86% 49% !important;
  --brand-tertiary: 162 100% 29% !important;
  --brand-accent: 162 100% 29% !important;
  --brand-accent-1: 264 69% 37% !important;
  --brand-accent-2: 192 100% 80% !important;
  --brand-accent-3: 258 34% 50% !important;
  --brand-surface: 227 66% 7% !important;
  --brand-surface-elevated: 220 71% 16% !important;
  --brand-text: 210 40% 98% !important;
  --brand-primary-hex: #010d3c !important;
  --brand-secondary-hex: #1164e8 !important;
  --brand-tertiary-hex: #009468 !important;
  --brand-accent-1-hex: #511d9f !important;
  --brand-accent-2-hex: #99ebff !important;
  --brand-accent-3-hex: #6e54ab !important;
  --brand-primary-rgb: 1, 13, 60 !important;
  --brand-secondary-rgb: 17, 100, 232 !important;
  --brand-tertiary-rgb: 0, 148, 104 !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: 2, 5, 19 !important;
  --brand-bg-mid-rgb: 7, 25, 58 !important;
  --brand-surface-rgb: 6, 11, 29 !important;
  --brand-surface-elevated-rgb: 12, 32, 71 !important;
  
  /* Override legacy custom variables */
  --accent-primary: 228 97% 12% !important;
  --accent-secondary: 217 86% 49% !important;
  --accent-amber: 162 100% 29% !important;
  --dark-bg: 229 81% 4% !important;
  --dark-surface: 227 66% 7% !important;
  --dark-elevated: 220 71% 16% !important;
  
  /* Dynamic Gradient Variables */
  --gradient-primary-start: #010d3c !important;
  --gradient-primary-end: #1164e8 !important;
  --gradient-hero-start: #020513 !important;
  --gradient-hero-end: #060b1d !important;
  
  /* Computed gradient values */
  --brand-gradient: linear-gradient(135deg, #010d3c 0%, #1164e8 52%, #009468 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, #020513 0%, #07193a 52%, #0f0e20 100%) !important;
  --page-gradient: var(--app-background) !important;
  --hero-gradient: radial-gradient(circle at 22% 18%, rgba(1, 13, 60, 0.28), transparent 42%), radial-gradient(circle at 78% 22%, rgba(153, 235, 255, 0.20), transparent 36%), linear-gradient(135deg, #020513 0%, #07193a 48%, #060b1d 100%) !important;
  --surface-gradient: linear-gradient(145deg, rgba(6, 11, 29, 0.92), rgba(12, 32, 71, 0.88)) !important;
  --brand-glow: 0 18px 48px rgba(1, 13, 60, 0.28) !important;
  --brand-glow-soft: 0 10px 28px rgba(17, 100, 232, 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: #020513 !important;
  --landing-background-mid: #07193a !important;
  --landing-background-end: #0f0e20 !important;
  --landing-glow-primary: #010d3c !important;
  --landing-glow-secondary: #99ebff !important;
  --landing-glow-accent: #6e54ab !important;
  --landing-hero-panel-color: #060b1d !important;
  --landing-hero-background-start: #020513 !important;
  --landing-hero-background-mid: #07193a !important;
  --landing-hero-background-end: #060b1d !important;
}

.dark, .dark *, [data-theme="dark"], html.dark {
  --primary: 228 97% 12% !important;
  --primary-foreground: 210 40% 98% !important;
  --secondary: 217 86% 49% !important;
  --secondary-foreground: 210 40% 98% !important;
  --accent: 162 100% 29% !important;
  --accent-foreground: 229 81% 4% !important;
  --background: 229 81% 4% !important;
  --foreground: 210 40% 98% !important;
  --muted: 227 66% 7% !important;
  --card: 227 66% 7% !important;
  --popover: 227 66% 7% !important;
  --border: 206 27% 34% !important;
  --input: 206 27% 34% !important;
  --ring: 228 97% 12% !important;
}