/* Tight'n Twist Design-System — einzige Quelle fuer hello.tightntwist.eu.

   ====================================================================
   MASSGEBLICH IST DER SHOP.
   Referenz: docs/design/reference/shop-tnt-theme.css
             (Original https://tightntwist.eu/cdn/shop/t/21/assets/tnt-theme.css,
              geholt 2026-08-04)
   Jeder Token, den der Shop ebenfalls kennt, MUSS hier denselben Wert
   haben — sonst sehen Shop und Landingpages unterschiedlich aus.
   Das prueft src/shopTheme.test.ts automatisch gegen die Referenzdatei:
   eigene Zusatz-Tokens sind erlaubt, abweichende Werte bei gemeinsamen
   Namen nicht. Aenderungen an gemeinsamen Werten gehoeren zuerst in den
   Shop, dann als neue Referenzdatei hierher.
   ====================================================================

   Die Komponentenklassen (.tnt-btn, .tnt-kicker, .tnt-h1 …) sind wortgetreu
   aus der Referenz uebernommen — mit einer Ausnahme: OHNE `!important`.
   Der Shop braucht das nur, um sein Shopify-Theme zu ueberschreiben; hier
   gibt es kein fremdes Theme, und `!important` wuerde jede legitime
   Seiten-Anpassung blockieren.

   Fonts werden self-hosted ausgeliefert (CSP: font-src 'self').
   Die @font-face-Regeln stehen in /fonts/fonts.css — dieses Stylesheet
   enthaelt bewusst KEINEN Google-Fonts-@import. */

:root {
  /* ================================================================
     TEIL 1 — gemeinsam mit dem Shop. Werte NUR gemeinsam aendern.
     ================================================================ */

  /* --- Farben --- */
  --tnt-forest: #0D1A10;       /* hero, header, dark sections */
  --tnt-green: #56A446;
  --tnt-white: #FFFFFF;
  --tnt-ink: #1A1A1A;          /* body text, softer than pure black */
  --tnt-muted: #3D4A3D;        /* secondary text, descriptions */
  --tnt-green-dark: #3D7A31;   /* hover, text-links on white */
  --tnt-green-light: #76C263;  /* badges, highlights on dark */
  --tnt-surface: #F7F9F7;      /* page bg, alternating sections, cards */
  --tnt-stone: #E8EDE8;        /* borders, dividers, table lines */

  /* --- Schriften --- */
  --tnt-font-heading: 'Saira Extra Condensed', sans-serif;
  --tnt-font-body: 'Saira', sans-serif;

  /* --- Schriftgroessen ---
     Vier Stufen, s. die @media-Bloecke unten. Die Namen tragen KEIN
     "-text-" — so heissen sie im Shop. */
  --tnt-h1: 60px;
  --tnt-h2: 44px;
  --tnt-h3: 32px;
  --tnt-h4: 24px;
  --tnt-body: 17px;
  --tnt-small: 14px;
  --tnt-kicker: 13px;

  /* --- Abstaende einer Sektion (py = oben/unten, px = links/rechts) --- */
  --tnt-section-py: 80px;
  --tnt-section-px: 48px;

  /* --- Radien — square-ish, industrial --- */
  --tnt-radius: 4px;
  --tnt-radius-card: 8px;

  /* --- Laufweiten --- */
  --tnt-ls-heading: .03em;   /* alle Ueberschriften, h1..h6 */
  --tnt-ls-kicker: .2em;     /* Kicker / Eyebrows */
  --tnt-ls-btn: .08em;       /* Buttons, Tabellenkoepfe, Nav */

  /* ================================================================
     TEIL 2 — nur hier. Der Shop kennt diese Namen nicht; sie duerfen
     ihm daher auch nicht widersprechen.
     ================================================================ */

  /* --- Kern-CI (corporate-identity_tightandtwist_09-2023.pdf) --- */
  --tnt-black: #000000;

  /* --- Semantic --- */
  --tnt-danger: #CB2B2B;       /* "no" / negative comparison cells */
  --tnt-success: var(--tnt-green-dark);

  /* --- Gruen-Tints auf Hell -------------------------------------------
     Die Palette verwendet Gruen zweimal als Flaechen-Tint statt als
     Volltonfarbe (Tabellenzeile 6 %, aktiver Nav-Link 15 %). Der Shop
     schreibt dieselben Werte roh in die Regeln (#56a4460d, #56a44626). */
  --tnt-green-tint: rgba(86, 164, 70, 0.06);
  --tnt-green-tint-strong: rgba(86, 164, 70, 0.15);

  /* --- Weiss-Stufen auf dunklem Grund ---------------------------------
     Auf --tnt-forest darf NICHT --tnt-muted verwendet werden (zu dunkel).
     Der Shop nutzt dieselben Stufen roh (#fffc, #fff9, #fff6). */
  --tnt-on-dark-text: rgba(255, 255, 255, 0.7);
  --tnt-on-dark-faint: rgba(255, 255, 255, 0.5);
  --tnt-on-dark-border: rgba(255, 255, 255, 0.3);

  /* --- Modal-Hintergruende: derselbe Ton in zwei Deckungen --- */
  --tnt-backdrop: rgba(13, 26, 16, 0.6);
  --tnt-backdrop-strong: rgba(13, 26, 16, 0.75);

  /* Flaechen-Tint fuer Fehlermeldungen, analog --tnt-green-tint-strong. */
  --tnt-danger-tint: rgba(203, 43, 43, 0.1);

  /* --- Semantic aliases --- */
  --text-heading: var(--tnt-ink);
  --text-body: var(--tnt-muted);
  --text-inverse: var(--tnt-white);
  --text-accent: var(--tnt-green);
  --text-link: var(--tnt-green-dark);

  --surface-page: var(--tnt-surface);
  --surface-card: var(--tnt-white);
  --surface-dark: var(--tnt-forest);
  --surface-accent: var(--tnt-green);

  --border-default: var(--tnt-stone);
  --border-accent: var(--tnt-green);

  /* --- Weitere Schriften --- */
  --tnt-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Alias: im Handoff-README heisst die Display-Schrift "display" */
  --tnt-font-display: var(--tnt-font-heading);

  /* --- Weitere Groessenstufen (der Shop legt sie roh in die Regeln) ---
     --tnt-lead  Vorspann unter H1 (Shop: .tnt-hero__lead 18px, hier 19px
                 weil unser Vorspann auf hellem Grund steht)
     --tnt-xs    Fussnoten, Rechtstexte
     --tnt-cta   Buttonbeschriftung (Shop: .tnt-btn font-size:16px) */
  --tnt-lead: 19px;
  --tnt-xs: 13px;
  --tnt-cta: 16px;

  /* --- Spacing --- */
  --tnt-space-1: 4px;
  --tnt-space-2: 8px;
  --tnt-space-3: 12px;
  --tnt-space-4: 16px;
  --tnt-space-5: 24px;
  --tnt-space-6: 32px;
  --tnt-space-7: 48px;
  --tnt-space-8: 64px;
  --tnt-space-9: 80px;

  /* --- Layout ---
     ABWEICHUNG, bewusst: der Shop setzt .tnt-container auf 1200/1360/1680px.
     Unsere Landingpage laeuft seit jeher auf 1100px. Eine Verbreiterung ist
     ein sichtbarer Layoutwechsel und gehoert in einen eigenen Schritt —
     s. docs/design/blocks-inventory.md, Abschnitt 9. */
  --tnt-container: 1100px;

  /* --- Weitere Radien --- */
  --tnt-radius-pill: 999px;
  /* Alias: Buttons/Inputs nutzen den Basis-Radius */
  --tnt-radius-control: var(--tnt-radius);

  /* --- Shadows --- */
  --tnt-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --tnt-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --tnt-shadow-lg: 0 12px 32px rgba(13, 26, 16, 0.18);

  /* --- Motion --- */
  --tnt-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tnt-dur: 180ms;

  /* --- Font weights --- */
  --tnt-w-light: 300;
  --tnt-w-regular: 400;
  --tnt-w-medium: 500;
  --tnt-w-semibold: 600;
  --tnt-w-bold: 700;
  --tnt-w-extrabold: 800;
  --tnt-w-black: 900;

  /* --- Typografie-Stufen (Rolle -> Gewicht) ----------------------------
     Der Shop schreibt die Gewichte roh in .tnt-h1/.tnt-h2/.tnt-h3/.tnt-kicker
     /.tnt-btn: 800 / 700 / 700 / 600 / 700. Hier als Rollen benannt, damit
     nicht jede Datei neu raet. Logo/Wortmarke: .tnt-header__logo 900. */
  --tnt-weight-h1: var(--tnt-w-extrabold);   /* 800 */
  --tnt-weight-h2: var(--tnt-w-bold);        /* 700 */
  --tnt-weight-h3: var(--tnt-w-bold);        /* 700 */
  --tnt-weight-kicker: var(--tnt-w-semibold);/* 600 */
  --tnt-weight-cta: var(--tnt-w-bold);       /* 700 */
  --tnt-weight-logo: var(--tnt-w-black);     /* 900 */

  /* --- Line heights (Shop roh: h1 1, h2 1.05, h3 1.1, body 1.65) --- */
  --tnt-leading-tight: 1;
  --tnt-leading-snug: 1.1;
  --tnt-leading-body: 1.65;

  /* ====================================================================
     ENTFERNT am 2026-08-04 (Branch admin/shell): die fuenf Alt-Namen
     --brand / --ink / --muted / --bg / --accent.

     Sie stammten aus dem alten :root-Block der Landingpage und standen
     hier nur als Uebergangs-Alias, solange die Admin-Oberflaeche noch
     ihre eigene, gleichnamige Variablen-Familie mitbrachte
     (--ink #1F2320, --muted #6B756D, --bg #F6F7F4). Seit die sechs
     Admin-Seiten in der gemeinsamen Huelle laufen (src/admin/layout.ts +
     public/css/tnt-admin.css) benutzt sie niemand mehr — und ein Alias,
     den niemand braucht, laedt nur dazu ein, wieder zwei Namen fuer
     dieselbe Farbe zu verwenden.

     Wer sie wiederbeleben will, findet die Zuordnung in
     docs/design/blocks-inventory.md, Abschnitt 3 "Alt -> Neu". Achtung:
     drei davon waren KEINE 1:1-Uebersetzung.
     ==================================================================== */
}

/* ======================================================================
   Vier Groessenstufen — Reihenfolge und Werte exakt wie im Shop.
   ====================================================================== */

@media (max-width: 768px) {
  :root {
    --tnt-h1: 40px;
    --tnt-h2: 32px;
    --tnt-h3: 26px;
    --tnt-h4: 20px;
    --tnt-section-py: 48px;
    --tnt-section-px: 20px;
  }
}

@media (min-width: 1440px) {
  :root {
    --tnt-h1: 72px;
    --tnt-h2: 52px;
    --tnt-h3: 38px;
    --tnt-h4: 27px;
    --tnt-body: 18px;
    --tnt-section-px: 64px;
    --tnt-section-py: 96px;
  }
}

@media (min-width: 1920px) {
  :root {
    --tnt-h1: 88px;
    --tnt-h2: 64px;
    --tnt-h3: 46px;
    --tnt-h4: 32px;
    --tnt-body: 19px;
    --tnt-section-px: 96px;
    --tnt-section-py: 112px;
  }
}

/* ======================================================================
   Grundregeln — aus der Referenz, ohne `!important`.
   Jede Seite laedt dieses Stylesheet per <link> VOR ihrem eigenen
   <style>-Block; gleiche Spezifitaet, der spaetere gewinnt. Seiten mit
   eigenem Hintergrund (Scan-Screen, Formular-Verlaeufe) ueberschreiben
   `body` deshalb weiterhin problemlos.
   ====================================================================== */

*, *::before, *::after { box-sizing: border-box }

body {
  font-family: var(--tnt-font-body);
  font-size: var(--tnt-body);
  line-height: 1.65;
  color: var(--tnt-ink);
  background: var(--tnt-surface);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tnt-font-heading);
  letter-spacing: .03em;
}

/* Textlinks: --tnt-green auf Weiss erreicht nur 3,09:1, --tnt-green-dark
   5,22:1. Der Shop macht es genauso. `text-decoration` bleibt bewusst
   unangetastet (der Shop setzt hier `none`) — unsere Fliesstexte brauchen
   den Unterstrich als einziges Link-Merkmal. */
a { color: var(--tnt-green-dark) }
a:hover { color: var(--tnt-green) }

/* ======================================================================
   Komponenten — wortgetreu aus docs/design/reference/shop-tnt-theme.css,
   nur ohne `!important`.

   Die zweiten Selektoren (`.btn`, `.btn--ghost`) sind die Alt-Namen der
   Landingpage. Sie stehen hier als Alias in derselben Regel, damit es die
   Werte nur EINMAL gibt — genau die Doppelpflege war der Grund, warum
   hello und Shop auseinandergelaufen sind.
   ====================================================================== */

.tnt-kicker {
  font-family: var(--tnt-font-heading);
  font-weight: 600;
  font-size: var(--tnt-kicker);
  letter-spacing: var(--tnt-ls-kicker);
  text-transform: uppercase;
  color: var(--tnt-green);
  display: block;
  margin-bottom: 8px;
}

.tnt-h1 {
  font-family: var(--tnt-font-heading);
  font-weight: 800;
  font-size: var(--tnt-h1);
  letter-spacing: var(--tnt-ls-heading);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 16px;
}

.tnt-h2 {
  font-family: var(--tnt-font-heading);
  font-weight: 700;
  font-size: var(--tnt-h2);
  letter-spacing: var(--tnt-ls-heading);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 16px;
}

.tnt-h3 {
  font-family: var(--tnt-font-heading);
  font-weight: 700;
  font-size: var(--tnt-h3);
  letter-spacing: var(--tnt-ls-heading);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 12px;
}

.tnt-btn, .btn {
  display: inline-block;
  font-family: var(--tnt-font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: var(--tnt-ls-btn);
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--tnt-radius);
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}

/* WEISS AUF GRUEN — bewusst, obwohl es nur 3,09:1 erreicht.
   Entscheidung des Auftraggebers vom 2026-08-04: Markenkonsistenz mit dem
   Shop schlaegt hier den Kontrastgewinn; eine Abweichung nur auf hello
   wuerde beide Seiten unterschiedlich aussehen lassen. Wenn das geaendert
   wird, dann gemeinsam mit dem Shop. Begruendung und Messwerte:
   docs/design/blocks-inventory.md, Abschnitt 8.2. */
.tnt-btn--primary, .btn {
  background: var(--tnt-green);
  color: var(--tnt-white);
  border-color: var(--tnt-green);
}

.tnt-btn--primary:hover, .btn:hover {
  background: var(--tnt-green-dark);
  border-color: var(--tnt-green-dark);
  color: var(--tnt-white);
}

/* Auf dunklem Grund. */
.tnt-btn--outline {
  background: transparent;
  color: var(--tnt-white);
  border-color: #fff6;
}

.tnt-btn--outline:hover {
  border-color: var(--tnt-white);
  color: var(--tnt-white);
}

/* Auf hellem Grund. Muss NACH --primary stehen: `.btn--ghost` hat
   dieselbe Spezifitaet wie `.btn`, also gewinnt die spaetere Regel. */
.tnt-btn--outline-dark, .btn--ghost {
  background: transparent;
  color: var(--tnt-green);
  border-color: var(--tnt-green);
}

.tnt-btn--outline-dark:hover, .btn--ghost:hover {
  background: var(--tnt-green);
  color: var(--tnt-white);
  /* Nur wegen des Alias noetig: der Shop hat hier kein border-color, weil bei
     ihm .tnt-btn--primary:hover gar nicht greift. Bei uns liegt .btn:hover auf
     demselben Element und wuerde sonst den dunkelgruenen Rand durchreichen.
     Effektiv derselbe Rand wie im Shop. */
  border-color: var(--tnt-green);
}

/* Scan-Screen, Theme "dark" (gewaehlte visuelle Richtung).
   Quelle: docs/design/scan-form/ScanForm.dc.html -> themes().dark.rootStyle */
.sf-dark {
  --sf-screen: #0D1A10;
  --sf-card: rgba(255, 255, 255, 0.05);
  --sf-text: #FFFFFF;
  --sf-muted: rgba(255, 255, 255, 0.62);
  --sf-accent: #76C263;
  --sf-accent2: #56A446;
  --sf-header: transparent;
  --sf-htext: #FFFFFF;
  --sf-border: rgba(255, 255, 255, 0.14);
  --sf-input: rgba(255, 255, 255, 0.06);
  --sf-viewport: #05100a;
  --sf-grid: radial-gradient(rgba(118, 194, 99, 0.16) 1.2px, transparent 1.2px);
}