/* css/variables.css */
:root {
    /* --- MD3 Color Tokens (Light Scheme) --- */
    --md-sys-color-primary: #005AC1;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #D8E2FF;
    --md-sys-color-on-primary-container: #001A41;
    
    --md-sys-color-surface: #FEF7FF;
    --md-sys-color-on-surface: #1D1B20;
    --md-sys-color-surface-container: #F3EDF7; /* Used for navigation rail/drawer */
    --md-sys-color-surface-container-low: #F7F2FA;
    
    --md-sys-color-outline: #79747E;
    --md-sys-color-outline-variant: #C4C7C5;

    /* --- Typography Tokens (Roboto) --- */
    --md-sys-typescale-headline-small: 400 24px/32px 'Roboto', sans-serif;
    --md-sys-typescale-headline-medium: 400 28px/36px 'Roboto', sans-serif;
    --md-sys-typescale-body-large: 400 16px/24px 'Roboto', sans-serif;
    --md-sys-typescale-body-medium: 400 14px/20px 'Roboto', sans-serif;
    --md-sys-typescale-label-large: 500 14px/20px 'Roboto', sans-serif;

    /* --- Shape Tokens --- */
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    
    /* --- Layout --- */
    --nav-drawer-width: 300px;
    --header-height: 64px;
}

/* Dark Mode Support (Optional - standard override) */
@media (prefers-color-scheme: dark) {
    :root {
        --md-sys-color-primary: #ADC6FF;
        --md-sys-color-on-primary: #002E69;
        --md-sys-color-primary-container: #004494;
        --md-sys-color-surface: #141218;
        --md-sys-color-on-surface: #E6E1E5;
        --md-sys-color-surface-container: #211F26;
        --md-sys-color-surface-container-low: #1D1B20;
    }
}