/*
 * Material Design 3 design tokens (light + dark). The shell (app.css) and pages
 * reference these variables only — change a brand colour in one place.
 */
:root {
    --md-sys-color-primary: #1e40af;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #e0e7ff;
    --md-sys-color-on-primary-container: #1e1b4b;

    --md-sys-color-secondary: #06b6d4;
    --md-sys-color-on-secondary: #ffffff;

    --md-sys-color-error: #ef4444;
    --md-sys-color-on-error: #ffffff;

    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #0f172a;
    --md-sys-color-surface-variant: #f1f5f9;
    --md-sys-color-on-surface-variant: #475569;
    --md-sys-color-surface-container: #f8fafc;
    --md-sys-color-surface-container-highest: #e2e8f0;

    --md-sys-color-outline: #cbd5e1;
    --md-sys-color-outline-variant: #e2e8f0;

    --md-sys-color-background: #f8fafc;
    --md-sys-color-on-background: #0f172a;

    --md-sys-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --md-sys-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
    --md-sys-elevation-3: 0 6px 12px rgba(0, 0, 0, 0.18), 0 3px 6px rgba(0, 0, 0, 0.12);

    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-full: 9999px;
}

[data-bs-theme="dark"] {
    --md-sys-color-primary: #6897bb;
    --md-sys-color-on-primary: #2b2b2b;
    --md-sys-color-primary-container: #214283;
    --md-sys-color-on-primary-container: #a9b7c6;

    --md-sys-color-error: #bc3f3c;

    --md-sys-color-surface: #2b2b2b;
    --md-sys-color-on-surface: #bbbbbb;
    --md-sys-color-surface-variant: #313335;
    --md-sys-color-on-surface-variant: #a9b7c6;
    --md-sys-color-surface-container: #313335;
    --md-sys-color-surface-container-highest: #4b4f51;

    --md-sys-color-outline: #555555;
    --md-sys-color-outline-variant: #3c3f41;

    --md-sys-color-background: #2b2b2b;
    --md-sys-color-on-background: #bbbbbb;

    --md-sys-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
    --md-sys-elevation-3: 0 6px 12px rgba(0, 0, 0, 0.7), 0 3px 6px rgba(0, 0, 0, 0.5);
}