/* ============================================================
   Wissensraum — tokens.css
   Die einzige Designquelle. Light und Dark über dieselben Namen.
   Keine Farbe, kein Abstand, kein Radius außerhalb dieser Datei.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Fläche und Linie --- */
  --farbe-grund: #FFFFFF;          /* Seitengrund */
  --farbe-flaeche: #F7F8F8;        /* Seitenleiste, ruhige Blöcke */
  --farbe-flaeche-hoch: #FFFFFF;   /* Karte auf Fläche */
  --farbe-flaeche-aktiv: #EFF1F1;  /* Hover, ausgewählte Zeile */
  --farbe-linie: #E6E9E9;          /* Haarlinie, sparsam */
  --farbe-linie-stark: #D3D8D8;    /* Eingabefeldrand */

  /* --- Text --- */
  --farbe-text: #14181A;           /* Titel, Werte */
  --farbe-text-2: #596265;         /* Fließtext, Beschriftungen */
  --farbe-text-3: #656F72;         /* Herkunft, Hilfstexte — AA bei 13px auch auf --farbe-flaeche */

  /* --- Akzent: genau einer --- */
  --farbe-akzent: #00A497;
  --farbe-akzent-tief: #008C81;    /* Hover auf Fläche */
  --farbe-akzent-text: #00746A;    /* Akzent als Text, AA auf Grund */
  --farbe-akzent-fond: #E9F5F3;    /* Akzentfläche, sehr hell */
  --farbe-akzent-auf: #FFFFFF;     /* Text auf Akzentfläche */

  /* --- Status: genau drei, nur funktional --- */
  --farbe-ok: #2A7349;
  --farbe-ok-fond: #E8F2EC;
  --farbe-warn: #96591A;
  --farbe-warn-fond: #F6EEE3;
  --farbe-fehler: #B3362B;
  --farbe-fehler-fond: #F7E9E7;

  /* --- Typografie: eine Schrift --- */
  --schrift: "Ubuntu Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --schrift-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --gr-xxl: 32px;   /* Seitentitel */
  --gr-xl: 22px;    /* Abschnittstitel, Detailtitel */
  --gr-l: 17px;     /* Werte, Zeilentitel */
  --gr-m: 15px;     /* Fließtext, Bedienelemente */
  --gr-s: 13px;     /* Beschriftung, Herkunft, Abzeichen */

  --stark: 560;
  --normal: 400;

  --zeile-eng: 1.2;
  --zeile: 1.5;

  /* --- Abstände: Trennung erfolgt über Abstand, nicht über Rahmen --- */
  --a-1: 4px;  --a-2: 8px;  --a-3: 12px; --a-4: 16px;
  --a-5: 24px; --a-6: 32px; --a-7: 48px; --a-8: 64px;

  /* --- Radius --- */
  --r-klein: 8px;
  --r: 12px;
  --r-gross: 16px;
  --r-voll: 999px;

  /* --- Genau eine Schattenstufe --- */
  --schatten: 0 1px 2px rgba(16, 24, 26, .04), 0 8px 24px rgba(16, 24, 26, .06);
  --fokus: 0 0 0 3px rgba(0, 164, 151, .32);

  /* --- Maße --- */
  --leiste: 240px;
  --spalte: 940px;   /* Lesebreite des Inhalts */
  --kopf: 56px;
  --dauer: 120ms;
}

[data-thema="dunkel"] {
  color-scheme: dark;

  --farbe-grund: #121516;
  --farbe-flaeche: #191D1E;
  --farbe-flaeche-hoch: #1E2223;
  --farbe-flaeche-aktiv: #242829;
  --farbe-linie: #282D2E;
  --farbe-linie-stark: #3A4041;

  --farbe-text: #EDF0F0;
  --farbe-text-2: #A7B0B2;
  --farbe-text-3: #7C8688;

  --farbe-akzent: #12B3A5;
  --farbe-akzent-tief: #3FC7BA;
  --farbe-akzent-text: #4CD0C2;
  --farbe-akzent-fond: #10302E;
  --farbe-akzent-auf: #06201E;

  --farbe-ok: #63C48C;
  --farbe-ok-fond: #142A1F;
  --farbe-warn: #D9A05B;
  --farbe-warn-fond: #2C2318;
  --farbe-fehler: #E2776A;
  --farbe-fehler-fond: #2E1A18;

  --schatten: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .32);
  --fokus: 0 0 0 3px rgba(18, 179, 165, .38);
}