/* ═══════════════════════════════════════════════════════════════════════
   NeuroMedia24 Design Tokens — Single Source of Truth
   Eingebunden in alle NM24-Apps via:
   <link rel="stylesheet" href="https://neuromedia24-design.netlify.app/tokens.css" />
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* ─── BRAND-FARBEN ───────────────────────────────────────────────── */
  --nm-blue:        #002060;  /* Hauptfarbe — Sidebar, Headlines, Primary-Buttons, Hover-States */
  --nm-blue-light:  #1a3a7a;  /* Mittel-Variante für Akzente und Gradienten */
  --nm-cyan:        #3B82F6;  /* Akzent kräftig (z.B. Highlights, Animationen) */
  --nm-mint:        #3B82F6;  /* Aktiv-Zustand, Tab-Bars, Mint-Akzente */
  /* ─── BRAND-REGEL: Schrift auf Mint/Cyan ──────────────────────────────
     Mint (#58C0F9) ist mittelhell. Welche Schriftfarbe darauf gehört, hängt
     von Größe und Kürze des Textes ab:
       • WEISS auf Mint  → NUR bei großen, kurzen Headlines
                           (Akkordeon-Header offen, Pill-Active, Tab-Active,
                           Brand-Statement-Flächen). Kontrast nur ~2.3:1, aber
                           WCAG-3:1 für „large bold text" wird erfüllt.
       • DUNKELBLAU auf Mint → bei kleinen UI-Elementen + längerem Text
                               (Status-Badges, Toasts, kompakte Buttons,
                               Tabellenzellen, Body). Kontrast 9.6:1.
       • Akzentblau (#3B82F6) IMMER mit dunkelblauer Schrift. (Cyan #00C3FF ersetzt 2026-06-02)
       • Dunkelblau (#002060) IMMER mit weißer Schrift.
     Vollständige Doku: siehe CLAUDE.md + farbschema.html.
     ─────────────────────────────────────────────────────────────────── */

  /* ─── SEMANTIC-FARBEN ────────────────────────────────────────────── */
  --nm-success:        #16a34a;
  --nm-success-soft:   rgba(22,163,74,0.12);
  --nm-warning:        #f59e0b;
  --nm-warning-soft:   rgba(245,158,11,0.12);
  --nm-error:          #dc2626;
  --nm-error-soft:     rgba(220,38,38,0.10);
  --nm-destructive:    #960000;  /* Lösch-Buttons, destruktive Confirm-Dialoge */

  /* ─── HELLE FLÄCHEN & HINTERGRÜNDE ────────────────────────────────── */
  --nm-white:        #ffffff;
  --nm-bg-soft:      #E9F4FF;   /* Container-Hintergrund hell */
  --nm-bg-page:      #DEEBF8;   /* Page-Hintergrund (eine Stufe dunkler) */
  --nm-border-soft:  #C8DAEF;   /* Dezente Border auf hellen Flächen */

  /* ─── BLAU-TONAL-SKALA (ersetzt klassische Grautöne) ────────────────
     Alle Töne im Hue-Bereich des Brand-Blau (~220°). Funktionieren als
     Text-Farben, Sub-Borders, Disabled-States — bleiben aber zur Marke
     stimmig. Skala von hellster (50) zu dunkelster (900). */
  --nm-blue-50:   #F0F5FB;   /* Quasi-Weiß mit Blau-Schimmer, BG-Akzent */
  --nm-blue-100:  #DCE7F2;   /* Hover-BG, Disabled-Background */
  --nm-blue-200:  #B7CADD;   /* Disabled-Border, dezenter Trenner */
  --nm-blue-300:  #8FA5C0;   /* Placeholder, sehr dezenter Sub-Text */
  --nm-blue-400:  #6F86A8;   /* Sekundärer Text, Captions */
  --nm-blue-500:  #4F6688;   /* Mid-Text auf hellem BG */
  --nm-blue-700:  #2C436A;   /* Primärer dunkler Text auf hellem BG */
  --nm-blue-900:  #002060;   /* identisch mit --nm-blue, für Hauptschrift */

  /* ─── TYPOGRAFIE — SCHRIFTART ────────────────────────────────────── */
  --nm-font-sans:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --nm-font-mono:  "SF Mono", Menlo, Consolas, monospace;

  /* ─── TYPOGRAFIE — SCHRIFTGRÖSSEN-SKALA ──────────────────────────── */
  --nm-text-2xs:   10px;
  --nm-text-xs:    11px;
  --nm-text-sm:    12px;
  --nm-text-base:  13px;   /* Body-Default Mobile */
  --nm-text-md:    14px;   /* Body-Default Desktop / Inputs */
  --nm-text-lg:    16px;   /* Buttons, größere Buttons */
  --nm-text-xl:    18px;   /* h2 */
  --nm-text-2xl:   19px;   /* h1 */
  --nm-text-3xl:   22px;   /* Hero-Title */
  --nm-text-4xl:   28px;   /* Welcome-Title */

  /* ─── TYPOGRAFIE — GEWICHTE ──────────────────────────────────────── */
  --nm-weight-regular:  400;
  --nm-weight-medium:   500;
  --nm-weight-semibold: 600;
  --nm-weight-bold:     700;

  /* ─── TYPOGRAFIE — LINE-HEIGHTS ──────────────────────────────────── */
  --nm-leading-tight:   1.3;
  --nm-leading-snug:    1.4;
  --nm-leading-normal:  1.5;
  --nm-leading-relaxed: 1.65;

  /* ─── SPACING-SKALA (4er-Raster) ─────────────────────────────────── */
  --nm-space-1:   4px;
  --nm-space-2:   8px;
  --nm-space-3:   12px;
  --nm-space-4:   16px;
  --nm-space-5:   20px;
  --nm-space-6:   24px;
  --nm-space-8:   32px;
  --nm-space-10:  40px;
  --nm-space-12:  48px;

  /* ─── BORDER-RADIEN — bewusst groß, weniger eckig ────────────────── */
  --nm-radius-md:   16px;   /* Standard für Buttons, Inputs, Cards */
  --nm-radius-lg:   20px;   /* Größere Cards, Hero-Container */
  --nm-radius-pill: 999px;  /* Pillen-Buttons, Badges */

  /* ─── SCHATTEN — bewusst nur EINER für die ganze App ─────────────── */
  --nm-shadow:  0 4px 12px rgba(0,32,96,0.08);

  /* ─── TRANSITIONS ────────────────────────────────────────────────── */
  --nm-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --nm-transition:      all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --nm-transition-slow: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── SAFE-AREA (für iOS-Notches) ────────────────────────────────── */
  --nm-safe-top:    env(safe-area-inset-top, 0px);
  --nm-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ═══════════════════════════════════════════════════════════════════
     LEGACY-ALIASE — damit bestehende Apps nicht direkt umbenannt werden
     müssen. Neue Apps sollten direkt die --nm-*-Variablen verwenden.
     blue-dark mappt jetzt auf blue (war doppelt). Grautöne mappen auf
     die Blau-Tonal-Skala. Schatten alle auf den einen --nm-shadow.
     ═══════════════════════════════════════════════════════════════════ */
  --blue:        var(--nm-blue);
  --blue-dark:   var(--nm-blue);          /* früher #001640 — jetzt = blue */
  --blue-light:  var(--nm-blue-light);
  --cyan:        var(--nm-cyan);
  --mint:        var(--nm-mint);
  --red:         var(--nm-destructive);
  --success:     var(--nm-success);
  --success-soft: var(--nm-success-soft);
  --white:       var(--nm-white);
  --bg-soft:     var(--nm-bg-soft);
  --bg-page:     var(--nm-bg-page);
  --border-soft: var(--nm-border-soft);
  /* Grautöne → Blau-Tonal */
  --gray-50:  var(--nm-blue-50);
  --gray-100: var(--nm-blue-50);
  --gray-200: var(--nm-blue-100);
  --gray-300: var(--nm-blue-200);
  --gray-400: var(--nm-blue-300);
  --gray-500: var(--nm-blue-400);
  --gray-700: var(--nm-blue-500);
  --gray-900: var(--nm-blue-900);
  /* Alle alten Schatten-Aliase → einer */
  --shadow-sm: var(--nm-shadow);
  --shadow-md: var(--nm-shadow);
  --shadow-lg: var(--nm-shadow);
  --shadow-xl: var(--nm-shadow);
  /* Alle alten Radius-Aliase → mindestens 16px (kein eckiges 6/8/12 mehr) */
  --radius-xs: var(--nm-radius-md);
  --radius-sm: var(--nm-radius-md);
  --radius-md: var(--nm-radius-md);
  --radius-lg: var(--nm-radius-lg);
  --radius-xl: var(--nm-radius-lg);
  --transition: var(--nm-transition);
  --safe-top:    var(--nm-safe-top);
  --safe-bottom: var(--nm-safe-bottom);
}

/* ═══════════════════════════════════════════════════════════════════════
   DEFAULT-TYPOGRAFIE — Optional (kann pro App überschrieben werden).
   Aktivieren mit <body class="nm-typography">.
   ─────────────────────────────────────────────────────────────────────── */

.nm-typography body,
body.nm-typography {
  font-family: var(--nm-font-sans);
  font-size: var(--nm-text-md);
  font-weight: var(--nm-weight-regular);
  line-height: var(--nm-leading-normal);
  color: var(--nm-blue-900);
  -webkit-font-smoothing: antialiased;
}

.nm-typography h1, .nm-typography .nm-h1 {
  font-size: var(--nm-text-2xl);
  font-weight: var(--nm-weight-bold);
  line-height: var(--nm-leading-tight);
  color: var(--nm-blue);
  margin: 0 0 var(--nm-space-2);
}
.nm-typography h2, .nm-typography .nm-h2 {
  font-size: var(--nm-text-xl);
  font-weight: var(--nm-weight-bold);
  line-height: var(--nm-leading-tight);
  color: var(--nm-blue);
  margin: 0 0 var(--nm-space-2);
}
.nm-typography h3, .nm-typography .nm-h3 {
  font-size: var(--nm-text-md);
  font-weight: var(--nm-weight-bold);
  line-height: var(--nm-leading-snug);
  color: var(--nm-blue-700);
  margin: 0 0 var(--nm-space-2);
}
.nm-typography h4, .nm-typography .nm-h4 {
  font-size: var(--nm-text-base);
  font-weight: var(--nm-weight-semibold);
  line-height: var(--nm-leading-snug);
  color: var(--nm-blue-700);
  margin: 0 0 var(--nm-space-1);
}
.nm-typography p, .nm-typography .nm-body {
  font-size: var(--nm-text-md);
  line-height: var(--nm-leading-normal);
  color: var(--nm-blue-900);
  margin: 0 0 var(--nm-space-3);
}
.nm-typography .nm-text-sm { font-size: var(--nm-text-sm); }
.nm-typography .nm-text-xs { font-size: var(--nm-text-xs); }
.nm-typography .nm-muted   { color: var(--nm-blue-400); }
.nm-typography .nm-strong  { font-weight: var(--nm-weight-semibold); }

/* ─── MOBILE-OVERRIDES ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nm-typography h1, .nm-typography .nm-h1 { font-size: var(--nm-text-2xl); }
  .nm-typography h2, .nm-typography .nm-h2 { font-size: var(--nm-text-xl); }
  .nm-typography h3, .nm-typography .nm-h3 { font-size: var(--nm-text-md); }
  .nm-typography p,  .nm-typography .nm-body { font-size: var(--nm-text-base); }
}