/* =========================================================================
   IK / CODE — Token-Ebene
   Drei Schichten: Primitive -> Semantisch -> Komponente.
   Welt: der Leuchtkasten über einer Werkstatttür nach Feierabend.
   Emaille-Grün als Grundfläche, Natriumdampf-Amber als Licht,
   Emaille-Creme als ausgestanzte Schrift, Zink für Rahmen und Nieten.
   Keine Verläufe als Dekoration. Licht ist Fläche, nie Weichzeichner.
   ========================================================================= */

:root {
  /* ---------- Primitive: Emaille-Grün (Grundfläche, Nacht) ------------- */
  --gruen-950: #06120E;
  --gruen-900: #0A1C16;
  --gruen-850: #0D241C;
  --gruen-800: #102C22;
  --gruen-700: #143529;
  --gruen-600: #1B4636;
  --gruen-500: #245A45;
  --gruen-400: #2F6E55;

  /* ---------- Primitive: Natriumdampf-Amber (Licht) -------------------- */
  --amber-300: #FFD79A;
  --amber-400: #FFC062;
  --amber-500: #F2A63B;
  --amber-600: #D9861A;
  --amber-700: #A85F0C;

  /* ---------- Primitive: Emaille-Creme (Schrift) ----------------------- */
  --creme-100: #FAF7EF;
  --creme-200: #F1EADA;
  --creme-300: #DDD4C1;
  --creme-400: #B6AE9C;

  /* ---------- Primitive: Zink (Rahmen, Nieten, Schienen) --------------- */
  --zink-300: #A9B1AC;
  --zink-400: #808A85;
  --zink-500: #5D6863;
  --zink-600: #414B46;
  --zink-700: #2C3532;

  /* ---------- Primitive: Rost (nur Ärger, nie Dekoration) -------------- */
  --rost-500: #D1543A;
  --rost-600: #A83A24;

  /* ====================== Semantisch ================================== */
  --grund:            var(--gruen-900);   /* Seitengrund, die Nacht */
  --grund-tief:       var(--gruen-950);   /* tiefer gelegte Bänder */
  --tafel:            var(--gruen-800);   /* Schildfläche, unbeleuchtet */
  --tafel-hoch:       var(--gruen-700);   /* Schild, hervorgehoben */
  --linie:            var(--gruen-600);   /* Trennlinien im Grün */
  --kante:            var(--zink-600);    /* Zinkrahmen */
  --kante-hell:       var(--zink-400);    /* Lichtkante oben am Rahmen */

  --schrift:          var(--creme-200);   /* Fließtext auf Grün */
  --schrift-stark:    var(--creme-100);   /* Überschriften */
  --schrift-leise:    var(--creme-400);   /* Beiwerk, Meta */
  --schrift-auf-licht:var(--gruen-950);   /* Text auf Amberfläche */

  --licht:            var(--amber-500);   /* das Licht: Akzentfläche */
  --licht-hell:       var(--amber-400);
  --licht-warm:       var(--amber-300);
  --licht-tief:       var(--amber-700);
  --aerger:           var(--rost-500);

  /* ====================== Schrift ===================================== */
  --schild-schrift: "Sofia Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --lauf-schrift:   "Public Sans", system-ui, -apple-system, sans-serif;

  --fs-mega:  clamp(3.1rem, 11.2vw, 8.4rem);
  --fs-gross: clamp(2.4rem, 7.2vw, 5.4rem);
  --fs-titel: clamp(1.9rem, 4.4vw, 3.1rem);
  --fs-sub:   clamp(1.3rem, 2.6vw, 1.75rem);
  --fs-lead:  clamp(1.1rem, 1.05rem + 0.55vw, 1.4rem);
  --fs-text:  clamp(1rem, 0.97rem + 0.18vw, 1.09rem);
  --fs-klein: 0.9rem;
  --fs-mini:  0.775rem;

  --lh-eng:  0.86;
  --lh-mit:  1.12;
  --lh-text: 1.62;

  /* ====================== Maße ======================================== */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 3rem;
  --raum-8: 4.5rem;
  --raum-9: 7rem;
  --raum-10: 10rem;

  --bahn: 78rem;            /* Lesebreite der Seite */
  --bahn-eng: 44rem;        /* Fließtextbahn, ~68 Zeichen */
  --rand: clamp(1.15rem, 4.5vw, 3.5rem);

  /* Die Ecke des fixierten Chat-Knopfs. --chat-ecke ist sein Abstand zum
     Fensterrand, --chat-band die Höhe, die er unten insgesamt belegt
     (Abstand + Knopfhöhe). Gemessen ist der Knopf 42,4 px hoch (bis 26rem
     Fensterbreite) bzw. 46,4 px; 3,5 rem = 56 px decken beides und lassen von
     320 bis 1440 px überall mindestens 9,5 px Luft.
     Wer die Ecke für sich braucht, rechnet mit --chat-band statt zu raten. */
  --chat-ecke: clamp(1rem, 3vw, 2rem);
  --chat-band: calc(var(--chat-ecke) + 3.5rem);

  /* Hoehe der fixierten Kopfleiste (.kopfleiste-innen min-height 3,5rem +
     1px Trennlinie). Wer am Rechner sticky/fixed unter der Kopfleiste
     positioniert, rechnet mit --kopf-hoehe statt zu raten — sonst rutscht
     die Kopfleiste beim Scrollen ueber den oberen Rand der eigenen Flaeche
     (Befund Warenkorb-Sidebar, 2026-09-01). */
  --kopf-hoehe: calc(3.5rem + 1px);

  --radius-plate: 3px;      /* Emailleschilder sind fast eckig */
  --radius-knopf: 2px;

  /* ====================== Material ==================================== */
  --niete: radial-gradient(circle at 50% 45%, var(--zink-300) 0 38%, var(--zink-600) 39% 100%);
  --schatten-plate: 0 2px 0 var(--gruen-950), 0 14px 28px -14px rgb(0 0 0 / 0.85);
  --schatten-hoch:  0 3px 0 var(--gruen-950), 0 26px 46px -18px rgb(0 0 0 / 0.9);
  --schatten-licht: 0 2px 0 var(--amber-700), 0 16px 30px -16px rgb(0 0 0 / 0.8);

  /* ====================== Bewegung ==================================== */
  --tempo-kurz: 140ms;
  --tempo-mit:  260ms;
  --tempo-lang: 620ms;
  --kurve:      cubic-bezier(0.16, 1, 0.3, 1);      /* exponentielles Ausrollen */
  --kurve-hart: cubic-bezier(0.7, 0, 0.84, 0);       /* Rollladen, fällt */

  /* ====================== Komponenten-Token =========================== */
  --knopf-licht-grund: var(--licht);
  --knopf-licht-text:  var(--schrift-auf-licht);
  --knopf-licht-hover: var(--licht-hell);
  --knopf-kante-grund: transparent;
  --knopf-kante-text:  var(--schrift-stark);
  --knopf-kante-linie: var(--zink-400);

  --feld-grund: var(--gruen-850);
  --feld-linie: var(--gruen-500);
  --feld-linie-fokus: var(--licht);
  --feld-text:  var(--creme-100);
  --feld-platzhalter: var(--creme-400);

  --fokus-ring: var(--licht);
  --fokus-breite: 3px;
  --fokus-abstand: 3px;
}