/*
 * pptm Design-Tokens: Aphillix-Blau als einziger Akzent, Slate-Töne, 8px-Radien, flache Karten.
 * Hell/Dunkel: folgt dem System (prefers-color-scheme), lässt sich über <html data-theme="light|dark"> festlegen.
 */
:root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --border: #e2e8f0;
    --text: #0f172a;
    --text-2: #334155;
    --muted: #64748b;

    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-contrast: #ffffff;
    --accent-soft: #eff6ff;

    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --ok: #16a34a;

    --radius: 8px;
    --gap: 12px;
    --gutter: 16px;
    --tap: 44px; /* Mindestgröße für Touch-Ziele */

    --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0b1220;
        --surface: #111a2e;
        --surface-2: #17223b;
        --border: #24304d;
        --text: #e2e8f0;
        --text-2: #cbd5e1;
        --muted: #94a3b8;
        --accent: #3b82f6;
        --accent-hover: #60a5fa;
        --accent-soft: #14233f;
        --danger: #f87171;
        --danger-soft: #3a1717;
        --ok: #4ade80;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #0b1220;
    --surface: #111a2e;
    --surface-2: #17223b;
    --border: #24304d;
    --text: #e2e8f0;
    --text-2: #cbd5e1;
    --muted: #94a3b8;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-soft: #14233f;
    --danger: #f87171;
    --danger-soft: #3a1717;
    --ok: #4ade80;
    color-scheme: dark;
}