/**
 * ============================================================================
 * SENTINEL COMMAND - CSS CUSTOM PROPERTIES (VARIABLES)
 * ============================================================================
 * 
 * This file contains all CSS custom properties for the Bit Sentinel theme.
 * These variables control the entire color scheme, spacing, and visual effects.
 * 
 * USAGE:
 * - Colors use HSL values without the hsl() wrapper for flexibility
 * - Use like: background-color: hsl(var(--primary));
 * - Use with opacity: background-color: hsl(var(--primary) / 0.5);
 * 
 * COLOR SYSTEM:
 * - Primary (Sentinel Blue): Defensive operations, trust, security
 * - Secondary (Sentinel Red): Offensive operations, alerts, urgency
 * - Tertiary (Sentinel Cyan): Education, training, growth
 * 
 * ============================================================================
 */

:root {
    /* ========================================================================
     * CORE THEME COLORS
     * ======================================================================== */
    
    /* Background & Foreground */
    --background: 220 14% 5%;           /* Near-black dark theme base */
    --foreground: 210 20% 95%;          /* Off-white text */
    
    /* Card & Surface Colors */
    --card: 220 15% 8%;                 /* Slightly lighter than background */
    --card-foreground: 210 20% 95%;
    --card-elevated: 220 14% 10%;       /* For elevated cards */
    
    /* Popover & Dropdown */
    --popover: 220 15% 8%;
    --popover-foreground: 210 20% 95%;
    
    /* ========================================================================
     * BRAND COLORS - SENTINEL PALETTE
     * ======================================================================== */
    
    /* Primary - Sentinel Blue (Defensive/Trust) */
    --primary: 196 68% 66%;             /* #6DC4E3 */
    --primary-foreground: 220 14% 5%;   /* Dark text on primary */
    --primary-glow: 196 68% 66%;
    
    /* Secondary - Sentinel Red (Offensive/Alert) */
    --secondary: 357 90% 58%;           /* #F4343D */
    --secondary-foreground: 210 20% 98%;
    --secondary-glow: 357 90% 58%;
    
    /* Tertiary - Sentinel Cyan (Education/Growth) */
    --tertiary: 196 62% 54%;            /* #41ACD2 */
    --tertiary-foreground: 220 14% 5%;
    --tertiary-glow: 196 62% 54%;
    
    /* ========================================================================
     * UI ELEMENT COLORS
     * ======================================================================== */
    
    /* Muted - Subtle backgrounds and text */
    --muted: 220 14% 15%;
    --muted-foreground: 215 20% 55%;
    
    /* Accent - Interactive element highlights */
    --accent: 220 14% 12%;
    --accent-foreground: 210 20% 95%;
    
    /* Destructive - Errors and warnings */
    --destructive: 357 90% 58%;
    --destructive-foreground: 210 20% 98%;
    
    /* ========================================================================
     * BORDER & INPUT COLORS
     * ======================================================================== */
    
    --border: 220 14% 18%;
    --border-glow: 196 68% 66%;
    --input: 220 14% 12%;
    --ring: 196 68% 66%;                /* Focus ring color */
    
    /* ========================================================================
     * SPACING & SIZING
     * ======================================================================== */
    
    --radius: 0.5rem;                   /* Base border radius */
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    
    /* ========================================================================
     * GLASSMORPHISM EFFECTS
     * ======================================================================== */
    
    --glass-bg: 220 14% 8% / 0.8;       /* Semi-transparent background */
    --glass-border: 220 14% 25% / 0.3;  /* Subtle border */
    --glass-blur: 20px;                 /* Backdrop blur amount */
    
    /* ========================================================================
     * GRADIENTS
     * ======================================================================== */
    
    --gradient-red: linear-gradient(135deg, hsl(357 90% 58%), hsl(357 90% 45%));
    --gradient-blue: linear-gradient(135deg, hsl(196 68% 66%), hsl(196 68% 50%));
    --gradient-cyan: linear-gradient(135deg, hsl(196 62% 54%), hsl(196 62% 40%));
    --gradient-dark: linear-gradient(180deg, hsl(220 14% 8%), hsl(220 14% 5%));
    
    /* ========================================================================
     * SHADOWS & GLOWS
     * ======================================================================== */
    
    --shadow-red: 0 0 40px -10px hsl(357 90% 58% / 0.5);
    --shadow-blue: 0 0 40px -10px hsl(196 68% 66% / 0.5);
    --shadow-cyan: 0 0 40px -10px hsl(196 62% 54% / 0.5);
    --shadow-elevated: 0 25px 50px -12px hsl(220 14% 2% / 0.8);
    
    /* ========================================================================
     * SIDEBAR COLORS (for admin/dashboard areas)
     * ======================================================================== */
    
    --sidebar-background: 220 14% 8%;
    --sidebar-foreground: 210 20% 95%;
    --sidebar-primary: 196 68% 66%;
    --sidebar-primary-foreground: 220 14% 5%;
    --sidebar-accent: 220 14% 12%;
    --sidebar-accent-foreground: 210 20% 95%;
    --sidebar-border: 220 14% 18%;
    --sidebar-ring: 196 68% 66%;
    
    /* ========================================================================
     * TYPOGRAPHY
     * ======================================================================== */
    
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', monospace;
    
    /* ========================================================================
     * Z-INDEX SCALE
     * ======================================================================== */
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ============================================================================
 * COMPUTED COLORS - Named Sentinel colors
 * These use the same HSL values but provide semantic names
 * ============================================================================ */

:root {
    /* Direct color values for utility classes */
    --sentinel-blue: hsl(196 68% 66%);
    --sentinel-red: hsl(357 90% 58%);
    --sentinel-cyan: hsl(196 62% 54%);
    --sentinel-dark: hsl(220 14% 5%);
    
    /* Status colors */
    --color-success: hsl(142 76% 36%);
    --color-warning: hsl(38 92% 50%);
    --color-error: hsl(357 90% 58%);
    --color-info: hsl(196 68% 66%);
}