/*
 * BagsData Design-Tokens – erzeugt aus tokens.json (Version 2) des Design-Systems „BagsData“:
 * https://claude.ai/artifact/77BXitDGBdKkj1BFNoSd39
 * Dark ist das Standard-Theme; Light über data-theme="light" am <html>-Element.
 */
:root,
[data-theme="dark"] {
    --logo-navy: #314685;
    --logo-teal: #3facb1;
    --logo-grey: #4b4949;
    --night-100: #161c2c;
    --night-200: #1e2538;
    --surface-100: #161c2c;
    --surface-200: #1e2538;
    --surface-300: #2a3350;
    --ink: #ffffff;
    --ink-body: #9aa3b5;
    --ink-muted: #8a93a8;
    --on-night: #ffffff;
    --on-night-body: #9aa3b5;
    --primary: #3450a6;
    --primary-strong: #3f5fc2;
    --on-primary: #ffffff;
    --on-primary-accent: #9fe0e3;
    --accent: #3facb1;
    --accent-ink: #4fc3c8;
    --border: #2a3350;
    --border-strong: #66748f;
    --success: #6fcf97;
    --danger: #f2867e;
}

[data-theme="light"] {
    --logo-navy: #314685;
    --logo-teal: #3facb1;
    --logo-grey: #4b4949;
    --night-100: #161c2c;
    --night-200: #1e2538;
    --surface-100: #ffffff;
    --surface-200: #f2f5fa;
    --surface-300: #e3e9f2;
    --ink: #141a2b;
    --ink-body: #4f586b;
    --ink-muted: #5d6679;
    --on-night: #ffffff;
    --on-night-body: #9aa3b5;
    --primary: #314685;
    --primary-strong: #243463;
    --on-primary: #ffffff;
    --on-primary-accent: #9fe0e3;
    --accent: #3facb1;
    --accent-ink: #1d7a7f;
    --border: #dde3ec;
    --border-strong: #7a879c;
    --success: #2e7d4f;
    --danger: #b3261e;
}

:root {
    --font-sans: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif: Lora, Georgia, serif;
    --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
    --space-1: 4px; /* Feinabstände. */
    --space-2: 8px; /* Titel zu Text. */
    --space-3: 16px; /* Absätze, Listenpunkte. */
    --space-4: 24px; /* Grid-Gutter, Karten-Abstand. */
    --space-5: 48px; /* Karten-Innenabstand, Abschnitt oben/unten (Porto py-5). */
    --space-6: 96px; /* Große Abschnittsabstände. */
    --radius-none: 0; /* Alles Eckige: Buttons, Karten, Felder (Porto `rounded-0`, --border-radius 0). */
    --radius-round: 50%; /* Deko-Kreise und Avatare. */
}