/* ══════════════════════════════════════════════════════════════════
   ISO HUB v7 · DESIGN TOKENS
   Eine Quelle der Wahrheit. Jede Farbe, jeder Abstand, jede Bewegung.
   Alles andere im System leitet sich hieraus ab.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── FARBE · Navy (Primär, Struktur, Text) ───────────────────── */
  --navy-50:  #F3F6FA;
  --navy-100: #E4EBF3;
  --navy-200: #C6D5E5;
  --navy-300: #97B1CB;
  --navy-400: #5F82A8;
  --navy-500: #345C86;
  --navy-600: #1F4468;
  --navy-700: #163553;
  --navy-800: #0F2740;
  --navy-900: #0A1B2E;
  --navy-950: #06121F;

  /* ── FARBE · Türkis (Aktion, Fokus, Marke) ───────────────────── */
  --teal-50:  #EAFAF7;
  --teal-100: #CBF3EC;
  --teal-200: #97E7DA;
  --teal-300: #5AD5C2;
  --teal-400: #26BEA9;
  --teal-500: #0FA592;   /* Primäraktion */
  --teal-600: #0A8577;
  --teal-700: #096A60;

  /* ── FARBE · Neutral ─────────────────────────────────────────── */
  --grey-0:   #FFFFFF;
  --grey-25:  #FCFDFE;
  --grey-50:  #F7F9FB;
  --grey-100: #EEF2F6;
  --grey-200: #DFE5EC;
  --grey-300: #C7D0DA;
  --grey-400: #9AA6B4;
  --grey-500: #6B7887;
  --grey-600: #4B5766;
  --grey-700: #36404D;

  /* ── FARBE · Status (nur diese fünf, nie mehr) ───────────────── */
  --gruen:  #16A34A;  --gruen-bg:  #ECFDF3;  --gruen-rand:  #A7E6BF;
  --gelb:   #CA9A04;  --gelb-bg:   #FEFAEB;  --gelb-rand:   #F2DA8A;
  --orange: #EA6A0B;  --orange-bg: #FFF4EC;  --orange-rand: #FBC79A;
  --rot:    #DC2626;  --rot-bg:    #FEF2F2;  --rot-rand:    #F6B5B5;
  --blau:   #2563EB;  --blau-bg:   #EFF5FF;  --blau-rand:   #B6CEFA;

  /* ── SEMANTIK · hell (Standard) ──────────────────────────────── */
  --bg-app:        var(--grey-50);
  --bg-flaeche:    var(--grey-0);
  --bg-erhoben:    var(--grey-0);
  --bg-vertieft:   var(--grey-100);
  --bg-invers:     var(--navy-900);

  --text-stark:    var(--navy-900);
  --text-normal:   var(--navy-800);
  --text-leise:    var(--grey-500);
  --text-schwach:  var(--grey-400);
  --text-invers:   var(--grey-0);
  --text-aktion:   var(--teal-600);

  --rand:          var(--grey-200);
  --rand-stark:    var(--grey-300);
  --rand-fokus:    var(--teal-500);

  /* ── TYPOGRAFIE ──────────────────────────────────────────────── */
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
             "Segoe UI", Roboto, sans-serif;
  --schrift-zahl: "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Skala – bewusst knapp: neun Stufen, mehr braucht niemand */
  --t-11: 11px;   /* Etikett, Tabellenkopf         */
  --t-12: 12px;   /* Metadaten                     */
  --t-13: 13px;   /* Sekundärtext                  */
  --t-15: 15px;   /* Fließtext, Standard           */
  --t-17: 17px;   /* Kartentitel                   */
  --t-21: 21px;   /* Abschnittsüberschrift         */
  --t-28: 28px;   /* Seitentitel                   */
  --t-40: 40px;   /* Kennzahl                      */
  --t-64: 64px;   /* Leitzahl (Compliance Score)   */

  --lh-eng:    1.15;
  --lh-normal: 1.45;
  --lh-weit:   1.65;

  --w-normal: 400;
  --w-mittel: 500;
  --w-halb:   600;
  --w-fett:   700;
  --w-schwer: 800;

  --track-eng:  -0.02em;   /* ab 28px */
  --track-fest: -0.04em;   /* ab 40px */
  --track-weit:  0.06em;   /* Versalien-Etiketten */

  /* ── ABSTAND · 4er-Raster ────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;

  /* ── RADIUS ──────────────────────────────────────────────────── */
  --r-klein: 8px;
  --r-karte: 12px;
  --r-gross: 16px;
  --r-modal: 20px;
  --r-pille: 999px;

  /* ── ERHEBUNG · sparsam. Struktur kommt aus Rändern, nicht Schatten */
  --schatten-0: none;
  --schatten-1: 0 1px 2px rgba(10, 27, 46, .05);
  --schatten-2: 0 2px 8px rgba(10, 27, 46, .06), 0 1px 2px rgba(10, 27, 46, .04);
  --schatten-3: 0 8px 24px rgba(10, 27, 46, .10), 0 2px 6px rgba(10, 27, 46, .05);
  --schatten-4: 0 24px 64px rgba(10, 27, 46, .18), 0 8px 16px rgba(10, 27, 46, .08);
  --ring-fokus: 0 0 0 3px rgba(15, 165, 146, .28);

  /* ── BEWEGUNG ────────────────────────────────────────────────── */
  --zeit-sofort: 90ms;    /* Hover, Farbe            */
  --zeit-kurz:   160ms;   /* Zustandswechsel         */
  --zeit-mittel: 240ms;   /* Einblenden, Panel       */
  --zeit-lang:   380ms;   /* Seitenwechsel, Overlay  */
  --kurve:       cubic-bezier(.2, 0, 0, 1);      /* Standard, Linear-artig */
  --kurve-raus:  cubic-bezier(.4, 0, 1, 1);
  --kurve-feder: cubic-bezier(.34, 1.4, .64, 1); /* Bestätigung, Häkchen   */

  /* ── LAYOUT ──────────────────────────────────────────────────── */
  --nav-breit:   248px;
  --nav-schmal:  64px;
  --kopf-hoehe:  60px;
  --inhalt-max:  1440px;
  --lesebreite:  68ch;
  --safe-unten:  env(safe-area-inset-bottom, 0px);
  --safe-oben:   env(safe-area-inset-top, 0px);
}

/* ══════════════════════════════════════════════════════════════════
   DUNKELMODUS
   Kein invertiertes Hellschema. Eigene Ebenen: Je höher ein Element
   liegt, desto heller – wie bei Papier unter Licht.
   ══════════════════════════════════════════════════════════════════ */
[data-thema="dunkel"] {
  --bg-app:      var(--navy-950);
  --bg-flaeche:  #0C1D31;
  --bg-erhoben:  #112741;
  --bg-vertieft: #081524;
  --bg-invers:   var(--grey-0);

  --text-stark:   #F2F6FA;
  --text-normal:  #DCE5EF;
  --text-leise:   #8FA0B4;
  --text-schwach: #6B7C90;
  --text-invers:  var(--navy-900);
  --text-aktion:  var(--teal-300);

  --rand:       #1C3550;
  --rand-stark: #274766;
  --rand-fokus: var(--teal-400);

  --gruen-bg:  #0D2A1B;  --gruen-rand:  #1E5637;  --gruen:  #4ADE80;
  --gelb-bg:   #2A2410;  --gelb-rand:   #5A4B15;  --gelb:   #FACC15;
  --orange-bg: #2E1B0C;  --orange-rand: #6B3A12;  --orange: #FB923C;
  --rot-bg:    #2C1416;  --rot-rand:    #6B2427;  --rot:    #F87171;
  --blau-bg:   #101F3C;  --blau-rand:   #1E3A6E;  --blau:   #60A5FA;

  --schatten-1: 0 1px 2px rgba(0, 0, 0, .4);
  --schatten-2: 0 2px 8px rgba(0, 0, 0, .45);
  --schatten-3: 0 8px 24px rgba(0, 0, 0, .5);
  --schatten-4: 0 24px 64px rgba(0, 0, 0, .6);
  --ring-fokus: 0 0 0 3px rgba(38, 190, 169, .35);
}

/* ── Bewegung abschaltbar ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}