:root {
    /* Font: System-UI-Stack - nativ, schnell, professionell.
       Kein Web-Font-Download, kein FOUT/FOIT. */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

    /* ============================================================
       Brand / Primary - NHS Blue
       Klinischer Look: nur EINE Akzentfarbe, durchgehend verwendet.
       ============================================================ */
    --c-primary-50:  #eef4fb;  /* sehr helles Tint, dezente Hintergruende */
    --c-primary-100: #d8e7f5;  /* leichte Highlights, Hover-Tints */
    --c-primary-300: #41b6e6;  /* NHS Light Blue */
    --c-primary-500: #005eb8;  /* NHS Blue (Akzentfarbe) */
    --c-primary-700: #003087;  /* NHS Dark Blue (Pressed/Strong) */

    /* ============================================================
       Status colors - rein funktional, nicht dekorativ.
       Werte gedaempfter als zuvor, fuer ruhigen klinischen Look.
       ============================================================ */
    --c-success-50:  #ecfdf5;
    --c-success-100: #d1fae5;
    --c-success-300: #6ee7b7;
    --c-success-500: #16a34a;
    --c-success-700: #166534;

    --c-warning-50:  #fffbeb;
    --c-warning-100: #fef3c7;
    --c-warning-300: #fcd34d;
    --c-warning-500: #d97706;   /* Amber statt grell-gelb */
    --c-warning-700: #92400e;

    --c-error-50:    #fef2f2;
    --c-error-100:   #fee2e2;
    --c-error-300:   #fca5a5;
    --c-error-500:   #dc2626;
    --c-error-700:   #991b1b;

    /* ============================================================
       Neutral palette - Hospital greys (cooler Unterton)
       ============================================================ */
    --c-neutral-50:  #f5f7fa;   /* Hospital Floor */
    --c-neutral-100: #eef2f6;
    --c-neutral-200: #dde4eb;
    --c-neutral-300: #c4cdd6;
    --c-neutral-400: #8a99a8;
    --c-neutral-500: #64748b;
    --c-neutral-600: #4b5b6c;
    --c-neutral-700: #334155;
    --c-neutral-800: #1f2a37;
    --c-neutral-900: #0b1c2c;

    /* ============================================================
       Semantic (light)
       ============================================================ */
    --bg-body:           var(--c-neutral-50);   /* flach, kein Gradient */
    --bg-surface:        #ffffff;
    --bg-surface-subtle: var(--c-neutral-100);
    --text-primary:      var(--c-neutral-900);
    --text-secondary:    var(--c-neutral-600);
    --text-tertiary:     var(--c-neutral-400);
    --text-inverse:      #ffffff;
    --border-color:      var(--c-neutral-200);

    /* ============================================================
       Spacing - 8px Grid
       ============================================================ */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ============================================================
       Radius - nur 3 Stufen + Pille
       Alle aelteren Tokens (sm, md, base) mappen auf dieselben
       Werte, damit kein UI-Element "rund" und das Nachbarelement
       "eckig" wirkt.
       ============================================================ */
    --radius-none: 0px;
    --radius-sm:   8px;   /* war 2 - vereinheitlicht */
    --radius-base: 8px;   /* war 4 - vereinheitlicht */
    --radius-md:   8px;   /* war 6 - vereinheitlicht */
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-3xl:  16px;  /* war 24 - klinischer */
    --radius-full: 9999px;

    /* ============================================================
       Shadows - nur sehr subtle. Klinik bevorzugt Linien ueber Tiefe.
       ============================================================ */
    --shadow-sm:   0 1px 1px rgba(11, 28, 44, 0.04);
    --shadow-base: 0 1px 2px rgba(11, 28, 44, 0.06),
                   0 1px 1px rgba(11, 28, 44, 0.04);
    --shadow-md:   0 2px 4px rgba(11, 28, 44, 0.06),
                   0 1px 2px rgba(11, 28, 44, 0.04);
    --shadow-lg:   0 4px 8px rgba(11, 28, 44, 0.08),
                   0 2px 4px rgba(11, 28, 44, 0.04);
    --shadow-xl:   0 8px 16px rgba(11, 28, 44, 0.10),
                   0 2px 4px rgba(11, 28, 44, 0.04);
    --shadow-2xl:  0 16px 32px rgba(11, 28, 44, 0.12);

    /* ============================================================
       Typography - klare Skala
       ============================================================ */
    --fs-display:  2.5rem;  /* war 3.75 - ruhiger */
    --lh-display:  1.2;
    --fw-display:  700;
    --fs-h1:       2rem;
    --lh-h1:       1.25;
    --fw-h1:       700;
    --fs-h2:       1.5rem;
    --lh-h2:       1.3;
    --fw-h2:       600;
    --fs-h3:       1.25rem;
    --lh-h3:       1.35;
    --fw-h3:       600;
    --fs-h4:       1.125rem;
    --lh-h4:       1.4;
    --fw-h4:       600;
    --fs-body-lg:  1rem;
    --lh-body-lg:  1.5;
    --fw-body-lg:  500;
    --fs-body:     0.9375rem;  /* 15px - leicht kompakter */
    --lh-body:     1.5;
    --fw-body:     400;
    --fs-body-sm:  0.8125rem;  /* 13px */
    --lh-body-sm:  1.45;
    --fw-body-sm:  400;
    --fs-caption:  0.75rem;
    --lh-caption:  1.4;
    --fw-caption:  400;
}

[data-theme="dark"] {
    /* NHS Blue auf Dunkel: hellere Variante als Akzent (Kontrast) */
    --c-primary-50:  #0b2a4a;
    --c-primary-100: #103a63;
    --c-primary-300: #6cbef2;
    --c-primary-500: #41b6e6;   /* NHS Light Blue als Akzent in Dark */
    --c-primary-700: #d8e7f5;

    --c-success-50:  #052e16;
    --c-success-100: #14532d;
    --c-success-300: #34d399;
    --c-success-500: #4ade80;
    --c-success-700: #bbf7d0;

    --c-warning-50:  #422006;
    --c-warning-100: #713f12;
    --c-warning-300: #f59e0b;
    --c-warning-500: #fbbf24;
    --c-warning-700: #fde68a;

    --c-error-50:    #450a0a;
    --c-error-100:   #7f1d1d;
    --c-error-300:   #f87171;
    --c-error-500:   #fca5a5;
    --c-error-700:   #fecaca;

    /* Hospital Dark: tiefes Blau-Grau (cool), nicht Schwarz */
    --c-neutral-50:  #0b1220;
    --c-neutral-100: #0f1828;
    --c-neutral-200: #1a2436;
    --c-neutral-300: #243044;
    --c-neutral-400: #4b5b6f;
    --c-neutral-500: #64748b;
    --c-neutral-600: #94a3b8;
    --c-neutral-700: #cbd5e1;
    --c-neutral-800: #e2e8f0;
    --c-neutral-900: #f1f5f9;

    --bg-body:           var(--c-neutral-50);
    --bg-surface:        var(--c-neutral-100);
    --bg-surface-subtle: var(--c-neutral-200);
    --text-primary:      var(--c-neutral-900);
    --text-secondary:    var(--c-neutral-600);
    --text-tertiary:     var(--c-neutral-500);
    --text-inverse:      var(--c-neutral-50);
    --border-color:      var(--c-neutral-300);

    --shadow-sm:   0 1px 1px rgba(0, 0, 0, 0.30);
    --shadow-base: 0 1px 2px rgba(0, 0, 0, 0.40),
                   0 1px 1px rgba(0, 0, 0, 0.30);
    --shadow-md:   0 2px 4px rgba(0, 0, 0, 0.40),
                   0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-lg:   0 4px 8px rgba(0, 0, 0, 0.50),
                   0 2px 4px rgba(0, 0, 0, 0.30);
    --shadow-xl:   0 8px 16px rgba(0, 0, 0, 0.55),
                   0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-2xl:  0 16px 32px rgba(0, 0, 0, 0.60);
}

/* Component helper vars */
:root {
    --btn-radius:   var(--radius-lg);
    --modal-radius: var(--radius-2xl);
}