/* Design-Tokens — Learnikus
 * Quelle: docs/design-system.md (verbindlich).
 * Änderungen nur per ADR. Keine Hex-Werte ausserhalb dieser Datei.
 */

:root {
    color-scheme: light;

    /* Brand */
    --color-brand: #B62024;
    --color-brand-hover: #8E1A1D;
    --color-brand-subtle: #FBE9EA;
    --color-brand-on: #FFFFFF;

    /* Neutrale (Light) */
    --color-bg: #F8F9FA;
    --color-surface: #FFFFFF;
    --color-surface-elev: #FFFFFF;
    --color-border: #E5E7EB;
    --color-border-strong: #9CA3AF;
    --color-text: #111827;
    --color-text-muted: #4B5563;
    --color-text-subtle: #6B7280;

    /* Status */
    --color-success: #1B7F3D;
    --color-error:   #D32F2F;
    --color-warning: #C77800;
    --color-info:    #0B5FB0;

    /* Typo */
    --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-display:  2.5rem;
    --text-h1:       2rem;
    --text-h2:       1.5rem;
    --text-h3:       1.25rem;
    --text-h4:       1.125rem;
    --text-body-lg:  1.125rem;
    --text-body:     1rem;
    --text-body-sm:  0.875rem;
    --text-caption:  0.75rem;

    --leading-tight: 1.2;
    --leading-snug:  1.3;
    --leading-base:  1.5;

    --weight-regular:  400;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* Spacing (4-Punkt-Raster) */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Layout */
    --layout-topbar-h:    64px;
    --layout-topbar-h-mob: 56px;
    --layout-sidenav-w:   240px;
    --layout-sidenav-w-collapsed: 64px;
    --layout-bottombar-h: 64px;
    --layout-content-max: 1280px;
    --layout-card-max:    720px;

    /* Radien */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Motion */
    --motion-fast:   120ms;
    --motion-base:   200ms;
    --motion-easing: cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-Index */
    --z-topbar:    50;
    --z-sidenav:   40;
    --z-bottombar: 50;
    --z-overlay:   90;
    --z-modal:    100;
    --z-toast:   110;
}

[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #0B0F14;
    --color-surface: #131A22;
    --color-surface-elev: #1A2330;
    --color-border: #2A3540;
    --color-border-strong: #445063;
    --color-text: #F3F4F6;
    --color-text-muted: #C0C7CF;
    --color-text-subtle: #9AA3AD;

    --color-success: #34D399;
    --color-error:   #F87171;
    --color-warning: #FBBF24;
    --color-info:    #60A5FA;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="station-night"] {
    color-scheme: dark;

    --color-bg: #000000;
    --color-surface: #0A0000;
    --color-surface-elev: #110404;
    --color-border: #3A1011;
    --color-border-strong: #5A1A1C;
    --color-text: #C49A9C;
    --color-text-muted: #9C7777;
    --color-text-subtle: #7A5C5C;

    --color-brand: #6B0F12;
    --color-brand-hover: #4F0B0E;
    --color-brand-subtle: #1A0606;
    --color-brand-on: #C49A9C;

    --color-success: #7A4D4D;
    --color-error:   #A83234;
    --color-warning: #8F5A1B;
    --color-info:    #6B3F45;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --color-bg: #0B0F14;
        --color-surface: #131A22;
        --color-surface-elev: #1A2330;
        --color-border: #2A3540;
        --color-border-strong: #445063;
        --color-text: #F3F4F6;
        --color-text-muted: #C0C7CF;
        --color-text-subtle: #9AA3AD;

        --color-success: #34D399;
        --color-error:   #F87171;
        --color-warning: #FBBF24;
        --color-info:    #60A5FA;
    }
}