:root {
    /* Brand Colors */
    --brand-primary: #425A8B;
    --brand-primary-light: rgba(66, 90, 139, 0.2);
    --brand-secondary: #0ea5e9;

    /* Semantic Colors */
    --success: #00B517;
    --warning: #fd8a14;
    --danger: #F30000;
    --info: #0dcaf0;

    /* Base Layout (Light) */
    --bg-body: #f8f9fa;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;

    /* Text (Light) */
    --fg-main: #4f5d77;
    --fg-title: #292f46;
    --fg-muted: #adb5bd;
    --fg-on-brand: #ffffff;

    /* Borders & Dividers (Light) */
    --border-color: #eee;
    --divider-color: #a6acb3;

    /* Form Elements (Light) */
    --bg-input: #f8f9fa;
    --border-input: transparent;
    --fg-input: #2d3748;

    /* Interactive States */
    --hover-bg: #e9ecef;
    --radius: 12px;
}

[data-theme="dark"] {
    /* Base Layout (Dark) */
    --bg-body: #0b1220;
    --bg-card: #141b2d;
    --bg-sidebar: #141b2d;
    --bg-header: #141b2d;

    /* Text (Dark) */
    --fg-main: #94a3b8;
    --fg-title: #e2e8f0;
    --fg-muted: #64748b;
    --fg-on-brand: #ffffff;

    /* Borders & Dividers (Dark) */
    --border-color: #1f2937;
    --divider-color: #334155;

    /* Form Elements (Dark) */
    --bg-input: #1f2937;
    --border-input: #334155;
    --fg-input: #e2e8f0;

    /* Interactive States */
    --hover-bg: #1e293b;
}

/* Global transitions for theme switching */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}