@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Light Theme: Top Gun Inspired (Sand/Khaki, Navy, Red) */
    --background: 36 29% 95%; /* #F7F3EE - Light Sand from Image 2 */
    --foreground: 225 60% 10%; /* #0A1128 - Deep Navy */

    --card: 0 0% 100%;
    --card-foreground: 225 60% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 225 60% 10%;

    --primary: 225 60% 10%; /* Deep Navy */
    --primary-foreground: 36 29% 95%;

    --secondary: 355 78% 56%; /* #E63946 - Vibrant Red from Image 2 */
    --secondary-foreground: 0 0% 100%;

    --muted: 36 15% 85%;
    --muted-foreground: 225 60% 10%;

    --accent: 26 87% 67%; /* #F4A261 - Aviation Orange */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 225 20% 85%;
    --input: 225 20% 85%;
    --ring: 225 60% 10%;

    --radius: 0.15rem; /* Sharper corners for military feel */

    --sidebar-background: 36 29% 95%;
    --sidebar-foreground: 225 60% 10%;
    --sidebar-primary: 225 60% 10%;
    --sidebar-primary-foreground: 36 29% 95%;
    --sidebar-accent: 36 15% 85%;
    --sidebar-accent-foreground: 225 60% 10%;
    --sidebar-border: 225 20% 85%;
    --sidebar-ring: 225 60% 10%;

    --hud-glow: 0 0 15px hsla(225, 60%, 10%, 0.15);
  }

  .dark {
    /* Dark Theme: 805 Maverick Original (Deep Blue/Black, Cyan, Red) */
    --background: 217 68% 4%; /* #030810 from Image 1 */
    --foreground: 0 0% 100%;

    --card: 217 68% 6%;
    --card-foreground: 0 0% 100%;

    --popover: 217 68% 4%;
    --popover-foreground: 0 0% 100%;

    --primary: 190 100% 50%; /* Cyan #00D4FF from Image 1 */
    --primary-foreground: 217 68% 4%;

    --secondary: 354 71% 47%; /* Red */
    --secondary-foreground: 0 0% 100%;

    --muted: 217 30% 12%;
    --muted-foreground: 0 0% 100%;

    --accent: 190 100% 50%; /* Cyan */
    --accent-foreground: 217 68% 4%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;

    --border: 217 30% 15%;
    --input: 217 30% 15%;
    --ring: 190 100% 50%;

    --sidebar-background: 217 68% 4%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 190 100% 50%;
    --sidebar-primary-foreground: 217 68% 4%;
    --sidebar-accent: 217 30% 15%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 217 30% 15%;
    --sidebar-ring: 190 100% 50%;
    --hud-glow: 0 0 25px hsla(190, 100%, 50%, 0.4);
  }

  .theme-cyan {
    /* Cyan / Blueish Theme */
    --background: 0 0% 0%; /* Solid Black */
    --foreground: 220 20% 95%;

    --card: 220 50% 4%;
    --card-foreground: 220 20% 95%;

    --popover: 220 50% 4%;
    --popover-foreground: 220 20% 95%;

    --primary: 190 100% 50%; /* Bright Cyan */
    --primary-foreground: 220 50% 6%;

    --secondary: 220 60% 15%;
    --secondary-foreground: 190 100% 50%;

    --muted: 220 40% 15%;
    --muted-foreground: 220 20% 95%;

    --accent: 190 100% 50%;
    --accent-foreground: 220 50% 6%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 50% 20%;
    --input: 220 50% 20%;
    --ring: 190 100% 50%;

    --sidebar-background: 220 50% 6%;
    --sidebar-foreground: 220 20% 95%;
    --sidebar-primary: 190 100% 50%;
    --sidebar-primary-foreground: 220 50% 6%;
    --sidebar-accent: 220 40% 15%;
    --sidebar-accent-foreground: 190 100% 50%;
    --sidebar-border: 220 50% 20%;
    --sidebar-ring: 190 100% 50%;

    --hud-glow: 0 0 25px hsla(190, 100%, 50%, 0.4);
  }

  .theme-tron {
    /* Tron / Retro Synthwave Theme */
    --background: 240 60% 5%; /* Very dark blue */
    --foreground: 0 0% 100%;

    --card: 240 60% 8%;
    --card-foreground: 0 0% 100%;

    --popover: 240 60% 8%;
    --popover-foreground: 0 0% 100%;

    --primary: 190 100% 50%; /* Cyan */
    --primary-foreground: 240 60% 5%;

    --secondary: 310 100% 60%; /* Magenta/Pink */
    --secondary-foreground: 0 0% 100%;

    --muted: 240 40% 15%;
    --muted-foreground: 0 0% 100%;

    --accent: 310 100% 60%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 240 40% 20%;
    --input: 240 40% 20%;
    --ring: 190 100% 50%;

    --sidebar-background: 240 60% 8%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 190 100% 50%;
    --sidebar-primary-foreground: 240 60% 5%;
    --sidebar-accent: 240 40% 15%;
    --sidebar-accent-foreground: 310 100% 60%;
    --sidebar-border: 240 40% 20%;
    --sidebar-ring: 190 100% 50%;

    --hud-glow: 0 0 25px hsla(190, 100%, 50%, 0.4);
  }
  
  .theme-sand-raptor {
    /* Light Theme Variation: Raptor */
    --background: 36 29% 95%; /* #F7F3EE - Light Sand from Image 2 */
    --foreground: 225 60% 10%; /* #0A1128 - Deep Navy */

    --card: 0 0% 100%;
    --card-foreground: 225 60% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 225 60% 10%;

    --primary: 225 60% 10%; /* Deep Navy */
    --primary-foreground: 36 29% 95%;

    --secondary: 355 78% 56%; /* #E63946 - Vibrant Red from Image 2 */
    --secondary-foreground: 0 0% 100%;

    --muted: 36 15% 85%;
    --muted-foreground: 225 60% 10%;

    --accent: 26 87% 67%; /* #F4A261 - Aviation Orange */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 225 20% 85%;
    --input: 225 20% 85%;
    --ring: 225 60% 10%;

    --radius: 0.15rem; /* Sharper corners for military feel */

    --sidebar-background: 36 29% 95%;
    --sidebar-foreground: 225 60% 10%;
    --sidebar-primary: 225 60% 10%;
    --sidebar-primary-foreground: 36 29% 95%;
    --sidebar-accent: 36 15% 85%;
    --sidebar-accent-foreground: 225 60% 10%;
    --sidebar-border: 225 20% 85%;
    --sidebar-ring: 225 60% 10%;

    --hud-glow: 0 0 15px hsla(225, 60%, 10%, 0.15);
  }
  
  .theme-tron-electrified {
    /* Tron / Electrified Variant */
    --background: 240 60% 5%; /* Very dark blue */
    --foreground: 180 100% 95%;

    --card: 240 60% 8%;
    --card-foreground: 180 100% 95%;

    --popover: 240 60% 8%;
    --popover-foreground: 180 100% 95%;

    --primary: 180 100% 50%; /* Cyan */
    --primary-foreground: 0 0% 0%;

    --secondary: 0 100% 50%; /* Tron Red */
    --secondary-foreground: 0 0% 100%;

    --muted: 240 40% 15%;
    --muted-foreground: 180 100% 95%;

    --accent: 0 100% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 180 100% 50%;
    --input: 180 100% 50%;
    --ring: 0 100% 50%;

    --sidebar-background: 240 60% 8%;
    --sidebar-foreground: 180 100% 95%;
    --sidebar-primary: 180 100% 50%;
    --sidebar-primary-foreground: 0 0% 0%;
    --sidebar-accent: 240 40% 15%;
    --sidebar-accent-foreground: 0 100% 50%;
    --sidebar-border: 180 100% 50%;
    --sidebar-ring: 0 100% 50%;

    --hud-glow: 0 0 25px hsla(0, 100%, 50%, 0.4);
    --radius: 0.5rem;
  }

  .theme-patriot-dark {
    /* Patriot / Top Gun Theme Dark */
    --background: 222 47% 11%;
    --foreground: 0 0% 100%;
    --card: 222 47% 15%;
    --card-foreground: 0 0% 100%;
    --popover: 222 47% 15%;
    --popover-foreground: 0 0% 100%;
    --primary: 355 78% 56%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 100% 50%;
    --secondary-foreground: 0 0% 100%;
    --muted: 222 47% 20%;
    --muted-foreground: 0 0% 100%;
    --accent: 355 78% 56%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 222 47% 25%;
    --input: 222 47% 25%;
    --ring: 355 78% 56%;
    --sidebar-background: 222 47% 15%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 355 78% 56%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 47% 20%;
    --sidebar-accent-foreground: 355 78% 56%;
    --sidebar-border: 222 47% 25%;
    --sidebar-ring: 355 78% 56%;
    --hud-glow: 0 0 25px hsla(355, 78%, 56%, 0.4);
    --radius: 0.25rem;
  }

  .theme-patriot-light {
    /* Patriot / Top Gun Theme Light */
    --background: 0 0% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 355 78% 56%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 100% 50%;
    --secondary-foreground: 0 0% 100%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 222 47% 11%;
    --accent: 355 78% 56%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 355 78% 56%;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 222 47% 11%;
    --sidebar-primary: 355 78% 56%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 40% 96.1%;
    --sidebar-accent-foreground: 355 78% 56%;
    --sidebar-border: 214.3 31.8% 91.4%;
    --sidebar-ring: 355 78% 56%;
    --hud-glow: 0 0 25px hsla(355, 78%, 56%, 0.4);
    --radius: 0.25rem;
  }

  .theme-xmas {
    --background: 142 71% 10%;
    --foreground: 0 0% 100%;
    --card: 142 71% 15%;
    --card-foreground: 0 0% 100%;
    --popover: 142 71% 15%;
    --popover-foreground: 0 0% 100%;
    --primary: 348 83% 47%; /* Red */
    --primary-foreground: 0 0% 100%;
    --secondary: 142 71% 25%; /* Green */
    --secondary-foreground: 0 0% 100%;
    --muted: 142 50% 20%;
    --muted-foreground: 0 0% 100%;
    --accent: 45 93% 47%; /* Gold */
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 142 50% 25%;
    --input: 142 50% 25%;
    --ring: 348 83% 47%;
    --sidebar-background: 142 71% 15%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 348 83% 47%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 142 50% 20%;
    --sidebar-accent-foreground: 348 83% 47%;
    --sidebar-border: 142 50% 25%;
    --sidebar-ring: 348 83% 47%;
    --hud-glow: 0 0 25px hsla(348, 83%, 47%, 0.4);
    --radius: 0.5rem;
  }

  .theme-xmaseve {
    --background: 222 47% 11%;
    --foreground: 0 0% 100%;
    --card: 222 47% 15%;
    --card-foreground: 0 0% 100%;
    --popover: 222 47% 15%;
    --popover-foreground: 0 0% 100%;
    --primary: 348 83% 47%;
    --primary-foreground: 0 0% 100%;
    --secondary: 142 71% 25%;
    --secondary-foreground: 0 0% 100%;
    --muted: 222 47% 20%;
    --muted-foreground: 0 0% 100%;
    --accent: 45 93% 47%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 222 47% 25%;
    --input: 222 47% 25%;
    --ring: 348 83% 47%;
    --sidebar-background: 222 47% 15%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 348 83% 47%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 47% 20%;
    --sidebar-accent-foreground: 45 93% 47%;
    --sidebar-border: 222 47% 25%;
    --sidebar-ring: 348 83% 47%;
    --hud-glow: 0 0 25px hsla(45, 93%, 47%, 0.4);
    --radius: 0.5rem;
  }

  .theme-valentines {
    --background: 340 50% 10%;
    --foreground: 0 0% 100%;
    --card: 340 50% 15%;
    --card-foreground: 0 0% 100%;
    --popover: 340 50% 15%;
    --popover-foreground: 0 0% 100%;
    --primary: 340 82% 52%;
    --primary-foreground: 0 0% 100%;
    --secondary: 340 30% 80%;
    --secondary-foreground: 340 50% 20%;
    --muted: 340 50% 20%;
    --muted-foreground: 0 0% 100%;
    --accent: 340 82% 52%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 340 50% 25%;
    --input: 340 50% 25%;
    --ring: 340 82% 52%;
    --sidebar-background: 340 50% 15%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 340 82% 52%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 340 50% 20%;
    --sidebar-accent-foreground: 340 82% 52%;
    --sidebar-border: 340 50% 25%;
    --sidebar-ring: 340 82% 52%;
    --hud-glow: 0 0 25px hsla(340, 82%, 52%, 0.4);
    --radius: 1rem;
  }

  .theme-stpatricks {
    --background: 120 60% 10%;
    --foreground: 0 0% 100%;
    --card: 120 60% 15%;
    --card-foreground: 0 0% 100%;
    --popover: 120 60% 15%;
    --popover-foreground: 0 0% 100%;
    --primary: 120 60% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 45 93% 47%;
    --secondary-foreground: 120 60% 15%;
    --muted: 120 60% 20%;
    --muted-foreground: 0 0% 100%;
    --accent: 45 93% 47%;
    --accent-foreground: 120 60% 15%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 120 60% 25%;
    --input: 120 60% 25%;
    --ring: 120 60% 40%;
    --sidebar-background: 120 60% 15%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 120 60% 40%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 120 60% 20%;
    --sidebar-accent-foreground: 120 60% 40%;
    --sidebar-border: 120 60% 25%;
    --sidebar-ring: 120 60% 40%;
    --hud-glow: 0 0 25px hsla(120, 60%, 40%, 0.4);
    --radius: 0.5rem;
  }

  .theme-thanksgiving {
    --background: 20 60% 10%;
    --foreground: 0 0% 100%;
    --card: 20 60% 15%;
    --card-foreground: 0 0% 100%;
    --popover: 20 60% 15%;
    --popover-foreground: 0 0% 100%;
    --primary: 20 80% 45%;
    --primary-foreground: 0 0% 100%;
    --secondary: 40 60% 40%;
    --secondary-foreground: 0 0% 100%;
    --muted: 20 60% 20%;
    --muted-foreground: 0 0% 100%;
    --accent: 10 70% 45%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 20 60% 25%;
    --input: 20 60% 25%;
    --ring: 20 80% 45%;
    --sidebar-background: 20 60% 15%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 20 80% 45%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 20 60% 20%;
    --sidebar-accent-foreground: 20 80% 45%;
    --sidebar-border: 20 60% 25%;
    --sidebar-ring: 20 80% 45%;
    --hud-glow: 0 0 25px hsla(20, 80%, 45%, 0.4);
    --radius: 0.5rem;
  }

  .theme-cny {
    --background: 0 80% 15%;
    --foreground: 45 93% 47%; /* Gold */
    --card: 0 80% 20%;
    --card-foreground: 45 93% 47%;
    --popover: 0 80% 20%;
    --popover-foreground: 45 93% 47%;
    --primary: 348 83% 47%; /* Red */
    --primary-foreground: 0 0% 100%;
    --secondary: 45 93% 47%;
    --secondary-foreground: 0 80% 20%;
    --muted: 0 80% 20%;
    --muted-foreground: 0 0% 100%;
    --accent: 45 93% 47%;
    --accent-foreground: 0 80% 20%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 0 80% 25%;
    --input: 0 80% 25%;
    --ring: 348 83% 47%;
    --sidebar-background: 0 80% 20%;
    --sidebar-foreground: 45 93% 47%;
    --sidebar-primary: 348 83% 47%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 80% 20%;
    --sidebar-accent-foreground: 45 93% 47%;
    --sidebar-border: 0 80% 25%;
    --sidebar-ring: 348 83% 47%;
    --hud-glow: 0 0 25px hsla(45, 93%, 47%, 0.4);
    --radius: 0.5rem;
  }

  .theme-memorial {
    --background: 222 47% 11%;
    --foreground: 0 0% 100%;
    --card: 222 47% 15%;
    --card-foreground: 0 0% 100%;
    --popover: 222 47% 15%;
    --popover-foreground: 0 0% 100%;
    --primary: 355 78% 56%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 100% 50%;
    --secondary-foreground: 0 0% 100%;
    --muted: 222 47% 20%;
    --muted-foreground: 0 0% 100%;
    --accent: 355 78% 56%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 222 47% 25%;
    --input: 222 47% 25%;
    --ring: 355 78% 56%;
    --sidebar-background: 222 47% 15%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 355 78% 56%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 47% 20%;
    --sidebar-accent-foreground: 355 78% 56%;
    --sidebar-border: 222 47% 25%;
    --sidebar-ring: 355 78% 56%;
    --hud-glow: 0 0 25px hsla(355, 78%, 56%, 0.4);
    --radius: 0.25rem;
  }

  .theme-newyears {
    --background: 240 10% 4%;
    --foreground: 45 93% 47%;
    --card: 240 10% 8%;
    --card-foreground: 45 93% 47%;
    --popover: 240 10% 8%;
    --popover-foreground: 45 93% 47%;
    --primary: 45 93% 47%;
    --primary-foreground: 240 10% 4%;
    --secondary: 240 10% 15%;
    --secondary-foreground: 45 93% 47%;
    --muted: 240 10% 15%;
    --muted-foreground: 0 0% 100%;
    --accent: 45 93% 47%;
    --accent-foreground: 240 10% 4%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 240 10% 20%;
    --input: 240 10% 20%;
    --ring: 45 93% 47%;
    --sidebar-background: 240 10% 8%;
    --sidebar-foreground: 45 93% 47%;
    --sidebar-primary: 45 93% 47%;
    --sidebar-primary-foreground: 240 10% 4%;
    --sidebar-accent: 240 10% 15%;
    --sidebar-accent-foreground: 45 93% 47%;
    --sidebar-border: 240 10% 20%;
    --sidebar-ring: 45 93% 47%;
    --hud-glow: 0 0 25px hsla(45, 93%, 47%, 0.4);
    --radius: 0.5rem;
  }

  .theme-4th-july {
    --background: 222 47% 11%;
    --foreground: 0 0% 100%;
    --card: 222 47% 15%;
    --card-foreground: 0 0% 100%;
    --popover: 222 47% 15%;
    --popover-foreground: 0 0% 100%;
    --primary: 355 78% 56%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 100% 50%;
    --secondary-foreground: 0 0% 100%;
    --muted: 222 47% 20%;
    --muted-foreground: 0 0% 100%;
    --accent: 355 78% 56%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 222 47% 25%;
    --input: 222 47% 25%;
    --ring: 355 78% 56%;
    --sidebar-background: 222 47% 15%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 355 78% 56%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 222 47% 20%;
    --sidebar-accent-foreground: 355 78% 56%;
    --sidebar-border: 222 47% 25%;
    --sidebar-ring: 355 78% 56%;
    --hud-glow: 0 0 25px hsla(355, 78%, 56%, 0.4);
    --radius: 0.25rem;
  }
  
  [class*="theme-f1-"] {
    --background: 0 0% 5%;
    --foreground: 0 0% 100%;
    --card: 0 0% 10%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 10%;
    --popover-foreground: 0 0% 100%;
    --primary: 355 78% 56%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 20%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 100%;
    --accent: 355 78% 56%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 0 0% 20%;
    --input: 0 0% 20%;
    --ring: 355 78% 56%;
    --sidebar-background: 0 0% 10%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 355 78% 56%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 15%;
    --sidebar-accent-foreground: 355 78% 56%;
    --sidebar-border: 0 0% 20%;
    --sidebar-ring: 355 78% 56%;
    --hud-glow: 0 0 25px hsla(355, 78%, 56%, 0.4);
    --radius: 0.25rem;
  }

  .theme-wrexham-stadium,
  .theme-wrexham-graphic,
  .theme-wrexham-player {
    --background: 0 0% 5%;
    --foreground: 0 0% 100%;
    --card: 0 0% 10%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 10%;
    --popover-foreground: 0 0% 100%;
    --primary: 355 78% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 20%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 100%;
    --accent: 355 78% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 0 0% 20%;
    --input: 0 0% 20%;
    --ring: 355 78% 50%;
    --sidebar-background: 0 0% 10%;
    --sidebar-foreground: 0 0% 100%;
    --sidebar-primary: 355 78% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 15%;
    --sidebar-accent-foreground: 355 78% 50%;
    --sidebar-border: 0 0% 20%;
    --sidebar-ring: 355 78% 50%;
    --hud-glow: 0 0 25px hsla(355, 78%, 50%, 0.4);
    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  @keyframes electric-surge {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(0,255,255,0.6)) drop-shadow(0 0 30px rgba(0,255,255,0.4)); }
    5%, 7% { filter: drop-shadow(0 0 25px rgba(0,255,255,0.9)) drop-shadow(0 0 50px rgba(255,255,255,0.8)) brightness(1.3); }
    10%, 12% { filter: drop-shadow(0 0 10px rgba(0,255,255,0.4)); }
    15%, 50% { filter: drop-shadow(0 0 15px rgba(0,255,255,0.6)) drop-shadow(0 0 30px rgba(0,255,255,0.4)); }
  }

  .animate-electric-surge {
    animation: electric-surge 3s infinite;
  }

  @keyframes fly-through-code {
    0% { transform: translate(0, 0) scale(0.1); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(5); opacity: 0; }
  }

  @keyframes light-wall {
    0% { stroke-dashoffset: 120; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { stroke-dashoffset: -20; opacity: 0; }
  }

  .animate-light-wall {
    animation: light-wall 6s linear infinite;
    stroke-dasharray: 20 100;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}