/* ============================================================================
   CSS VARIABLES - WiFi Kickstart Theme
   Change these to rebrand for other sites (Future Robot, Epic Speed Test, etc)
   ============================================================================ */

:root {
    /* ====== Colors ====== */
    /* Backgrounds */
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --bg-card: rgba(17, 24, 39, 0.6);
    
    /* Accent Colors */
    --accent-blue: #3b82f6;
    --accent-purple: #8b5cf6;
    --accent-cyan: #06b6d4;
    
    /* Text Colors */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    /* UI Elements */
    --border: rgba(148, 163, 184, 0.1);
    --glow: rgba(59, 130, 246, 0.15);
    
    /* Status Colors */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.1);
    --success-border: rgba(34, 197, 94, 0.3);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.1);
    --error-border: rgba(239, 68, 68, 0.3);
    
    /* ====== Typography ====== */
    --font-primary: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* ====== Spacing ====== */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    
    /* ====== Border Radius ====== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 100px;
    
    /* ====== Shadows ====== */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 100px rgba(59, 130, 246, 0.1);
    
    /* ====== Transitions ====== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}