.elementor-kit-11{--e-global-color-primary:#0F172A;--e-global-color-secondary:#FF6B00;--e-global-color-text:#7A7A7A;--e-global-color-accent:#22C55E;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-11 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */@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 {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;

    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;

    --primary: 222 47% 11%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;

    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;

    --accent: 258 90% 66%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 222 47% 11%;

    --radius: 0.75rem;

    /* Karaoke Brand Colors */
    --brand-orange: 25 100% 50%;
    --brand-orange-light: 25 100% 60%;
    --brand-blue: 222 47% 11%;
    --brand-green: 142 71% 45%;
    --brand-green-light: 142 71% 55%;
    --brand-purple: 258 90% 66%;
    --brand-purple-light: 258 90% 76%;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, hsl(222 47% 11%) 0%, hsl(258 90% 66% / 0.9) 100%);
    --gradient-orange: linear-gradient(135deg, hsl(25 100% 50%) 0%, hsl(25 100% 60%) 100%);
    --gradient-purple: linear-gradient(135deg, hsl(258 90% 66%) 0%, hsl(258 90% 76%) 100%);
    
    /* Shadows */
    --shadow-glow-orange: 0 10px 40px hsl(25 100% 50% / 0.3);
    --shadow-glow-purple: 0 10px 40px hsl(258 90% 66% / 0.3);
    --shadow-elegant: 0 20px 60px hsl(222 47% 11% / 0.15);

    /* Animations */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .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: 0 0% 100%;
    --primary-foreground: 222 47% 11%;

    --secondary: 217 33% 18%;
    --secondary-foreground: 0 0% 100%;

    --muted: 217 33% 18%;
    --muted-foreground: 215 20% 65%;

    --accent: 258 90% 66%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 0 0% 100%;

    --border: 217 33% 18%;
    --input: 217 33% 18%;
    --ring: 258 90% 66%;
  }
}

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

  body {
    @apply bg-background text-foreground;
  }
}/* End custom CSS */