/* ============================================================================
   SmartFarrier Design System – Design Tokens (UI-1)
   Zentrale CSS-Variablen laut docs/SMARTFARRIER_DESIGN_SYSTEM.md. Diese Datei liegt
   bewusst in der Shared-RCL und wird von Web UND App referenziert
   (_content/SmartFarrier.Shared/css/smartfarrier-tokens.css) – EINE Quelle, damit
   Web und App farblich nicht auseinanderlaufen. Keine sichtbare Änderung durch diese
   Datei allein – sie ist die Grundlage, auf die app.css (Web/App) ihre --sf-*-Variablen
   brückt. Dark Mode über Bootstrap-Attribut [data-bs-theme="dark"] (siehe theme.js).
   ============================================================================ */

:root {
    /* ── Primärfarben ─────────────────────────────────────────────── */
    --sf-color-primary:        #1E63D8;
    --sf-color-primary-hover:  #1856BF;
    --sf-color-primary-dark:   #102B52;
    --sf-color-primary-darker: #0B203E;

    /* ── Oberflächen / Neutral ────────────────────────────────────── */
    --sf-color-bg:            #F5F7FB;
    --sf-color-surface:       #FFFFFF;
    --sf-color-surface-soft:  #F9FAFC;
    --sf-color-border:        #E3E8F0;
    --sf-color-border-strong: #CBD4E0;

    --sf-color-text:           #1E2A3A;
    --sf-color-text-secondary: #5F6E82;
    --sf-color-text-muted:     #8A97A8;

    /* ── Statusfarben (sparsam einsetzen) ─────────────────────────── */
    --sf-color-success:      #2DBE60;
    --sf-color-success-soft: #EAF8EF;
    --sf-color-warning:      #F2B94B;
    --sf-color-warning-soft: #FFF7E3;
    --sf-color-danger:       #D94B4B;
    --sf-color-danger-soft:  #FDECEC;
    --sf-color-info:         #3F8EF7;
    --sf-color-info-soft:    #EAF3FF;

    /* ── Typografie ───────────────────────────────────────────────── */
    --sf-font-family: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
    --sf-font-size-xs:  12px;
    --sf-font-size-sm:  14px;
    --sf-font-size-md:  16px;
    --sf-font-size-lg:  18px;
    --sf-font-size-xl:  22px;
    --sf-font-size-2xl: 28px;
    --sf-font-size-3xl: 36px;

    /* ── Spacing ──────────────────────────────────────────────────── */
    --sf-space-1:  4px;
    --sf-space-2:  8px;
    --sf-space-3:  12px;
    --sf-space-4:  16px;
    --sf-space-5:  20px;
    --sf-space-6:  24px;
    --sf-space-8:  32px;
    --sf-space-10: 40px;
    --sf-space-12: 48px;

    /* ── Radien ───────────────────────────────────────────────────── */
    --sf-radius-sm: 8px;
    --sf-radius-md: 12px;
    --sf-radius-lg: 16px;
    --sf-radius-xl: 20px;

    /* ── Schatten (zurückhaltend) ─────────────────────────────────── */
    --sf-shadow-sm: 0 1px 3px rgba(16, 43, 82, 0.08);
    --sf-shadow-md: 0 4px 12px rgba(16, 43, 82, 0.10);
    --sf-shadow-lg: 0 10px 24px rgba(16, 43, 82, 0.12);

    /* ── App-Shell (abgeleitete Tokens) ───────────────────────────── */
    --sf-sidebar-width:       248px;
    --sf-sidebar-bg:          var(--sf-color-primary-darker);
    --sf-sidebar-bg-soft:     #12315A;
    --sf-sidebar-text:        rgba(255, 255, 255, 0.72);
    --sf-sidebar-text-active: #FFFFFF;
    --sf-sidebar-active-bg:   rgba(255, 255, 255, 0.10);
    --sf-topbar-height:       62px;
    --sf-topbar-bg:           var(--sf-color-surface);
}

/* ── Dark Mode: Oberflächen/Text invertieren, Marken-/Statusfarben leicht angepasst ── */
:root[data-bs-theme="dark"] {
    --sf-color-bg:            #0E1621;
    --sf-color-surface:       #16202E;
    --sf-color-surface-soft:  #1B2736;
    --sf-color-border:        #263243;
    --sf-color-border-strong: #33445A;

    --sf-color-text:           #E6ECF3;
    --sf-color-text-secondary: #A7B4C4;
    --sf-color-text-muted:     #7C8A9C;

    --sf-color-primary:       #3F80EE;
    --sf-color-primary-hover: #5A93F2;

    --sf-color-success-soft: #12281B;
    --sf-color-warning-soft: #2A2413;
    --sf-color-danger-soft:  #2A1515;
    --sf-color-info-soft:    #132436;

    --sf-sidebar-bg:        #0B1420;
    --sf-sidebar-bg-soft:   #12203040;
    --sf-topbar-bg:         #16202E;
    --sf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --sf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
    --sf-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.45);
}