/*
 * Netzmal Designsystem: Farben und globale Designwerte
 * -----------------------------------------------------
 * Komponenten verwenden ausschließlich diese semantischen Variablen.
 * Der Darkmode ändert nur ihre Werte, niemals die Komponentenregeln.
 */

/* Helles Farbschema und gemeinsame Größen */
:root {
    --nm-color-print-text: #000000;
    --nm-color-print-background: #ffffff;
    color-scheme: light;
    --nm-color-page: #ffffff;
    --nm-color-surface: #f3f7f8;
    --nm-color-surface-strong: #e5f2f5;
    --nm-color-text: #231f20;
    --nm-color-text-muted: #625d5e;
    --nm-color-heading: var(--nm-color-text);
    --nm-color-line: #e3dede;
    --nm-color-imprint-divider: var(--nm-color-line);
    --nm-color-superwide-edge: #231f20;
    --nm-color-superwide-fade: #151a1e;
    --nm-color-primary: #f04624;
    --nm-color-primary-soft: #fff0ec;
    --nm-color-secondary: #3d3739;
    --nm-color-secondary-soft: #d8d3d4;
    --nm-color-success: #128046;
    --nm-color-success-soft: #e7f8ee;
    --nm-color-warning: #ffc400;
    --nm-color-warning-strong: #755600;
    --nm-color-warning-soft: #fff7d1;
    --nm-color-danger: #cf2938;
    --nm-color-danger-soft: #ffebed;
    --nm-color-marker-danger-text: var(--nm-color-danger);
    --nm-shadow-marker-danger-text: none;
    --nm-color-odoo: #875a7b;
    --nm-color-on-dark: #ffffff;
    --nm-color-on-primary: #ffffff;
    --nm-color-on-text: #ffffff;
    --nm-color-on-secondary: #ffffff;
    --nm-color-on-success: #ffffff;
    --nm-color-on-warning: #231f20;
    --nm-color-on-danger: #ffffff;
    --nm-color-focus: var(--nm-color-primary);
    --nm-color-navigation: #241f20;
    --nm-color-on-navigation: #ffffff;
    --nm-color-top-control: #241f20;
    --nm-color-on-top-control: #ffffff;
    --nm-color-footer: #231f20;
    --nm-color-footer-surface: #332e30;
    --nm-color-footer-text: #ffffff;
    --nm-color-footer-muted: #bbb4b6;
    --nm-color-footer-subtle: #968f91;
    --nm-color-footer-line: rgba(255, 255, 255, 0.12);
    --nm-color-dialog: #ffffff;
    --nm-color-dialog-text: #231f20;
    --nm-color-on-dialog-text: #ffffff;
    --nm-color-dialog-text-muted: #625d5e;
    --nm-color-dialog-line: #e3dede;
    --nm-color-dialog-divider: #d8d3d4;
    --nm-color-dialog-primary: #f04624;
    --nm-color-on-dialog-primary: #ffffff;
    --nm-color-dialog-secondary: #3d3739;
    --nm-color-on-dialog-secondary: #ffffff;
    --nm-color-transparent: transparent;
    --nm-color-navigation-legacy-surface: rgba(255, 255, 255, 0.96);
    --nm-color-navigation-legacy-surface-hero: rgba(255, 255, 255, 0.84);
    --nm-color-navigation-legacy-border: rgba(33, 43, 51, 0.08);
    --nm-color-navigation-legacy-border-hero: rgba(255, 255, 255, 0.48);
    --nm-color-navigation-legacy-text: #25313a;
    --nm-color-navigation-legacy-accent: #087f9a;
    --nm-color-navigation-legacy-hover: #eef8fa;
    --nm-color-navigation-legacy-link-hover: #f1f7f8;
    --nm-color-navigation-legacy-line: #e0e6e9;
    --nm-color-navigation-legacy-tool-line: #e4e8ea;
    --nm-color-navigation-legacy-muted: #727a81;
    --nm-color-navigation-feature-text: #ffffff;
    --nm-color-navigation-feature-muted: rgba(255, 255, 255, 0.83);
    --nm-color-navigation-feature-kicker: rgba(255, 255, 255, 0.72);
    --nm-color-reference-surface: var(--nm-color-transparent);
    --nm-gradient-navigation-feature: linear-gradient(145deg, #087f9a, #25cff2);
    --nm-gradient-navigation-feature-digital: linear-gradient(145deg, #63338b, #b25bd1);
    --nm-shadow-navigation: 0 12px 38px rgba(24, 35, 43, 0.1);
    --nm-shadow-navigation-hero: 0 14px 42px rgba(17, 29, 36, 0.14);
    --nm-shadow-navigation-scrolled: 0 10px 32px rgba(24, 35, 43, 0.13);
    --nm-shadow-navigation-panel: 0 22px 65px rgba(23, 35, 44, 0.17);
    --nm-shadow-navigation-panel-mobile: 0 22px 65px rgba(23, 35, 44, 0.2);
    --nm-filter-navigation-surface: blur(16px);
    --nm-shadow-dialog: 0 28px 80px rgba(17, 27, 34, 0.28);
    --nm-overlay-dialog: rgba(20, 28, 34, 0.62);
    --nm-filter-dialog-overlay: blur(4px);
    --nm-color-switch-thumb: #ffffff;
    --nm-shadow-switch-thumb: 0 2px 5px rgba(25, 37, 47, 0.25);
    --nm-overlay-contact-map: rgb(20 20 20 / 72%);
    --nm-filter-contact-map-preview: grayscale(1) brightness(1.05) contrast(0.9);
    --nm-shadow-soft: 0 20px 55px rgba(25, 37, 47, 0.1);
    --nm-shadow-control: 0 5px 12px rgba(35, 31, 32, 0.16);
    --nm-shadow-control-hover: 0 9px 18px rgba(35, 31, 32, 0.2);
    --nm-shadow-control-active: 0 2px 5px rgba(35, 31, 32, 0.18);
    --nm-radius: 10px;
    --nm-radius-round: 50%;
    --nm-radius-pill: 999px;
    --nm-radius-left: var(--nm-radius) 0 0 var(--nm-radius);

    /* Superwide-Rail und Easter-Egg-Spiel */
    --nm-color-game-sky-top: #1e293b;
    --nm-color-game-sky-middle: #0b1324;
    --nm-color-game-sky-bottom: #020617;
    --nm-color-game-star: #94a3b8;
    --nm-color-game-star-muted: #64748b;
    --nm-color-game-overlay: rgba(15, 23, 42, 0.6);
    --nm-color-game-line: rgba(255, 255, 255, 0.08);
    --nm-color-game-text: #e2e8f0;
    --nm-color-game-heading: #f8fafc;
    --nm-color-game-text-muted: #cbd5e1;
    --nm-color-game-text-subtle: #94a3b8;
    --nm-color-game-accent: #22d3ee;
    --nm-color-game-accent-secondary: #a78bfa;
    --nm-color-game-ground: #0b1222;
    --nm-color-game-eye: #000000;
    --nm-color-game-eye-light: #ffffff;
    --nm-color-game-beak: #f59e0b;
    --nm-color-game-pipe-top: #10b981;
    --nm-color-game-pipe-bottom: #059669;
    --nm-color-game-shade: rgba(0, 0, 0, 0.15);
    --nm-color-game-warning: #185895;
    --nm-shadow-game-text: 0 2px 0 #000000, 0 0 20px rgba(0, 0, 0, 0.35);
    --nm-shadow-game-bird: inset 0 -4px 0 rgba(0, 0, 0, 0.08), 0 6px 10px rgba(0, 0, 0, 0.25);
    --nm-shadow-game-pipe: inset 0 -8px 0 rgba(0, 0, 0, 0.15);
    --nm-shadow-game-button: 0 8px 22px rgba(0, 0, 0, 0.3);
    --nm-shadow-game-button-hover: 0 12px 28px rgba(0, 0, 0, 0.38);
    /* Animierte 404-Straße */
    --nm-color-404-sky: #58b9e8;
    --nm-color-404-horizon: #c4e8f6;
    --nm-color-404-ground: #d9b96f;
    --nm-color-404-sand-light: #edcf83;
    --nm-color-404-sand-dark: #9d7134;
    --nm-color-404-cactus: #397f43;
    --nm-color-404-cactus-shadow: #245a30;
    --nm-color-404-title: #ffffff;
    --nm-color-404-title-accent: #ffc400;
    --nm-shadow-404-title: 4px 0 0 #231f20, -4px 0 0 #231f20,
        0 4px 0 #231f20, 0 -4px 0 #231f20, 7px 7px 0 #f04624;
    --nm-color-404-car: #d72d2d;
    --nm-color-404-car-dark: #8e171d;
    --nm-color-404-car-window: #26343c;
    --nm-color-404-car-light: #ffcf4a;
    --nm-color-404-car-tire: #231f20;
    --nm-color-404-stone: #777173;
    --nm-color-404-stone-shadow: #4a4547;
    --nm-color-404-crate: #a66d32;
    --nm-color-404-crate-line: #68401f;
    --nm-color-404-crate-light: #c88b49;
    --nm-color-404-crate-side: #7b4b24;
    --nm-color-404-pothole: #171415;
    --nm-color-404-pothole-edge: #8d7f73;
    --nm-color-404-tire-edge: #8d8789;
    --nm-color-404-tire-rim: #d8d3d4;
    --nm-color-404-barrier: #e94a2f;
    --nm-color-404-barrier-light: #ffffff;
    --nm-color-404-explosion-outer: #f04624;
    --nm-color-404-explosion-middle: #ffc400;
    --nm-color-404-explosion-core: #ffffff;
    --nm-color-404-touch-control: rgba(35, 31, 32, 0.42);
    --nm-color-404-bonus: #ffc400;
    --nm-color-404-bonus-shadow: #8e171d;
    --nm-color-404-road: #3d3739;
    --nm-color-404-road-edge: #f3f7f8;
    --nm-color-404-road-line: #ffffff;
    --nm-font-size-text: clamp(1.1rem, 1.35vw, 1.35rem);
    --nm-space-xs: 8px;
    --nm-space-sm: 12px;
    --nm-space-md: 20px;
    --nm-space-lg: 32px;
    --nm-space-xl: 48px;
    --nm-space-default: var(--nm-space-md);
    --nm-story-chapter-gap: var(--nm-space-md);
}

/* Odoo-Akzent nur im Seiteninhalt; Navigation und Footer bleiben bei netzmal. */
body.odoo-page main {
    --nm-color-primary: var(--nm-color-odoo);
    --nm-color-primary-soft: #f4eef3;
    --nm-color-on-primary: #ffffff;
}

/* Dunkles Farbschema: Aktivierung über data-theme="dark" am html-Element */
[data-theme='dark'] {
    color-scheme: dark;
    --nm-color-page: #151a1e;
    --nm-color-surface: #20272d;
    --nm-color-surface-strong: #29343b;
    --nm-color-text: #f3f6f7;
    --nm-color-text-muted: #b8c0c5;
    --nm-color-heading: var(--nm-color-text);
    --nm-color-line: #374249;
    --nm-color-imprint-divider: #2b3338;
    --nm-color-superwide-edge: #0e1114;
    --nm-color-superwide-fade: #151a1e;
    --nm-color-primary: #ff6a4a;
    --nm-color-primary-soft: #42251f;
    --nm-color-secondary: #d8d1d3;
    --nm-color-secondary-soft: #393335;
    --nm-color-success: #55dc8e;
    --nm-color-success-soft: #173b27;
    --nm-color-warning: #ffd633;
    --nm-color-warning-strong: #ffe47a;
    --nm-color-warning-soft: #3d3208;
    --nm-color-danger: #ff7180;
    --nm-color-danger-soft: #461d23;
    --nm-color-marker-danger-text: var(--nm-color-on-warning);
    --nm-shadow-marker-danger-text: none;
    --nm-color-odoo: #c69abb;
    --nm-color-on-primary: #231f20;
    --nm-color-on-text: #231f20;
    --nm-color-on-secondary: #231f20;
    --nm-color-on-success: #231f20;
    --nm-color-on-warning: #231f20;
    --nm-color-on-danger: #231f20;
    --nm-color-focus: var(--nm-color-primary);
    --nm-color-navigation: #ffffff;
    --nm-color-on-navigation: #231f20;
    --nm-color-top-control: #ffffff;
    --nm-color-on-top-control: #231f20;
    --nm-color-footer: #0e1114;
    --nm-color-footer-surface: #20262c;
    --nm-color-footer-text: #ffffff;
    --nm-color-footer-muted: #c0c7cb;
    --nm-color-footer-subtle: #929ba2;
    --nm-color-footer-line: rgba(255, 255, 255, 0.13);
    --nm-color-dialog: #ffffff;
    --nm-color-dialog-text: #231f20;
    --nm-color-on-dialog-text: #ffffff;
    --nm-color-dialog-text-muted: #625d5e;
    --nm-color-dialog-line: #e3dede;
    --nm-color-dialog-divider: #d8d3d4;
    --nm-color-dialog-primary: #f04624;
    --nm-color-on-dialog-primary: #ffffff;
    --nm-color-dialog-secondary: #3d3739;
    --nm-color-on-dialog-secondary: #ffffff;
    --nm-shadow-soft: 0 20px 55px rgba(0, 0, 0, 0.28);
    --nm-shadow-control: 0 5px 12px rgba(0, 0, 0, 0.34);
    --nm-shadow-control-hover: 0 9px 18px rgba(0, 0, 0, 0.42);
    --nm-shadow-control-active: 0 2px 5px rgba(0, 0, 0, 0.36);
    --nm-color-reference-surface: #ffffff;
    --nm-color-404-sky: #245f8a;
    --nm-color-404-horizon: #6d91a8;
    --nm-color-404-ground: #806638;
    --nm-color-404-sand-light: #b18c4b;
    --nm-color-404-sand-dark: #4f3a20;
    --nm-color-404-cactus: #5e9b63;
    --nm-color-404-cactus-shadow: #315b37;
    --nm-color-404-title: #ffffff;
    --nm-color-404-title-accent: #ffd633;
    --nm-shadow-404-title: 4px 0 0 #0e1114, -4px 0 0 #0e1114,
        0 4px 0 #0e1114, 0 -4px 0 #0e1114, 7px 7px 0 #ff6a4a;
    --nm-color-404-car: #ed4545;
    --nm-color-404-car-dark: #9e2027;
    --nm-color-404-car-window: #172126;
    --nm-color-404-car-light: #ffe07a;
    --nm-color-404-car-tire: #0e1114;
    --nm-color-404-stone: #918b8d;
    --nm-color-404-stone-shadow: #514b4d;
    --nm-color-404-crate: #b97b3d;
    --nm-color-404-crate-line: #704722;
    --nm-color-404-crate-light: #d99b57;
    --nm-color-404-crate-side: #825127;
    --nm-color-404-pothole: #070808;
    --nm-color-404-pothole-edge: #b09f90;
    --nm-color-404-tire-edge: #aaa3a5;
    --nm-color-404-tire-rim: #e5e0e1;
    --nm-color-404-barrier: #ff684e;
    --nm-color-404-barrier-light: #ffffff;
    --nm-color-404-explosion-outer: #ff6a4a;
    --nm-color-404-explosion-middle: #ffd633;
    --nm-color-404-explosion-core: #ffffff;
    --nm-color-404-touch-control: rgba(255, 255, 255, 0.24);
    --nm-color-404-bonus: #ffd633;
    --nm-color-404-bonus-shadow: #9e2027;
    --nm-color-404-road: #0e1114;
    --nm-color-404-road-edge: #b8c0c5;
    --nm-color-404-road-line: #f3f6f7;
}

[data-theme='dark'] body.odoo-page main {
    --nm-color-primary: var(--nm-color-odoo);
    --nm-color-primary-soft: #342731;
    --nm-color-on-primary: #231f20;
}