@charset "UTF-8";
/* Infektionsdynamiken.de / infectiondynamics.eu · tokens.css
   Author: B. D. Rausch
   License: CC BY 4.0
   Version: v1.9
   Created: 2025-09-12
   Last Review: 2025-09-18
   Last Change: 2025-09-18

   Purpose:
   Globale Tokens als Single Source of Truth:
   - Typografie & Spacing
   - Radii & Shadows
   - Neutrale Farbpalette
   - Brand-Varianten (School/University)
   - Statusfarben
   - Containergrößen & Fokus
   - Kompartimentfarben (S, I, R, E, D, V)
   - Rail-/Input-/Overlay-/System-Ableitungen
*/

@layer tokens {
  :root {
    /* Typography */
    --font-sans: system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    --step--1: 0.875rem;
    --step-0: 1rem;
    --step-1: 1.125rem;
    --step-2: 1.25rem;
    --step-3: 1.5rem;
    --step-4: 1.875rem;

    /* Spacing scale */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;

    /* Radii & Shadows */
    --radius-sm: .375rem;
    --radius-md: .75rem;
    --radius-lg: 1rem;
    --shadow-1: 0 2px 8px rgba(0,0,0,.06);
    --shadow-2: 0 8px 20px rgba(0,0,0,.15);
    --shadow-3: 0 10px 26px rgba(0,0,0,.18);

    /* Neutral palette */
    --bg: #ffffff;
    --fg: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --panel: #fafafa;

    /* Brand primaries (modes set --brand) */
    --brand-school: #1aa36f; /* green */
    --brand-uni:    #2563eb; /* blue */

    /* Status */
    --ok:   #16a34a;
    --warn: #f59e0b;
    --err:  #dc2626;

    /* Layout */
    --container-max: 1024px; /* vereinheitlicht */
    --focus: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);

    /* Compartment Colors (SSOT) */
    --c-s: #22c55e;  /* susceptible / empfänglich */
    --c-i: #ef4444;  /* infectious  / infektiös */
    --c-r: #3b82f6;  /* recovered   / genesen */
    --c-e: #f59e0b;  /* exposed     / exponiert */
    --c-d: #6b7280;  /* deceased    / verstorben */
    --c-v: #7c3aed;  /* vaccinated  / geimpft */

    /* Legend halo alpha (Default; Themes überschreiben) */
    --legend-halo: 0.3;

    /* Rail / Subnav defaults (Themes können überschreiben) */
    --rail-bg: var(--panel);
    --rail-border: var(--border);
    --rail-ink: var(--fg);

    /* Inputs (global defaults) */
    --input-bg: #ffffff;
    --input-border: #e5e7eb;
    --ring: color-mix(in srgb, var(--brand) 48%, transparent);

    /* Z-Index scale (Guideline) */
    --z-base: 1;
    --z-header: 10;
    --z-rail: 20;
    --z-offcanvas: 90;
    --z-modal: 100;
    --z-coach: 120;

    /* Systemische Ableitungen (global verfügbar) */
    --border-strong: color-mix(in srgb, var(--border) 65%, #000);
    --panel-1:       color-mix(in srgb, var(--panel) 90%, #fff);

    /* Neutraler Akzent-Alias (für Stellen, die 'accent' erwarten) */
    --accent: var(--brand);

    /*
      Breakpoints (Doktrin · mobile-first):
        md:  768px
        lg:  1024px
        xl:  1280px
      Regel: Nur diese verwenden; 1080/1100/900 sind deprecated.
    */
  }

  html[data-mode="school"]     { --brand: var(--brand-school); }
  html[data-mode="university"] { --brand: var(--brand-uni); }
}

/* Utility: visually-hidden (screenreader-only) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}