/* ─────────────────────────────────────────
   ildes.digital — Design Token
   „Die Nachtschicht" · siehe DESIGN.md

   Diese Datei ist die einzige Quelle für Werte, die das System mehrfach
   benutzt. Vor style.css einbinden. Einzelwerte, die genau einmal
   vorkommen, bleiben bewusst an ihrer Fundstelle — nicht jeder Wert ist
   ein Token, sonst wird die Datei zur zweiten Kopie des Stylesheets.
───────────────────────────────────────── */

:root {

  /* ── Farbkanäle ───────────────────────
     Die drei Grundfarben liegen zusätzlich als RGB-Tripel vor, damit jede
     Transparenzstufe aus derselben Quelle stammt. Vorher stand
     rgba(200,255,0,…) dreizehnmal literal im Stylesheet, an --lime vorbei —
     ein Akzentwechsel hätte vierzehn Stellen gebraucht, jetzt eine. */
  --lime-rgb:  200,255,0;
  --cream-rgb: 240,234,210;
  --black-rgb: 11,11,11;

  /* ── Farben ───────────────────────────
     Alphastufen werden an der Fundstelle gebildet: rgba(var(--lime-rgb),.35).
     Sie sind kontextabhängig und gehören nicht in die Token-Ebene. */
  --lime:        rgb(var(--lime-rgb));    /* #c8ff00 — Säure-Chartreuse, der einzige Akzent */
  --lime-bright: #d8ff33;                 /* Hover gefüllter Akzentflächen. Nie im Ruhezustand. */
  --on-lime:     #000;                    /* Text auf Akzentfläche */

  --black:  rgb(var(--black-rgb));        /* #0b0b0b — Grundfläche */
  --dark:   #111111;                      /* alternierende Sektionsfläche */
  --dark2:  #181818;                      /* Einlassfläche: Felder, Feature-Chips */

  --cream:  rgb(var(--cream-rgb));        /* #f0ead2 — Primärtext. Nie durch #fff ersetzen. */
  --muted2: #8a8a6c;                      /* Salbei — Fließtext, Links im Ruhezustand */
  --muted:  #5c5c48;                      /* Salbei Gedämpft — Etiketten, Indizes, Platzhalter */

  --border:  rgba(var(--cream-rgb), .07); /* Haarlinie: Trennung im Fluss */
  --border2: rgba(var(--cream-rgb), .13); /* Haarlinie Stark: Umrandung interaktiver Elemente */

  /* ── Licht ────────────────────────────
     Das Schattenvokabular aus DESIGN.md. Echte Schlagschatten gibt es nur
     gemeinsam mit dem Glow, nie allein. */
  --glow-action:  0 0 40px rgba(var(--lime-rgb), .4), 0 8px 24px rgba(0,0,0,.5);
  --glow-compact: 0 0 24px rgba(var(--lime-rgb), .35);

  /* Fokus: beide Werte gehören zusammen. Wo outline:none steht, müssen sie
     gemeinsam mitkommen — sonst verschwindet der Tastaturfokus. */
  --focus-border: rgba(var(--lime-rgb), .4);
  --focus-ring:   0 0 0 3px rgba(var(--lime-rgb), .07);

  /* ── Schrift ──────────────────────────
     Zwei Register: Aushang (Bebas) und Etikett (Mono). Dazwischen DM Sans. */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Sperrung — nur die Stufen, die das System wiederholt braucht. */
  --track-tight: .02em;  /* Fließtext-nahe Elemente, Buttons, Überschriften */
  --track-label: .1em;   /* Mono-Etiketten und Indizes */
  --track-wide:  .18em;  /* Sektionsmarken. Dieser Stufe vorbehalten. */

  /* ── Form ─────────────────────────────
     Die vollständige Radienskala. Über 8px geht nichts; der einzige Kreis
     im System ist der Cursor. */
  --r-xs:   4px;   /* Pills, Feature-Chips */
  --r-sm:   6px;   /* Navigationselemente */
  --r-md:   8px;   /* Buttons, Eingabefelder */
  --r-full: 50%;   /* nur Cursorpunkt und -ring, beide quadratisch */

  /* ── Bewegung ─────────────────────────
     Exponentielles Ausrollen für Einfahrten; kurze lineare Fenster für
     Zustandswechsel. Die Anhebung ist schneller als der Farbwechsel, damit
     die Geste zuerst ankommt. */
  --ease-entry:  cubic-bezier(.22,1,.36,1);
  --dur-state:   .2s;    /* Farbe, Rahmen, Schatten bei Hover und Fokus */
  --dur-lift:    .15s;   /* die 2px-Anhebung interaktiver Elemente */
  --dur-reveal:  .6s;    /* Scroll-Einblendung der Blöcke */

  /* ── Raum ─────────────────────────────*/
  --nav-h:            64px;
  --container-max:    1160px;
  --container-pad:    40px;
  --container-pad-sm: 20px;  /* nur .container unter 560px, siehe Hinweis in style.css */
  --section-y:        130px;
  --section-y-sm:     88px;
}