:root {
    /* Color Palette - Dark Mode */
    --bg-main: #0f172a;           /* Dark blue/grey background for content */
    --bg-sidebar: #020617;        /* Very dark sidebar */
    --bg-topbar: #020617;         /* Very dark top bar */
    --card-bg: #1e293b;           /* Dark card background */
    --card-inner: #334155;        /* Lighter inner sections */
    --border-color: #475569;      /* Dark border color */
    --border-hover: #64748b;
    
    /* Text Colors */
    --text-main: #f8fafc;         /* White primary text */
    --text-secondary: #cbd5e1;    /* Light grey secondary text */
    --text-sub: #94a3b8;          /* Muted grey subtext */
    
    /* Text Colors (Dark Sidebar & Topbar) */
    --text-on-dark: #f8fafc;      
    --text-sub-on-dark: #94a3b8;  
    
    /* Brand & Accent Highlights */
    --primary: #0ea5e9;           /* Bright Blue */
    --primary-hover: #0284c7;
    --primary-glow: rgba(14, 165, 233, 0.2);
    
    --success: #10b981;           
    --warning: #f59e0b;           
    --error: #ef4444;             
    
    /* Layout Details */
    --sidebar-width: 260px;       /* Compact sidebar width */
    --header-height: 85px;        /* Increased to accommodate larger logo */
    
    /* Visual Geometry - Extreme Crisp Sharp Edges (Brutalist Tech aesthetic) */
    --radius-sm: 0px;
    --radius-md: 2px;
    --radius-lg: 2px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}