/* === BSN Design-Tokens — Zentrales Variablen-System === */
/* Wird VOR allen <style>-Blöcken geladen. */
/* Bei Design-Änderungen NUR diese Datei anpassen. */

:root {
    /* ===== BRAND ===== */
    --bsn-blue: #20228a;
    --bsn-blue-dark: #161e6e;
    --bsn-blue-light: #5e5ce6;

    /* ===== SEMANTIC ===== */
    --heart-red: #EF4444;
    --heart-red-dark: #DC2626;
    --success: #22c55e;
    --success-dark: #28a745;
    --success-glow: #30d158;
    --warning: #eab308;
    --warning-dark: #ffc107;
    --danger: #dc3545;
    --danger-glow: #ff453a;

    /* ===== TEXT ===== */
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --text-light: #D1D5DB;
    --text-white: #F9FAFB;

    /* ===== BACKGROUNDS ===== */
    --bg-page: #F9FAFB;
    --bg-card: #ffffff;
    --bg-offwhite: #f0ebe0;
    --bg-light-blue: #f0f4ff;

    /* ===== BORDERS ===== */
    --border-light: #E5E7EB;
    --border-lighter: #F3F4F6;

    /* ===== RADIUS ===== */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ===== SHADOWS ===== */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-ausverkauft: 0 2px 8px rgba(220,38,38,0.3);

    /* ===== SPACING ===== */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;

    /* ===== FONTS ===== */
    --font-xs: 0.68rem;
    --font-sm: 0.75rem;
    --font-base: 0.85rem;
    --font-md: 0.95rem;
}