static/css/variables.css

/* === AEGIS-AI Design System: CSS Variables & Design Tokens === */
:root {
    /* Color Palette - Obsidian Dark Theme */
    --bg-dark: #030303;
    --bg-panel: rgba(10, 10, 14, 0.75);
    --bg-glass: rgba(13, 13, 18, 0.85);
    --bg-glass-hover: rgba(25, 25, 35, 0.9);
    
    /* Borders & Outlines */
    --border-glow: rgba(0, 240, 255, 0.15);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-active: #00F0FF;
    
    /* Text Colors */
    --text-main: #f0f0f0;
    --text-muted: #888888;
    --text-dim: #555555;
    
    /* Accents & Status Indicators */
    --accent: #00F0FF;
    --accent-glow: rgba(0, 240, 255, 0.4);
    --accent-dim: rgba(0, 240, 255, 0.1);
    
    --danger: #FF2A55;
    --danger-glow: rgba(255, 42, 85, 0.4);
    --danger-dim: rgba(255, 42, 85, 0.1);
    
    --warning: #ffcc00;
    --warning-glow: rgba(255, 204, 0, 0.4);
    
    --success: #00ffaa;
    --success-glow: rgba(0, 255, 170, 0.4);
    --success-dim: rgba(0, 255, 170, 0.1);
    
    /* Typography */
    --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-code: 'Space Grotesk', monospace;
    
    /* Transitions & Shadows */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.1, 0.8, 0.2, 1);
    
    --shadow-glass: 0 20px 40px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 30px 60px rgba(0, 0, 0, 0.8);
    --shadow-glow-cyan: 0 0 20px rgba(0, 240, 255, 0.25);
    --shadow-glow-red: 0 0 20px rgba(255, 42, 85, 0.25);
}