:root
{
    /*
    ============================================================================
    BRAND COLOR PALETTE
    ============================================================================
    Core login colours following the metallic tech theme.
    */
    --primary-color: rgb(0, 71, 171);    /* Main brand Cobalt Blue */
    --secondary-color: #9baff5;          /* Lighter purple/blue for hover states and accents */

    --user-copper: #613e35;              /* Primary copper - main brand color */
    --user-copper-light: #cc8877;        /* Light copper - highlights and accents */
    --user-copper-dark: #28170b;         /* Dark copper - depth and shadows */
    --user-silver-light: #E5E5E5;        /* Light silver - clean backgrounds */
    --user-platinum: #e5e4e2;            /* Platinum - premium surface color */
    --user-gray: #909090;                /* Medium gray - neutral elements */
    --user-gray-blue: #b8c2d3;           /* Blue-gray - subtle tech accents */
    --user-gray-beige: #d3c7b8;          /* Warm gray - organic transitions */

    --test-colour: #dc3545;

    /*
    ============================================================================
    TECHNOLOGY ACCENT COLOURS
    ============================================================================
    High-tech accent colours for IoT interfaces, data visualization, and
    interactive elements. These create the futuristic aesthetic that
    communicates advanced technology and innovation.
    */
    --user-tech-glow: #00d4ff;           /* Cyan glow - primary tech accent */
    --user-data-stream: #39ff14;         /* Matrix green - data flow indicators */
    --user-neural-purple: #8a2be2;       /* Neural purple - AI/ML connections */
    --user-tech-purple: #ff00ff;         /* Magenta - high-energy accents */
    --user-tech-yellow: #eeff00;         /* Electric yellow - warning/energy */
    --whatsapp-green: #25D366;
    /*
    ============================================================================
    TYPOGRAPHY COLOURS
    ============================================================================
    Text color schemes optimized for readability across light and dark
    backgrounds while maintaining brand consistency and accessibility.
    */
    --user-text-light: #f5f5f5;             /* Light text for dark backgrounds */
    --user-text-dark: #242424;              /* Dark text for light backgrounds */

    /*
    ============================================================================
    NOTIFICATION & STATUS COLOURS
    ============================================================================
    Semantic colours for system states, user feedback, and status indicators.
    These follow web accessibility guidelines for color contrast and meaning.
    */
    --error-color: #dc3545;             /* Error states and critical alerts */
    --error-background: #f8d7da;
    --warning-color: #ffc107;           /* Warning states and caution indicators */
    --success-color:#00c851;			 /* Success alerts */
    --success-background: #c3e6cb;

    /*
    ============================================================================
    AMBIENT GLOW EFFECTS
    ============================================================================
    Subtle lighting effects for hover states, focus indicators, and ambient
    UI enhancement. Creates depth and interactivity without overwhelming content.
    */
    --error-glow: rgba(220, 53, 69, 0.6);      	/* Red error state glow */
    --tech-purple-glow: rgba(255, 0, 255, 0.3); 	/* Purple accent glow */
    --tech-yellow-glow: rgba(238, 255, 0, 0.2); 	/* Yellow energy glow */
    --tech-blue-glow: rgba(0, 213, 255, 0.3); 		/* Blue energy glow */
    --tech-platinum-glow: rgba(229, 228, 226, 0.5);   /* Platinum Energy glow */

    /*
    ============================================================================
    USER INTERFACE COLOUR SCHEME
    ============================================================================
    UI enhancement. Creates depth and interactivity without overwhelming content.
    */
    --login-border-box: rgba(0, 71, 171, 0.75);    /* Turquoise glow */
    --input-field-border: #667eea;                 /* Light blue */
    --input-field-shadow: rgba(102,126,234,0.1);   /* denim */
    --login-button-std: #667eea;                   /* Light blue */
    --login_button-hover: #002aff;                 /* Light blue */
    --loading-spinner: #667eea;                    /* Light blue */

    /*
    ============================================================================
    QUANTUM BACKGROUND SYSTEM
    ============================================================================
    Advanced background gradient system for creating distinct visual zones
    while maintaining brand cohesion. Each background serves specific UX purposes.
    */
    --user-dark-bg: rgb(36, 36, 36);                /* Solid dark base color */

    /* Dark quantum background - hero sections and primary dark areas */
    --quantum-dark-bg: linear-gradient(135deg, 
        rgba(15, 15, 15, 0.95), 
        rgba(36, 36, 36, 0.5), 
        rgba(15, 15, 15, 0.95));

    /* Bronze quantum background - premium accent sections and highlights */
    --quantum-bronze-bg: linear-gradient(135deg, 
        rgba(229, 228, 226, 0.08), 
        rgba(97, 62, 53, 0.35),
        rgba(144, 144, 144, 0.1));
    /* Bronze quantum overlay - warm premium ambiance for bronze backgrounds */
    --quantum-bronze-overlay:
        radial-gradient(ellipse 60% 40% at 45% 10%, rgba(97, 62, 53, 0.4) 0%, transparent 55%),
        radial-gradient(ellipse 90% 70% at 85% 75%, rgba(204, 136, 119, 0.3) 0%, transparent 25%),
        radial-gradient(ellipse 80% 60% at 15% 25%, rgba(97, 62, 53, 0.4) 0%, transparent 25%),
        radial-gradient(ellipse 70% 50% at 75% 40%, rgba(204, 136, 119, 0.3) 0%, transparent 25%);
    /* Dark quantum overlay - cool tech ambiance for dark backgrounds */
    --quantum-dark-overlay: 
        radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 20% 30%, rgba(57, 255, 20, 0.08) 0%, transparent 50%);

    --login-font-family: Tahoma, 'Segoe UI', Helvetica, Arial, system-ui, sans-serif;
}

body 
{
    background: var(--user-dark-bg);
}