/*
 * ============================================================
 *  LymphoNet – Zentrales Design-Theme
 *  Alle Farben, Schriften und Abstände an einer Stelle.
 *  Änderungen hier wirken sich auf die gesamte Anwendung aus.
 * ============================================================
 */

/* ── Schriften ─────────────────────────────────────────────────
 *  Systemschriften – kein externer Ladevorgang nötig.
 *  Alternativen für --font-head (Überschriften):
 *    Georgia, 'Times New Roman', serif       (klassisch)
 *    Palatino, 'Palatino Linotype', serif    (elegant)
 *  Alternativen für --font-body (Fließtext):
 *    'Segoe UI', system-ui, sans-serif       (Windows)
 *    -apple-system, BlinkMacSystemFont, …   (macOS/iOS)
 * ─────────────────────────────────────────────────────────── */
:root {
    --font-head: Inter, 'Noto Sans' sans-serif;
    --font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Cascadia Code', 'Fira Code', 'Courier New', monospace;
}

/* ── Primärfarbe (Teal / Grün-Blau) ───────────────────────────
 *  --teal      Hauptfarbe für Schaltflächen, Links, aktive Nav
 *  --teal-d    Dunklere Variante (Hover, aktiver Zustand)
 *  --teal-l    Sehr helle Variante (Hintergründe, Badges)
 *  --teal-m    Mittlere Variante (Borders, Trennlinien)
 * ─────────────────────────────────────────────────────────── */
:root {
    --teal:   #009fe3;
    --teal-d: #003d5c;
    --teal-l: #f0f8ff;
    --teal-m: #c2dff5;
}

/* ── Akzentfarbe ────────────────────────────────────────────────
 *  Wird für besondere Hervorhebungen verwendet (z. B. Badges,
 *  Anmelde-Buttons). Sollte zur Primärfarbe kontrastieren.
 * ─────────────────────────────────────────────────────────── */
:root {
    --accent:   #e8845a;
    --accent-d: #d06540;
}

/* ── Textfarben ─────────────────────────────────────────────────
 *  --ink     Haupttext
 *  --ink-2   Sekundärer Text (Labels, Beschreibungen)
 *  --ink-3   Tertiärer Text (Zeitstempel, Hints)
 *  --silver  Trennlinien und Rahmen
 * ─────────────────────────────────────────────────────────── */
:root {
    --ink:    #1a2733;
    --ink-2:  #3d5166;
    --ink-3:  #6b8299;
    --silver: #c8d6df;
}

/* ── Hintergründe ───────────────────────────────────────────────
 *  --bg       Seitenhintergrund
 *  --surface  Karten- und Panel-Hintergrund
 * ─────────────────────────────────────────────────────────── */
:root {
    --bg:      #f4f7f9;
    --surface: #ffffff;
}

/* ── Abstände & Formen ──────────────────────────────────────────
 *  --radius     Standard-Eckenradius für Karten, Inputs
 *  --radius-lg  Größerer Radius (Modals, Login-Box)
 *  --radius-sm  Kleiner Radius (Badges, Tags)
 * ─────────────────────────────────────────────────────────── */
:root {
    --radius:    10px;
    --radius-lg: 16px;
    --radius-sm: 5px;
}

/* ── Schatten ────────────────────────────────────────────────────
 *  --shadow      Standard-Kartenschatten
 *  --shadow-lg   Erhöhter Schatten (Modals, Hover)
 * ─────────────────────────────────────────────────────────── */
:root {
    --shadow:    0 2px 12px rgba(15, 125, 110, .08), 0 1px 3px rgba(0, 0, 0, .06);
    --shadow-lg: 0 8px 32px rgba(15, 125, 110, .14), 0 2px 8px rgba(0, 0, 0, .08);
}

/* ── Navigationsbreite & Topbar-Höhe ────────────────────────────
 *  Diese Werte bestimmen das Layout-Raster.
 *  Nur ändern, wenn das komplette Layout angepasst werden soll.
 * ─────────────────────────────────────────────────────────── */
:root {
    --nav-w:  240px;
    --top-h:  60px;
}

/* ── Statusfarben ───────────────────────────────────────────────
 *  Werden für Alerts, Status-Badges und Validierung genutzt.
 * ─────────────────────────────────────────────────────────── */
:root {
    --color-success:    #2e7d32;
    --color-success-bg: #e8f5e9;
    --color-success-bd: #4caf50;

    --color-error:      #c62828;
    --color-error-bg:   #ffebee;
    --color-error-bd:   #ef5350;

    --color-warning:    #f57f17;
    --color-warning-bg: #fff8e1;
    --color-warning-bd: #ffca28;

    --color-info:       var(--teal-d);
    --color-info-bg:    var(--teal-l);
    --color-info-bd:    var(--teal);
}

/* ── Icon-Größen (Font Awesome) ─────────────────────────────────
 *  Passen Sie diese Werte an, um alle Icons gleichzeitig zu skalieren.
 * ─────────────────────────────────────────────────────────── */
:root {
    --icon-nav:   1.0rem;   /* Sidebar-Navigation */
    --icon-btn:   0.85rem;  /* Schaltflächen */
    --icon-badge: 1.3rem;   /* Brand-Icon Sidebar */
    --icon-empty: 2.5rem;   /* Leer-Zustände */
}