/* Design-Tokens, uebernommen aus dem Claude-Design-Prototyp "MoTalk Tour Redesign.dc.html"
   (siehe doc/design/README.md) - Farben/Radien/Font dort nicht hier neu erfunden. */

:root {
    --font-family: 'Chakra Petch', system-ui, -apple-system, sans-serif;

    --radius: 14px;
    --radius-sm: 8px;
    --radius-xs: 4px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    --accent: #e8a93c;
    --accent-hover: #ecb64c;
    --accent-muted: #7d5717;
    --accent-text: #080808;
    --danger: #e5484d;
    --success: #3fbf7f;

    --tracking-wide: 0.04em;
    --tracking-widest: 0.14em;

    --shadow-card: 0 4px 16px rgba(0, 0, 0, .4);
    --shadow-raised: 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-glow-accent: 0 0 0 1px rgba(232, 169, 60, .35), 0 0 24px rgba(232, 169, 60, .25);
    --shadow-glow-live: 0 0 0 1px rgba(229, 72, 77, .4), 0 0 20px rgba(229, 72, 77, .3);
}

/* Dunkel: SSR-Default (siehe App.razor, data-theme="dark") und explizite Wahl. */
[data-theme="dark"] {
    --bg: #0d0d0d;
    --surface: #1a1a1a;
    --surface2: #242424;
    --surface-sunken: #080808;
    --border: rgba(255, 255, 255, .08);
    --border2: rgba(255, 255, 255, .16);
    --text: #ffffff;
    --text-muted: #6a6a6a;
    --text-soft: #e2e2e2;
    --text-faint: #8f8f8f;
}

/* Hell: explizite Wahl. */
[data-theme="light"] {
    --bg: #f3f0e8;
    --surface: #ffffff;
    --surface2: #eceae3;
    --border: #e2ddd0;
    --border2: #d3cdbd;
    --text: #17181c;
    --text-muted: #6b6f76;
    --text-soft: #3a3d42;
    --text-faint: #8b8f97;
}

/* Automatisch: kein data-theme-Attribut (von theme.js/App.razor-Inline-Skript entfernt),
   folgt der Systemeinstellung. Default hier ist hell, dunkel via Media-Query. */
:root:not([data-theme]) {
    --bg: #f3f0e8;
    --surface: #ffffff;
    --surface2: #eceae3;
    --border: #e2ddd0;
    --border2: #d3cdbd;
    --text: #17181c;
    --text-muted: #6b6f76;
    --text-soft: #3a3d42;
    --text-faint: #8b8f97;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #0b0c10;
        --surface: #171a22;
        --surface2: #21242e;
        --border: #2a2f3b;
        --border2: #333844;
        --text: #f5f6f8;
        --text-muted: #9aa0ac;
        --text-soft: #d7dae0;
        --text-faint: #6c7280;
    }
}