/*
 * Design-Tokens von OTFS. Seiten und Komponenten verwenden nur die semantischen Variablen
 * (--text, --surface, --accent …), nie die Palette (--palette-*) und keine festen Farbwerte.
 */
:root {
    color-scheme: light dark;

    /* Palette */
    --palette-red: #eb0000;
    --palette-red-dark: #c60018;
    --palette-blue: #2d327d;
    --palette-blue-light: #5b63c4;
    --palette-yellow: #f2b800;
    --palette-gray-0: #ffffff;
    --palette-gray-50: #f6f7f9;
    --palette-gray-100: #eceef2;
    --palette-gray-200: #dcdfe5;
    --palette-gray-300: #c4c8d0;
    --palette-gray-500: #868c98;
    --palette-gray-600: #5a6170;
    --palette-gray-700: #424857;
    --palette-gray-800: #2a303c;
    --palette-gray-850: #20252f;
    --palette-gray-900: #171b22;

    /* Flächen und Text */
    --surface: var(--palette-gray-50);
    --surface-raised: var(--palette-gray-0);
    --surface-sunken: var(--palette-gray-100);
    --text: var(--palette-gray-900);
    --text-muted: var(--palette-gray-600);
    --text-subtle: var(--palette-gray-500);
    --border: var(--palette-gray-200);
    --border-strong: var(--palette-gray-300);

    /* Rollen */
    --brand: var(--palette-red);
    --on-brand: #ffffff;
    --accent: var(--palette-blue);
    --accent-hover: #1f2360;
    --on-accent: #ffffff;
    --accent-soft: #eceefa;
    --danger: var(--palette-red-dark);
    --danger-soft: #fdecec;
    --warning: #9a5b00;
    --warning-soft: #fff3dc;
    --success: #1b7a3a;
    --success-soft: #e6f4ea;
    --focus-ring: 0 0 0 3px rgb(45 50 125 / 0.35);

    /* Formation */
    --wagon-surface: var(--palette-gray-0);
    --wagon-border: var(--palette-gray-600);
    --wagon-text: var(--palette-gray-900);
    --wagon-first: var(--palette-yellow);
    --wagon-restaurant: var(--palette-red);
    --wagon-other: var(--palette-gray-100);
    --wagon-blocked: var(--palette-red);

    /* Masse */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --control-height: 2.4rem;
    --content-width: 72rem;

    /* Schrift */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.2rem;
    --fs-xl: 1.6rem;
}

/*
 * Dunkles Schema: Fluent UI (v5) setzt body[data-theme="dark"], sobald effektiv dunkel ist, also bei „Dunkel“ und bei
 * „System“ mit dunklem Betriebssystem (Benutzermenü, IThemeService). App.razor setzt es schon vor dem Start von Blazor.
 * Plan docs/plan/2026-10-18-fluent-ui-plan.md, F9.
 */
body[data-theme="dark"] {
    color-scheme: dark;

    --surface: var(--palette-gray-900);
    --surface-raised: var(--palette-gray-850);
    --surface-sunken: var(--palette-gray-800);
    --text: #e8eaee;
    --text-muted: #aab0bb;
    --text-subtle: #868c98;
    --border: #343a47;
    --border-strong: #4a5160;

    --accent: #9aa2f0;
    --accent-hover: #b8befa;
    --on-accent: var(--palette-gray-900);
    --accent-soft: #262b4a;
    --danger: #ff7a7a;
    --danger-soft: #3a1f22;
    --warning: #f0b74d;
    --warning-soft: #3a2e17;
    --success: #6fcf8c;
    --success-soft: #1b3324;
    --focus-ring: 0 0 0 3px rgb(154 162 240 / 0.45);

    --wagon-surface: var(--palette-gray-850);
    --wagon-border: #aab0bb;
    --wagon-text: #e8eaee;
    --wagon-other: var(--palette-gray-800);
    --wagon-blocked: #ff7a7a;
}