/* =============================================================
   TSE AG Design System - die eine Token-Quelle (shared/tokens.css)
   =============================================================
   Kanonische Definition von Schrift, Farben, Radien, Schatten und
   Motion für alle TSE Tools. Ausgeliefert unter /shared/tokens.css.
   Die Font-Pfade sind relativ zu dieser Datei (-> /shared/fonts/).

   Verbraucher: apps/defekt-scan/style.css importiert diese Datei;
   die Landing verlinkt sie als <link>. Die Sicherheitsdoku ist eine
   Ein-Datei-App und bettet Schrift + Token beim Build ein (Quelle
   der Schriften: shared/fonts, siehe tools/build.py) -- ihre
   Inline-Token muessen mit den Werten hier uebereinstimmen.

   Beide Schriften sind Variable Fonts: EINE Datei traegt alle
   Schnitte (font-weight als Spanne). Die frueheren vier
   LibreFranklin-Gewichtsdateien waren byte-identische Kopien.

   Seit 11.09.2026 ist diese Datei die Ebene "Anwendung" der TSE-Marke.
   Die Marke selbst (Palette, Rollen, Radien, Schatten, Skalen) wohnt in
   TSE/CI/design-system/colors_and_type.css; die Werte hier muessen ihr
   gleichen, tokens-marke.test.js prueft das. Anwendungs-eigen sind nur
   Schriftstapel, Bewegung (160 ms), Fokus, Schleier und Shell-Masse.
   Markenwerte aendert man dort, nicht hier. */

@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/LibreFranklin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --tse-red:       #801624;
  --tse-red-dark:  #5C0F19;
  --tse-red-deep:  #3D0A11;
  --tse-red-tint:  #9A2A33;   /* hellere Rotstufe, z. B. Rot auf dunklem Grund */
  --tse-red-wash:  #F2E4E5;
  --tse-red-bright: #D46A74;   /* Rot als Schrift/Linie auf dunklem Grund · 4,8:1 auf Ink */

  --tse-black:     #111111;
  --tse-ink:       #1F1F1F;
  --tse-graphite:  #2B2B2B;
  --tse-charcoal:  #3A3A3A;
  --tse-steel:     #6B6B6B;
  --tse-stone:     #9A9A9A;
  --tse-silver:    #C9C9C9;
  --tse-fog:       #E5E5E5;
  --tse-mist:      #F2F2F2;
  --tse-paper:     #FAFAFA;
  --tse-white:     #FFFFFF;

  --tse-success:   #2E7D4F;
  --tse-warning:   #C98A2C;
  --tse-info:      #2E5B7D;
  --tse-success-light: #5FAF80; /* Erfolg auf dunklem Grund · 6,2:1 auf Ink */
  --tse-info-light:    #6E9CC0; /* Info auf dunklem Grund · 5,6:1 auf Ink */
  --tse-danger:    var(--tse-red);

  --fg-1: var(--tse-ink);
  --fg-2: var(--tse-steel);
  /* --fg-3 ist die leise Textfarbe (Meta-Zeilen, Zusaetze, Durchwahlen).
     Sie war bis zum 30.08.2026 --tse-stone #9A9A9A und damit 2,81:1 auf
     Weiss - der Messreport vom 29.08. zaehlte ueber 100 Textknoten unter
     der Schwelle 4,5:1, im Organigramm traf es die Durchwahl selbst.
     Jetzt --tse-steel #6B6B6B (5,33:1 auf Weiss, 4,76:1 auf Mist). Leise
     bleibt es ueber Schriftgroesse und Gewicht, nicht ueber Blaesse.
     --tse-stone bleibt in der Palette und gehoert weiter zu allem, was
     kein Text ist: Raender, Trenner, deaktivierte Flaechen. */
  --fg-3: var(--tse-steel);
  --fg-on-dark: var(--tse-white);
  --fg-accent: var(--tse-red);
  --fg-soft: var(--tse-charcoal);
  --fg-on-accent: var(--tse-white);
  --fg-success: var(--tse-success);
  --fg-info: var(--tse-info);
  --fg-warning: var(--tse-warning);

  --bg-1: var(--tse-white);
  --bg-2: var(--tse-paper);
  --bg-3: var(--tse-mist);
  --bg-inverse: var(--tse-black);   /* dunkle Flaeche: Toast, Drawer-Kopf, Footer */
  --bg-4: var(--tse-fog);
  --bg-accent: var(--tse-red);
  --bg-accent-hover: var(--tse-red-dark);
  --bg-accent-wash: var(--tse-red-wash);
  --bg-strong: var(--tse-ink);
  --fg-on-strong: var(--tse-white);

  --border-1: var(--tse-silver);
  --border-2: var(--tse-fog);
  --border-strong: var(--tse-ink);
  --border-accent: var(--tse-red);

  --font-sans: "Libre Franklin", "Franklin Gothic",
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --fw-book:   400;
  --fw-medium: 500;
  --fw-heavy:  900;

  /* Schriftgroessen-Skala der Marke. Werkzeuge arbeiten meist mit
     --fs-small (14px) als Grundschrift und --fs-caption fuer Meta;
     die grossen Stufen gehoeren Landing und Aushaengen. */
  --fs-display:   clamp(48px, 7vw, 96px);
  --fs-h1:        clamp(36px, 4.5vw, 60px);
  --fs-h2:        clamp(28px, 3.2vw, 40px);
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   12px;
  --fs-overline:  11px;

  --lh-tight:  1.02;
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.14em;

  /* Abstands-Skala der Marke (4er-Raster). */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-0:    0;
  --radius-1:    2px;
  --radius-2:    4px;
  --radius-3:    8px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(17,17,17,0.06), 0 1px 1px rgba(17,17,17,0.04);
  --shadow-2: 0 4px 12px rgba(17,17,17,0.08), 0 1px 2px rgba(17,17,17,0.04);
  --shadow-3: 0 12px 32px rgba(17,17,17,0.14), 0 2px 6px rgba(17,17,17,0.06);
  --shadow-red-glow: 0 0 0 3px rgba(128,22,36,0.18);
  /* Schein der Scanlinie im gemeinsamen Scan-Dialog (shared/scan-dialog.css) */
  --tse-scan-glow: 0 0 12px rgba(128,22,36,0.9);
  --shadow-focus: 0 0 0 3px rgba(17,17,17,0.08);

  /* Schleier hinter Drawer und Dialogen (Shell) */
  --tse-scrim:     rgba(17,17,17,0.35);

  --duration-fast: 160ms;
  --duration-base: 160ms;
  --ease-standard: cubic-bezier(.32, .72, .4, 1);

  /* Shell (shared/shell.css, Spec 26.08.2026): Hoehe von Zeile 1
     (Kopfzeile) und Zeile 2 (Werkzeugzeile). Die Breakpoints der Familie
     stehen als Literale in shell.css, weil Media-Queries keine Custom
     Properties lesen: < 720 Mobil, 720-1023 Tablet, >= 1024 Desktop,
     >= 1440 alle Aktionen inline. */
  --shell-h:    56px;
  --shell-wz-h: 56px;
  /* Schrittleiste: die Werkzeugzeile unter 720px, wenn ein Tool seine
     Bereiche als Schritte fuehrt (bereiche.mobil "schrittleiste"). Dort
     faellt die Innenhoehe weg und es zaehlt nur der Knopf (44px). */
  --shell-schritt-h: 44px;
}

/* ---- Dunkelmodus (Spec docs/superpowers/specs/2026-10-09-dunkelmodus-design.md)
   Derselbe Satz zweimal: fuer "Wie das System" (kein Attribut, ausser der
   Nutzer hat "Hell" gewaehlt) und fuer die ausdrueckliche Wahl "Dunkel".
   Gesetzt wird data-thema von /shared/thema.js vor dem ersten Bild. Nur
   @media screen: Druck bleibt hell. tokens-dunkel.test.js prueft, dass beide
   Bloecke gleich sind und die Paare den Kontrast halten; tokens-marke.test.js,
   dass sie der Marke (TSE/CI/design-system) gleichen. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    color-scheme: dark;
    --fg-1: var(--tse-mist);
    --fg-soft: var(--tse-fog);
    --fg-2: var(--tse-silver);
    --fg-3: var(--tse-stone);
    --fg-accent: var(--tse-red-bright);
    --fg-on-dark: var(--tse-white);
    --fg-on-accent: var(--tse-white);
    --fg-success: var(--tse-success-light);
    --fg-info: var(--tse-info-light);
    --fg-warning: var(--tse-warning);
    --bg-1: var(--tse-ink);
    --bg-2: var(--tse-graphite);
    --bg-3: var(--tse-black);
    --bg-4: var(--tse-charcoal);
    --bg-inverse: var(--tse-charcoal);
    --bg-accent: var(--tse-red-tint);
    --bg-accent-hover: var(--tse-red);
    --bg-accent-wash: var(--tse-red-deep);
    --bg-strong: var(--tse-mist);
    --fg-on-strong: var(--tse-ink);
    --border-1: var(--tse-steel);
    --border-2: var(--tse-charcoal);
    --border-strong: var(--tse-mist);
    --border-accent: var(--tse-red-bright);
    --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-2: 0 4px 12px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    --shadow-3: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px var(--tse-charcoal);
    --shadow-focus: 0 0 0 3px rgba(242,242,242,0.16);
    --shadow-red-glow: 0 0 0 3px rgba(212,106,116,0.28);
    --tse-scrim: rgba(0,0,0,0.6);
  }
}
@media screen {
  :root[data-thema="dunkel"] {
    color-scheme: dark;
    --fg-1: var(--tse-mist);
    --fg-soft: var(--tse-fog);
    --fg-2: var(--tse-silver);
    --fg-3: var(--tse-stone);
    --fg-accent: var(--tse-red-bright);
    --fg-on-dark: var(--tse-white);
    --fg-on-accent: var(--tse-white);
    --fg-success: var(--tse-success-light);
    --fg-info: var(--tse-info-light);
    --fg-warning: var(--tse-warning);
    --bg-1: var(--tse-ink);
    --bg-2: var(--tse-graphite);
    --bg-3: var(--tse-black);
    --bg-4: var(--tse-charcoal);
    --bg-inverse: var(--tse-charcoal);
    --bg-accent: var(--tse-red-tint);
    --bg-accent-hover: var(--tse-red);
    --bg-accent-wash: var(--tse-red-deep);
    --bg-strong: var(--tse-mist);
    --fg-on-strong: var(--tse-ink);
    --border-1: var(--tse-steel);
    --border-2: var(--tse-charcoal);
    --border-strong: var(--tse-mist);
    --border-accent: var(--tse-red-bright);
    --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-2: 0 4px 12px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
    --shadow-3: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px var(--tse-charcoal);
    --shadow-focus: 0 0 0 3px rgba(242,242,242,0.16);
    --shadow-red-glow: 0 0 0 3px rgba(212,106,116,0.28);
    --tse-scrim: rgba(0,0,0,0.6);
  }
}

/* Papier: ein Bereich, der im Dunkelmodus hell bleibt (Etikett-Vorschau,
   alles, was ein helles Blatt abbildet). Setzt alle Rollen auf die hellen Werte;
   als Nachfahre von :root gewinnt es ueber beide Dunkel-Bloecke.
   Darin nur Rollen nutzen (var(--bg-1), var(--fg-1) ...), keine App-Aliase
   wie --accent: var(--fg-accent) aus :root - ein Alias wird auf :root
   berechnet und erbt dort schon den dunklen Wert, .tse-papier setzt nur die
   Rollen neu. Ein Alias greift hier nur, wenn die App ihn in .tse-papier
   noch einmal setzt. */
.tse-papier {
  color-scheme: light;
  --fg-1: var(--tse-ink);
  --fg-2: var(--tse-steel);
  --fg-3: var(--tse-steel);
  --fg-on-dark: var(--tse-white);
  --fg-accent: var(--tse-red);
  --fg-soft: var(--tse-charcoal);
  --fg-on-accent: var(--tse-white);
  --fg-success: var(--tse-success);
  --fg-info: var(--tse-info);
  --fg-warning: var(--tse-warning);
  --bg-1: var(--tse-white);
  --bg-2: var(--tse-paper);
  --bg-3: var(--tse-mist);
  --bg-inverse: var(--tse-black);
  --bg-4: var(--tse-fog);
  --bg-accent: var(--tse-red);
  --bg-accent-hover: var(--tse-red-dark);
  --bg-accent-wash: var(--tse-red-wash);
  --bg-strong: var(--tse-ink);
  --fg-on-strong: var(--tse-white);
  --border-1: var(--tse-silver);
  --border-2: var(--tse-fog);
  --border-strong: var(--tse-ink);
  --border-accent: var(--tse-red);
  --shadow-1: 0 1px 2px rgba(17,17,17,0.06), 0 1px 1px rgba(17,17,17,0.04);
  --shadow-2: 0 4px 12px rgba(17,17,17,0.08), 0 1px 2px rgba(17,17,17,0.04);
  --shadow-3: 0 12px 32px rgba(17,17,17,0.14), 0 2px 6px rgba(17,17,17,0.06);
  --shadow-red-glow: 0 0 0 3px rgba(128,22,36,0.18);
  --shadow-focus: 0 0 0 3px rgba(17,17,17,0.08);
  background: var(--bg-1);
  color: var(--fg-1);
}