/* tideup: gemeinsame Design-Tokens (Material 3) für alle Seiten.
   Einzige Stelle mit festen Farbwerten. Hell in :root, dunkel über :root[data-theme="dark"].
   data-theme setzt theme.js im <head> (gespeicherte Wahl oder prefers-color-scheme);
   ohne JavaScript bleibt die Seite hell.
   Nach Änderungen die Versionsnummer in allen <link href="tokens.css?v=…"> erhöhen:
   nginx liefert .css mit "expires 1d" aus. */

:root {
    color-scheme: light;

    /* Farbrollen (Material 3), hell */
    --md-sys-color-primary: #0B57D0;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #D3E3FD;
    --md-sys-color-on-primary-container: #041E49;
    --md-sys-color-secondary-container: #D3E3FD;
    --md-sys-color-on-secondary-container: #041E49;
    --md-sys-color-tertiary: #006A6A;
    --md-sys-color-surface: #FBF8FD;
    --md-sys-color-surface-container-lowest: #FFFFFF;
    --md-sys-color-surface-container-low: #F5F3F7;
    --md-sys-color-surface-container: #F0F3F8;
    --md-sys-color-surface-container-high: #E6EAF0;
    --md-sys-color-surface-container-highest: #E4E2E6;
    --md-sys-color-on-surface: #1F1F1F;
    --md-sys-color-on-surface-variant: #444746;
    --md-sys-color-outline: #747775;
    --md-sys-color-outline-variant: #C4C7C5;
    --md-sys-color-inverse-surface: #303030;
    --md-sys-color-inverse-on-surface: #F2F2F2;
    --md-sys-color-error: #B3261E;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #F9DEDC;
    --md-sys-color-on-error-container: #410E0B;
    /* Ergänzung (keine M3-Rolle): Hinweis "veraltet" */
    --md-sys-color-warning-container: #FFDDB3;
    --md-sys-color-on-warning-container: #5C3C00;
    /* Diagrammfläche: primary mit 8 % Deckkraft */
    --tideup-chart-area: rgba(11, 87, 208, 0.08);

    /* Typeskala (Material 3), System-Font-Stack */
    --md-sys-typescale-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-headline-large-size: 32px;
    --md-sys-typescale-headline-small-size: 24px;
    --md-sys-typescale-headline-small-line-height: 32px;
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-large-line-height: 28px;
    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-title-medium-line-height: 24px;
    --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-tracking: 0.1px;
    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-small-size: 12px;
    --md-sys-typescale-body-small-line-height: 16px;
    --md-sys-typescale-body-small-tracking: 0.4px;
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-line-height: 20px;
    --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-tracking: 0.5px;
    --md-sys-typescale-weight-regular: 400;
    --md-sys-typescale-weight-medium: 500;
    --md-sys-typescale-weight-bold: 700;

    /* Formen (Material 3) */
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-full: 9999px;

    /* State-Layer-Deckkraft (Material 3) */
    --md-sys-state-hover-opacity: 0.08;
    --md-sys-state-focus-opacity: 0.10;
    --md-sys-state-pressed-opacity: 0.10;

    --md-sys-motion-duration-short: 150ms;
    --md-sys-motion-duration-medium: 300ms;
}

/* Farbrollen (Material 3), dunkel: aus denselben Quellfarben per HCT-Tonalpalette abgeleitet
   (primary T80, Container T30, Flächen N4–N22, on-* T90/T20). Nur Tokenwerte, keine Komponenten. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --md-sys-color-primary: #B2C5FF;
    --md-sys-color-on-primary: #002B72;
    --md-sys-color-primary-container: #0040A1;
    --md-sys-color-on-primary-container: #DAE2FF;
    --md-sys-color-secondary-container: #38485D;
    --md-sys-color-on-secondary-container: #D4E4FE;
    --md-sys-color-tertiary: #84D4D3;
    --md-sys-color-surface: #131316;
    --md-sys-color-surface-container-lowest: #0D0E11;
    --md-sys-color-surface-container-low: #1B1B1F;
    --md-sys-color-surface-container: #1F1F23;
    --md-sys-color-surface-container-high: #292A2D;
    --md-sys-color-surface-container-highest: #343438;
    --md-sys-color-on-surface: #E4E2E6;
    --md-sys-color-on-surface-variant: #C5C6D0;
    --md-sys-color-outline: #8F909A;
    --md-sys-color-outline-variant: #45464F;
    --md-sys-color-inverse-surface: #E4E2E6;
    --md-sys-color-inverse-on-surface: #303034;
    --md-sys-color-error: #FFB4AA;
    --md-sys-color-on-error: #690003;
    --md-sys-color-error-container: #910809;
    --md-sys-color-on-error-container: #FFDAD5;
    --md-sys-color-warning-container: #614003;
    --md-sys-color-on-warning-container: #FFDDB1;
    --tideup-chart-area: rgba(178, 197, 255, 0.12);
}