/* =====================================================================
   Design-Tokens der Shell
   Grundsystem aus den Vorlagen (_referenz/design-vorlagen/Risoniq + Honely),
   Markenebene ECPD (Gold/Taupe aus logo-ecpd.svg).
   Wird NACH style.css geladen: die alten Token-Namen (--accent, --glass-*,
   --text …) werden hier auf das neue System gemappt, damit alle Alt-
   Komponenten automatisch mitziehen.
   ===================================================================== */

:root {
    /* Schrift */
    --h: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --b: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Bewegung: eine Kurve für alles */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --t-schnell: .2s;
    --t-mittel: .35s;
    --t-schicht: .5s;
    --t-ebene: .6s;

    /* ECPD-Markenebene */
    --ecpd-gold: #A79273;
    --ecpd-braun: #5F4A3E;
    --ecpd-creme: #FEEFE3;
    --marke-verlauf: linear-gradient(120deg, #B39E7E, #D2BE9C 55%, #EADCC4);
    --marke-ink: #2E241D;          /* Text auf dem Marken-Verlauf */
    --marke-schatten: 0 14px 30px -14px rgba(167, 146, 115, .75);

    /* Radien */
    --r-pille: 999px;
    --r-feld: 14px;
    --r-kachel: 20px;
    --r-panel: 28px;
    --r-fenster: 36px;

    /* ---------- Dunkel (Standard) ---------- */
    color-scheme: dark;
    --tx: #F1F3F6;
    --mu: #A9B2BE;
    --fa: #6F7987;
    --glas: rgba(22, 28, 38, .46);
    --glas2: rgba(28, 34, 46, .70);
    --glas-fest: rgba(24, 30, 41, .94);
    --kante: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .08);
    --schatten: 0 24px 50px -28px rgba(0, 0, 0, .7);
    --schatten-fenster: 0 50px 100px -40px rgba(0, 8, 20, .75);
    --trenn: rgba(255, 255, 255, .08);
    --inv: #15181E;
    --dimmer: rgba(4, 10, 20, .42);
    --live: #8EC5FF;
    --raum-schleier: linear-gradient(180deg, rgba(8, 12, 20, .30), rgba(8, 12, 20, .08) 40%, rgba(8, 12, 20, .45));
    --raum-filter: blur(4px) saturate(1.05) brightness(.9);
    --karte-fuell: linear-gradient(165deg, rgba(48, 56, 72, .82), rgba(20, 24, 33, .9));

    /* Mapping alter Tokens (style.css) */
    --glass-bg: var(--glas);
    --glass-bg-strong: var(--glas-fest);
    --glass-card: rgba(255, 255, 255, .045);
    --glass-card-hover: rgba(255, 255, 255, .08);
    --glass-border: rgba(255, 255, 255, .08);
    --glass-border-strong: rgba(255, 255, 255, .16);
    --text: var(--tx);
    --text-muted: var(--mu);
    --text-faint: var(--fa);
    --accent: #D2BE9C;
    --accent-bright: #EADCC4;
    --accent-2: #A79273;
    --accent-soft: rgba(210, 190, 156, .16);
    --accent-glow: rgba(210, 190, 156, .28);
    --accent-rgb: 210, 190, 156;
    --info: #8EC5FF;
    --info-soft: rgba(142, 197, 255, .16);
    --success: #3DBE84;
    --success-soft: rgba(61, 190, 132, .16);
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 34px;
    --modal-overlay: var(--dimmer);
    --shell-shadow: var(--schatten-fenster);
    --input-bg: rgba(255, 255, 255, .05);
}

:root[data-theme="light"] {
    color-scheme: light;
    --tx: #17202B;
    --mu: #5A6573;
    --fa: #8A93A0;
    --glas: rgba(255, 255, 255, .52);
    --glas2: rgba(255, 255, 255, .74);
    --glas-fest: rgba(250, 251, 253, .95);
    --kante: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .45);
    --schatten: 0 24px 50px -30px rgba(20, 25, 35, .45);
    --schatten-fenster: 0 50px 100px -40px rgba(13, 30, 52, .45);
    --trenn: rgba(20, 30, 45, .08);
    --inv: #FFFFFF;
    --dimmer: rgba(13, 30, 52, .18);
    --live: #3D86C9;
    --raum-schleier: linear-gradient(180deg, rgba(244, 247, 251, .35), rgba(244, 247, 251, .12) 40%, rgba(236, 241, 247, .5));
    --raum-filter: blur(4px) saturate(1.05) brightness(1.02);
    --karte-fuell: linear-gradient(165deg, rgba(255, 255, 255, .9), rgba(241, 244, 249, .82));

    /* style.css setzt diese im Light-Block mit höherer Spezifität → hier wiederholen */
    --glass-bg: var(--glas);
    --glass-bg-strong: var(--glas-fest);
    --text: var(--tx);
    --text-muted: var(--mu);
    --text-faint: var(--fa);
    --modal-overlay: var(--dimmer);
    --shell-shadow: var(--schatten-fenster);
    --glass-card: rgba(255, 255, 255, .55);
    --glass-card-hover: rgba(255, 255, 255, .78);
    --glass-border: rgba(20, 30, 45, .10);
    --glass-border-strong: rgba(20, 30, 45, .18);
    --accent: #8A744F;
    --accent-bright: #6E5B3D;
    --accent-2: #A79273;
    --accent-soft: rgba(167, 146, 115, .16);
    --accent-glow: rgba(167, 146, 115, .30);
    --accent-rgb: 138, 116, 79;
    --info: #3D86C9;
    --info-soft: rgba(61, 134, 201, .14);
    --success: #23935F;
    --success-soft: rgba(35, 147, 95, .14);
    --input-bg: rgba(255, 255, 255, .7);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}