/* ============================================================
   BRAND VARIABLES - COLORS IN HSL FORMAT 
   ============================================================ */
:root {
    --background: 220 20% 4%;          /* Dark background color for the app */
    --foreground: 180 10% 92%;         /* Light foreground color for text */

    --card: 220 15% 8%;                 /* Background color for cards and containers */
    --card-foreground: 180 10% 92%;     /* Foreground color for text on cards */

    --popover: 220 15% 8%;             /* Background color for popovers and dropdowns */
    --popover-foreground: 180 10% 92%; /* Foreground color for text in popovers */ 

    --primary: 174 100% 42%;           /* Primary brand color for buttons and highlights */
    --primary-foreground: 220 20% 4%;  /* Foreground color for text on primary elements */

    --secondary: 220 12% 14%;            /* Secondary brand color for less prominent buttons and elements */
    --secondary-foreground: 180 10% 85%; /* Foreground color for text on secondary elements */

    --muted: 220 12% 12%;              /* Muted background color for disabled elements and less important UI components */
    --muted-foreground: 215 10% 50%;   /* Foreground color for text on muted elements */

    --accent: 174 80% 35%;             /* Accent brand color for decorative elements */
    --accent-foreground: 180 10% 95%;  /* Foreground color for text on accent elements */

    --destructive: 0 84.2% 60.2%;          /* Color for destructive actions like delete buttons */
    --destructive-foreground: 210 40% 98%; /* Foreground color for text on destructive elements */

    --border: 220 12% 16%;                 /* Border color for dividers and outlines */
    --input: 220 12% 16%;                  /* Background color for input fields */
    --ring: 174 100% 42%;                  /* Color for focus rings and highlights */

    --radius: 0.75rem;                     /* Base border radius for rounded corners */

    --sidebar-background: 220 15% 6%;    /* Background color for the sidebar */
    --sidebar-foreground: 180 10% 85%;     /* Foreground color for text in the sidebar */
    --sidebar-primary: 174 100% 42%;       /* Primary color for active elements in the sidebar */
    --sidebar-primary-foreground: 220 20% 4%; /* Foreground color for text on active elements in the sidebar */
    --sidebar-accent: 220 12% 12%;         /* Accent color for decorative elements in the sidebar */
    --sidebar-accent-foreground: 180 10% 85%; /* Foreground color for text on accent elements in the sidebar */
    --sidebar-border: 220 12% 14%;         /* Border color for dividers in the sidebar */
    --sidebar-ring: 174 100% 42%;          /* Color for focus rings in the sidebar */

    --gradient-primary: linear-gradient(135deg, hsl(174 100% 42%), hsl(190 100% 50%)); /* Gradient for primary elements like buttons and highlights */
    --gradient-hero: linear-gradient(135deg, hsl(174 100% 42%) 0%, hsl(190 80% 45%) 50%, hsl(220 60% 20%) 100%); /* Gradient for hero sections */
    --gradient-dark: linear-gradient(180deg, hsl(220 20% 6%) 0%, hsl(220 20% 2%) 100%); /* Gradient for dark backgrounds */
    --shadow-glow: 0 0 40px hsl(174 100% 42% / 0.15); /* Subtle glow effect for interactive elements */
    --shadow-card: 0 4px 24px hsl(0 0% 0% / 0.4); /* Shadow for cards and containers */
}