/* ============================================================================
   tokens.css — der kanonische Token-Anker der Library
   ----------------------------------------------------------------------------
   Anker-Prinzip (VON-VORNE-PLAN Ä1, KONZEPT §1): ein LLM folgt Ankern, nicht
   Anweisungen. Darum beginnt JEDES Projekt mit dieser Datei — kein freies CSS
   vor dem ersten Anker (KONZEPT §3). Projekt-Overrides stellen NUR die
   markierten Slots (Ink-Tönung, Dunkel-Leiter, Akzent, Fokus-Farbe) —
   nie die Skala, nie die Ketten.
   Quelle aller Werte: BUILD-GESETZ.md (§-Referenz an jeder Zeile).
   Werte ohne direkten Verfassungs-Wert sind als [abgeleitet aus §x] markiert
   (§0.3 — nichts wird erfunden).
   Merkregeln ohne Token-Form: Capslock ist verboten, kein
   text-transform: uppercase, nirgends (§3.1) · maximal zwei Farbwelten
   pro Seite (§2.3) · die Slop-Blockliste greift vor dem Token-Block (§9).
   ============================================================================ */

:root {
  /* ---- §1 Die Skala: [4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96] — nichts dazwischen ---- */
  --s4: 4px;    /* §1 Skala · Karten-Innen: Label→Wert ≤4 */
  --s8: 8px;    /* §1 Skala · GROUT, Titel→Text 8 */
  --s12: 12px;  /* §1 Skala · Rows py 12–14 (Untergrenze) */
  --s16: 16px;  /* §1 Skala · Header-Kette: Sub→CTA 16 */
  --s20: 20px;  /* §1 Skala */
  --s24: 24px;  /* §1 Skala · PAD, GAP, Header-Block→Inhalt 24 */
  --s32: 32px;  /* §1 Skala · Footer pb 32 */
  --s40: 40px;  /* §1 Skala · SECTION mobile 40 */
  --s48: 48px;  /* §1 Skala · SECTION tablet 48, Footer pt 48, Farbband-Band §1.1 */
  --s64: 64px;  /* §1 Skala · SECTION desktop 64 */
  --s96: 96px;  /* §1 Skala · SEAM_MAX 96 */

  /* ---- §1 Rollen-Anker ---- */
  --section: var(--s64);   /* §1 SECTION: Sektions-pb desktop, nie höher (Ausnahme §1.1) */
  --seam-max: var(--s96);  /* §1 SEAM_MAX: das eine größte Void der Seite (vor dem Money-Shot), genau einmal */
  --pad: var(--s24);       /* §1 PAD: das Card-Padding, 4 Seiten gleich, jede Karte, null Ausnahmen */
  --gap: var(--s24);       /* §1 GAP == PAD: Luft zwischen == Luft innen */
  --grout: var(--s8);      /* §1 GROUT: Instrument-Bezel + getrennte Listen-Rows (als Karten, 8px Gap — §6) */

  /* ---- §1 Header-Kette (gemessen in px, §8 prüft die Kette) ---- */
  --chain-eyebrow: 10px;        /* §1 Eyebrow→Heading 10 */
  --chain-sub: 0.2em;           /* §1 Heading→Sub: 0.2em der Heading-Größe (em, an der Heading gesetzt) */
  --chain-cta: var(--s16);      /* §1 Sub→CTA 16 */
  --chain-content: var(--s24);  /* §1 Header-Block→Inhalt 24 */

  /* ---- §1 Karten-Innen + Footer ---- */
  --card-title-gap: var(--s8);  /* §1 Karten-Innen: Titel→Text 8 */
  --card-label-gap: var(--s4);  /* §1 Karten-Innen: Label→Wert ≤4 */
  --row-py: var(--s12);         /* §1 Karten-Innen: Rows py 12–14 (12 = Skalenwert; 14 nur als gemessene Ausnahme) */
  --footer-pt: var(--s48);      /* §1 Footer: pt 48 */
  --footer-pb: var(--s32);      /* §1 Footer: pb 32 — kein 240er-Void vor dem Footer */
  /* §1.1 Farbband-Sektionen (dunkel): eigenes pt == pb == 48–64 — im Projekt aus --s48/--s64 stellen */
  /* §1.2 Hero: pt = Navhöhe + 64 → im Projekt: --hero-pt: calc(<nav-h> + var(--s64)); pb = var(--section) */
  /* §1.3 Der Test: wirkt eine Stelle leer, ist sie falsch — Dichte mit Disziplin, nicht Luft */

  /* ---- §2 Farbe: weiß und weiß, schwarz und schwarz ---- */
  --paper: #FFFFFF;  /* §2.1 Seite = #FFFFFF — getönte Grau-/Off-White-Mats sind verboten */
  --card: #FFFFFF;   /* §2.1 Karten = #FFFFFF — Trennung nur durch Hairlines, nie durch Tönung */
  --ink: #101014;    /* §2.2 Voll-Ink: near-black, getönt erlaubt, nie #000 pur [abgeleitet aus §2.2 — Tönung projektspezifisch stellbar] */
  --ink-2: color-mix(in srgb, var(--ink) 62%, transparent);  /* §2.2 Sekundär: genau eine Stufe, 60–65% (62 = Bandmitte) */
  --ink-3: color-mix(in srgb, var(--ink) 42%, transparent);  /* §2.2 Meta (Timecodes, Fußnoten): 40–45% — nur nicht-essenziell, wenn Kontrast < 4.5:1 (§8) */
  /* §2.2: mehr Ink-Stufen gibt es nicht — hellgrauer Fließtext (≤55%) ist verboten */

  /* ---- §2.5 Hairline-Budget: maximal drei Token, mehr existieren nicht ---- */
  --hairline: color-mix(in srgb, var(--ink) 8%, transparent);           /* §2.5 hell 6–10% (8 = Bandmitte) — Karten-Ring, Trennlinien */
  --hairline-control: color-mix(in srgb, var(--ink) 13%, transparent);  /* §2.5 Kontroll-Border 12–14% (13 = Bandmitte) — Inputs, Selects */
  --hairline-dark: rgba(255, 255, 255, 0.10);                           /* §2.5 dunkle Welt 10% — hell auf dunkel [Richtung abgeleitet aus §2.6 Weiß-Rampe] */

  /* ---- §2.3/§2.6 Dunkel-Leiter — Slots leer, Werte projektspezifisch (hue-konsistent, §4) ---- */
  /* --dark-1: …;  §2.6 Grund der dunklen Welt — eine Leiter, nie #000 pur */
  /* --dark-2: …;  §2.6 Karten der dunklen Welt (dunkel-2) — Trennung mit --hairline-dark */
  /* §2.3: Weiß + eine dunkle Objektklasse (Instrument, Proof-Band, CTA, Featured-Card — alle im selben Dunkel). Keine dritte Fläche. */
  /* §2.6-Absicherung: die Dunkel-Welt liest nie als „schwarz + ein Neon" — Weiß-Rampe + Weiß als Licht-Gegenwelt sind konstitutiv (§9.2) */
  --light-full: #FFFFFF;                   /* §2.6 Weiß-Rampe voll — Primärtext der Dunkel-Welt */
  --light-80: rgba(255, 255, 255, 0.80);   /* §2.6 Weiß-Rampe ·80 — Sekundärtext der Dunkel-Welt */
  --light-60: rgba(255, 255, 255, 0.60);   /* §2.6 Weiß-Rampe ·60 — Meta der Dunkel-Welt, kein Grau-Matsch */

  /* ---- §2.4 Akzent — ein Slot, ein Job ---- */
  /* --accent: …;  §2.4 EIN Akzent. Job hier als Satz eintragen (Pflicht), z. B. „markiert Live-Zustände".
     Akzent färbt nie Headings, nie Buttons, nie Deko. §9-Sperre: kein Terracotta-Editorial,
     kein Neon-auf-Schwarz, kein Purple-Gradient — der einzige legale Gradient ist der Lift beim Ask (§7). */

  /* ---- §4 Radius-Rollen: 3 Token + micro + pill, kein Mid-Range ----
     §4.1 [U 26.07] RADIUS FOLGT DER FLÄCHE: nicht pauschal greifen, an der Größe bemessen —
     Richtwert r ≈ 0.06 × kürzere Kante, auf die Skala gerundet. Eine 380er-Karte mit r12
     liest zaghaft; dieselbe mit r24 liest gebaut. §4.2: enger Gap verlangt größeren Radius,
     §1.0 (Kachel oder Objekt?) und §4.1 werden IMMER gemeinsam entschieden. */
  --r-micro: 4px;    /* §4 micro — Chips, Tags [abgeleitet aus §4 + §1-Skala] */
  --r-control: 8px;  /* §4 Rolle 1 — Buttons, Inputs [abgeleitet aus §4 + §1-Skala] */
  --r-card: 12px;    /* §4 Rolle 2 — Karten BIS 240px kürzere Kante */
  --r-card-lg: 24px; /* §4.1 Karten AB 300px kürzere Kante — der Regelfall bei Grid-Kacheln */
  --r-panel: 32px;   /* §4.1 Panels/Instrumente ab 500px (bis 500px: 24) */
  --r-pill: 999px;   /* §4 pill — nur echte Kreise/Pillen */

  /* ---- §1.0 Kachel-Klausel [U 26.07]: vor jedem Grid ENTSCHEIDEN, nicht defaulten ---- */
  --gap-board: var(--s12);   /* §1.0 Kacheln EINES Bretts (gleiche Sorte, in einer Reihe gelesen) */
  --gap-object: var(--s24);  /* §1.0 echte Einzelobjekte mit eigenen Blickzielen */
  /* Regelfall bei 3–4 gleichartigen Karten nebeneinander ist das BRETT → --gap-board. */

  /* ---- §4 Tiefe ---- */
  /* Karten: Hairline-Ring, kein Schatten. Nie Border + Schatten am selben Element (§4). */
  /* --shadow-chrome: …;  §4 genau EIN Schatten-Rezept pro Projekt, nur auf schwebendem Chrome
     (Dropdown, Overlay). Korpus-Beleg (dunkle Welt): 0 0 32px #0006, 0 0 0 1px #000
     (playbook/01-motion-physics.md §3.8, linear side panel) — helle Welt projektspezifisch ableiten. */

  /* ---- §8 Fokus — eine Focus-Family: ein Token, ein Rezept ---- */
  --focus: #4D65FF;  /* §8 Fokus-Farbe — bewusst fremder blauer Ring [Korpus-Beleg: airtree, 01-motion-physics §3.10; projektspezifisch stellbar] */
}

/* §1 SECTION responsive: Tablet 48, mobile 40 [Breakpoints abgeleitet aus den §8-Messpunkten 1440/820/390] */
@media (max-width: 1024px) { :root { --section: var(--s48); } }  /* §1 SECTION tablet — deckt Messpunkt 820 */
@media (max-width: 640px)  { :root { --section: var(--s40); } }  /* §1 SECTION mobile — deckt Messpunkt 390 */

/* ============================================================================
   Basis-Reset — Mechanik, wertfrei; Design-Werte kommen nur aus den Tokens.
   Typo-Rollen (Serif-Display / Sans / Mono nur Maschinendaten) setzt das
   Projekt nach §3 — Familien sind kein Anker-Wert.
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }              /* Reset-Mechanik */
* { margin: 0; padding: 0; }                                    /* Reset-Mechanik — Abstände kommen nur aus §1-Tokens */
html { -webkit-text-size-adjust: 100%; }                        /* Reset-Mechanik */
body {
  background: var(--paper);                                     /* §2.1 Seite = weiß */
  color: var(--ink);                                            /* §2.2 Text ist schwarz (Voll-Ink) */
  -webkit-font-smoothing: antialiased;                          /* Reset-Mechanik */
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }  /* Reset-Mechanik, h-Overflow-Schutz (§8) */
input, button, textarea, select { font: inherit; color: inherit; }     /* Reset-Mechanik — §3.2: UI spricht die Sans der Seite */
button { background: none; border: 0; cursor: pointer; }               /* Reset-Mechanik */
a { color: inherit; }                                                  /* §2.4: Akzent färbt keine Buttons/Headings — Links erben Ink [abgeleitet aus §2.4] */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }               /* Reset-Mechanik, Umbruch-Schutz (§10.4) */
.tnum, [data-num] { font-variant-numeric: tabular-nums; }              /* §3.4 Zahlen tabular-nums */

/* §8 Fokus-Rezept — jedes fokussierbare Element sichtbar, durchgetabbt, nicht behauptet.
   outline: none ohne Ersatz = FAIL. Rezept = Korpus-Beleg airtree (2px Ring, 2px Offset). */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }  /* §8 die eine Focus-Family */