/* Material 3 design tokens (light scheme only).
 * Generated from a primary color of #6750A4 (Material baseline).
 * Replace with output from https://m3.material.io/theme-builder when brand color is finalized.
 *
 * Custom widgets (date picker, snackbar, nav drawer, data table) MUST read these tokens
 * via var(--md-sys-...) so they stay visually consistent with @material/web components.
 *
 * Dark mode is intentionally off: operators pick a single brand color, and
 * mixing it with M3's dark surfaces produced unreadable contrast on phones
 * with auto dark mode. Reintroduce when operator settings carry a paired
 * dark palette.
 */
:root {
    color-scheme: light;

    /* Primary */
    --md-sys-color-primary: #6750A4;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-on-primary-container: #21005E;

    /* Secondary */
    --md-sys-color-secondary: #625B71;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1E192B;

    /* Tertiary */
    --md-sys-color-tertiary: #7E5260;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #FFD9E3;
    --md-sys-color-on-tertiary-container: #31101D;

    /* Error */
    --md-sys-color-error: #B3261E;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #F9DEDC;
    --md-sys-color-on-error-container: #410E0B;

    /* Surface */
    --md-sys-color-surface: #FEF7FF;
    --md-sys-color-on-surface: #1D1B20;
    --md-sys-color-surface-variant: #E7E0EC;
    --md-sys-color-on-surface-variant: #49454F;
    --md-sys-color-surface-container-lowest: #FFFFFF;
    --md-sys-color-surface-container-low: #F7F2FA;
    --md-sys-color-surface-container: #F3EDF7;
    --md-sys-color-surface-container-high: #ECE6F0;
    --md-sys-color-surface-container-highest: #E6E0E9;
    --md-sys-color-outline: #79747E;
    --md-sys-color-outline-variant: #CAC4D0;

    /* Inverse (used by snackbar, etc.) */
    --md-sys-color-inverse-surface: #322F35;
    --md-sys-color-inverse-on-surface: #F5EFF7;
    --md-sys-color-inverse-primary: #D0BCFF;

    /* Shape */
    --md-sys-shape-corner-none: 0;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;

    /* Typescale. Roboto is the M3 spec typeface — loaded from Google Fonts
     * in base.html.twig. Falls back to system-ui if offline. Sizes come
     * from the M3 baseline scale (m3.material.io/styles/typography); the
     * landing page uses several of them, so the full set is registered. */
    --md-sys-typescale-body-large-font: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
    --md-sys-typescale-headline-medium-size: 28px;
    --md-sys-typescale-headline-medium-weight: 500;
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-large-weight: 500;
    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-title-medium-weight: 500;
    --md-sys-typescale-title-small-size: 14px;
    --md-sys-typescale-title-small-weight: 500;
    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-large-weight: 400;
    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-body-medium-weight: 400;
    --md-sys-typescale-body-small-size: 12px;
    --md-sys-typescale-body-small-weight: 400;
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-weight: 500;
    --md-sys-typescale-label-medium-size: 12px;
    --md-sys-typescale-label-medium-weight: 500;
    --md-sys-typescale-label-small-size: 11px;
    --md-sys-typescale-label-small-weight: 500;

    /* Elevation (box-shadow ladder) */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level3: 0 1px 3px rgba(0, 0, 0, 0.30), 0 4px 8px 3px rgba(0, 0, 0, 0.15);

    /* Motion */
    --md-sys-motion-duration-short2: 100ms;
    --md-sys-motion-duration-medium2: 300ms;
    --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
}