/* Material Design 3 Design-Tokens (Baseline-Purple-Schema, angelehnt an die Markenfarbe
   aus invoice.html). Hell- und Dunkelmodus ueber [data-theme] und prefers-color-scheme. */

:root,
:root[data-theme='light'] {
    --md-sys-color-primary: #6750a4;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #e9ddff;
    --md-sys-color-on-primary-container: #250a5c;
    --md-sys-color-secondary: #625b71;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: #e8def8;
    --md-sys-color-on-secondary-container: #1e192b;
    --md-sys-color-tertiary: #7d5260;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ffd9e3;
    --md-sys-color-on-tertiary-container: #31101d;
    --md-sys-color-error: #b3261e;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #f9dedc;
    --md-sys-color-on-error-container: #410e0b;
    --md-sys-color-background: #fffbff;
    --md-sys-color-on-background: #1c1b1f;
    --md-sys-color-surface: #fffbff;
    --md-sys-color-on-surface: #1c1b1f;
    --md-sys-color-surface-variant: #e7e0eb;
    --md-sys-color-on-surface-variant: #49454e;
    --md-sys-color-outline: #79747e;
    --md-sys-color-outline-variant: #cac4d0;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-inverse-surface: #313033;
    --md-sys-color-inverse-on-surface: #f4eff4;
    --md-sys-color-inverse-primary: #d0bcff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f7f2fa;
    --md-sys-color-surface-container: #f1ecf4;
    --md-sys-color-surface-container-high: #ece6f0;
    --md-sys-color-surface-container-highest: #e6e0e9;
    color-scheme: light;
}

:root[data-theme='dark'] {
    --md-sys-color-primary: #d0bcff;
    --md-sys-color-on-primary: #381e72;
    --md-sys-color-primary-container: #4f378b;
    --md-sys-color-on-primary-container: #e9ddff;
    --md-sys-color-secondary: #ccc2dc;
    --md-sys-color-on-secondary: #332d41;
    --md-sys-color-secondary-container: #4a4458;
    --md-sys-color-on-secondary-container: #e8def8;
    --md-sys-color-tertiary: #efb8c8;
    --md-sys-color-on-tertiary: #492532;
    --md-sys-color-tertiary-container: #633b48;
    --md-sys-color-on-tertiary-container: #ffd9e3;
    --md-sys-color-error: #f2b8b5;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8c1d18;
    --md-sys-color-on-error-container: #f9dedc;
    --md-sys-color-background: #1c1b1f;
    --md-sys-color-on-background: #e6e1e5;
    --md-sys-color-surface: #1c1b1f;
    --md-sys-color-on-surface: #e6e1e5;
    --md-sys-color-surface-variant: #49454e;
    --md-sys-color-on-surface-variant: #cac4d0;
    --md-sys-color-outline: #938f99;
    --md-sys-color-outline-variant: #49454e;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;
    --md-sys-color-inverse-surface: #e6e1e5;
    --md-sys-color-inverse-on-surface: #313033;
    --md-sys-color-inverse-primary: #6750a4;
    --md-sys-color-surface-container-lowest: #0f0d13;
    --md-sys-color-surface-container-low: #1d1b20;
    --md-sys-color-surface-container: #211f26;
    --md-sys-color-surface-container-high: #2b2930;
    --md-sys-color-surface-container-highest: #36343b;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']):not([data-theme='dark']) {
        --md-sys-color-primary: #d0bcff;
        --md-sys-color-on-primary: #381e72;
        --md-sys-color-primary-container: #4f378b;
        --md-sys-color-on-primary-container: #e9ddff;
        --md-sys-color-secondary: #ccc2dc;
        --md-sys-color-on-secondary: #332d41;
        --md-sys-color-secondary-container: #4a4458;
        --md-sys-color-on-secondary-container: #e8def8;
        --md-sys-color-tertiary: #efb8c8;
        --md-sys-color-on-tertiary: #492532;
        --md-sys-color-tertiary-container: #633b48;
        --md-sys-color-on-tertiary-container: #ffd9e3;
        --md-sys-color-error: #f2b8b5;
        --md-sys-color-on-error: #601410;
        --md-sys-color-error-container: #8c1d18;
        --md-sys-color-on-error-container: #f9dedc;
        --md-sys-color-background: #1c1b1f;
        --md-sys-color-on-background: #e6e1e5;
        --md-sys-color-surface: #1c1b1f;
        --md-sys-color-on-surface: #e6e1e5;
        --md-sys-color-surface-variant: #49454e;
        --md-sys-color-on-surface-variant: #cac4d0;
        --md-sys-color-outline: #938f99;
        --md-sys-color-outline-variant: #49454e;
        --md-sys-color-shadow: #000000;
        --md-sys-color-scrim: #000000;
        --md-sys-color-inverse-surface: #e6e1e5;
        --md-sys-color-inverse-on-surface: #313033;
        --md-sys-color-inverse-primary: #6750a4;
        --md-sys-color-surface-container-lowest: #0f0d13;
        --md-sys-color-surface-container-low: #1d1b20;
        --md-sys-color-surface-container: #211f26;
        --md-sys-color-surface-container-high: #2b2930;
        --md-sys-color-surface-container-highest: #36343b;
        color-scheme: dark;
    }
}

:root {
    /* Typografie */
    --md-sys-typescale-font: 'Roboto', system-ui, -apple-system, Segoe UI, sans-serif;

    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-display-large-weight: 400;

    --md-sys-typescale-headline-large-size: 32px;
    --md-sys-typescale-headline-large-line-height: 40px;
    --md-sys-typescale-headline-large-weight: 400;

    --md-sys-typescale-headline-small-size: 24px;
    --md-sys-typescale-headline-small-line-height: 32px;
    --md-sys-typescale-headline-small-weight: 400;

    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-large-line-height: 28px;
    --md-sys-typescale-title-large-weight: 500;

    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-title-medium-line-height: 24px;
    --md-sys-typescale-title-medium-weight: 500;
    --md-sys-typescale-title-medium-tracking: 0.15px;

    --md-sys-typescale-title-small-size: 14px;
    --md-sys-typescale-title-small-line-height: 20px;
    --md-sys-typescale-title-small-weight: 500;
    --md-sys-typescale-title-small-tracking: 0.1px;

    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-large-weight: 400;
    --md-sys-typescale-body-large-tracking: 0.5px;

    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-medium-weight: 400;
    --md-sys-typescale-body-medium-tracking: 0.25px;

    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-line-height: 20px;
    --md-sys-typescale-label-large-weight: 500;
    --md-sys-typescale-label-large-tracking: 0.1px;

    --md-sys-typescale-label-medium-size: 12px;
    --md-sys-typescale-label-medium-line-height: 16px;
    --md-sys-typescale-label-medium-weight: 500;
    --md-sys-typescale-label-medium-tracking: 0.5px;

    /* Shape */
    --md-sys-shape-corner-none: 0px;
    --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;

    /* Elevation (Box-Shadows analog zu M3-Levels 0-5) */
    --md-sys-elevation-level0: none;
    --md-sys-elevation-level1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level3: 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level4: 0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-level5: 0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);

    /* State-Layer-Opazitaeten */
    --md-sys-state-hover-opacity: 0.08;
    --md-sys-state-focus-opacity: 0.12;
    --md-sys-state-pressed-opacity: 0.12;
    --md-sys-state-dragged-opacity: 0.16;
    --md-sys-state-disabled-opacity: 0.38;

    /* Motion */
    --md-sys-motion-duration-short: 150ms;
    --md-sys-motion-duration-medium: 250ms;
    --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
}