:root {
    /* Colors - Corporate Theme (Navy & Slate) */
    --primary-color: #0f172a; /* Slate 900 (Deep Navy) */
    --primary-hover: #1e293b; /* Slate 800 */
    --primary-light: #e2e8f0; /* Slate 200 */

    --secondary-color: #64748b; /* Slate 500 */
    
    --accent-color: #3b82f6; /* Blue 500 (Interactive elements) */

    --success-color: #10b981; /* Emerald 500 */
    --danger-color: #ef4444; /* Red 500 */
    --warning-color: #f59e0b; /* Amber 500 */
    --info-color: #0ea5e9; /* Sky 500 */

    --bg-body: #f8fafc; /* Slate 50 (Clean professional background) */
    --bg-white: #ffffff;
    --bg-sidebar: #0f172a; /* Matches primary (Deep Navy) */
    
    --text-sidebar: #94a3b8; /* Slate 400 */
    --text-sidebar-hover: #ffffff;

    --text-main: #1e293b; /* Slate 800 */
    --text-light: #64748b; /* Slate 500 */
    --border-color: #e2e8f0; /* Slate 200 */

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius - Professional/Tight */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    /* Shadows - Soft/Corporate */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}