/* =========================================================================
   Designtokens — Umsetzung von DESIGN.md.
   Werte werden NUR hier geändert, nie direkt in Komponenten.

   Richtung: einfarbig. Fast-Schwarz, neutrale Grautöne, weiße Primärhandlung.
   Farbe erscheint ausschließlich dort, wo sie eine Bedeutung trägt.
   Gemessen an Vercel, Linear, Raycast — siehe DESIGN.md §11.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ---------- Der Grund. Neutral, nicht warm.
       Warmes Off-White liest sich als Creme, und Creme ist Dekoration. ---------- */
  --grund-900:#08090A;   /* Seitengrund                                   */
  --grund-800:#0E0F11;   /* Kopfzeile, Sidebar                            */
  --grund-700:#141517;   /* gehoben: Eingabefelder, Karten                 */
  --grund-600:#1B1C1F;   /* gehoben und aktiv                             */
  --linie:#202124;       /* Haarlinie                                     */
  --linie-stark:#2C2D31; /* betonte Trennung, Rahmen von Bedienelementen  */

  /* ---------- Schrift. Neutrale Grautöne. ---------- */
  --text:#EDEDED;
  --text-2:#A1A1A6;
  --text-3:#6E6F75;
  --text-invers:#08090A;

  /* ---------- Die Primärhandlung ist weiß. Kein Schmuckton.
       Das ist der Unterschied zwischen teuer aussehen und teuer sein. ---------- */
  --primaer:#EDEDED;
  --primaer-hover:#FFFFFF;

  /* ---------- Das Blatt. Papier für lange Texte. ---------- */
  --blatt:#FAFAF9;
  --blatt-linie:#E4E4E2;
  --blatt-text:#0C0C0D;
  --blatt-text-2:#6B6B70;

  /* ---------- Bedeutungsfarben. Der einzige Ort für Farbe. ---------- */
  --gut:#5BB98C;        --gut-flaeche:#0E1E17;
  --achtung:#D6A15A;    --achtung-flaeche:#1E170D;
  --kritisch:#E0654F;   --kritisch-flaeche:#1F110F;

  /* ---------- Die Anmerkungsmarke.
       Kein Markenelement, sondern ein Werkzeugzeichen: Sie liegt in der Website
       des Kunden und muss dort auffallen — egal ob diese hell oder dunkel ist.
       Deshalb weiß mit schwarzem Ring, nicht bunt. ---------- */
  --marke:#FFFFFF;
  --marke-ring:#08090A;

  /* ---------- Rollen ---------- */
  --flaeche:var(--grund-800);
  --flaeche-hoch:var(--grund-700);
  --fokus:rgba(237,237,237,.7);

  /* ---------- Schrift: eine Familie ---------- */
  --font-ui:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-display:var(--font-ui);
  --font-mono:var(--font-ui);

  /* Kleiner als üblich für eine Website, normal für ein Werkzeug. Linear und
     Vercel fahren 13px im Grundtext — damit passt spürbar mehr auf einen Schirm,
     ohne dass es gedrängt wirkt. */
  --fs-micro:10px; --fs-xs:11.5px; --fs-sm:12.5px; --fs-base:13px;
  --fs-body:15px;  --fs-lg:15px; --fs-xl:19px; --fs-2xl:24px; --fs-3xl:30px;
  --lh-ui:1.45; --lh-doc:1.65; --lh-head:1.1;

  /* ---------- Laufweite und Gewicht ----------
     Gemessen: Vercel setzt 64px in Schnitt 400 bei -.06em, Linear in 510 bei
     -.022em. Schwer und weit ist Marketing; leicht und eng ist teuer. */
  --sp-display:-.05em;
  --sp-head:-.03em;
  --sp-body:-.011em;
  --sp-code:.1em;
  --gw-display:450;
  --gw-head:520;
  --gw-mittel:500;

  /* ---------- Raum ----------
     Deutlich enger als vorher. Luft wirkt nach Präsentation, Dichte nach
     Arbeitsgerät — und ein Werkzeug wird jeden Tag benutzt, nicht einmal
     angeschaut. Die oberen Stufen sind halbiert. */
  --s1:4px; --s2:6px; --s3:10px; --s4:14px; --s5:18px;
  --s6:24px; --s7:32px; --s8:44px; --s9:64px;

  /* Höhe einer Tabellenzeile und der Kopfzeile. Beides bewusst niedrig. */
  --zeile:34px;
  --kopf:44px;

  /* ---------- Form. 6px, gemessen an Vercel.
       0px wirkt brutalistisch, 12px nach Bootstrap. ---------- */
  --r-base:6px; --r-input:6px; --r-pop:10px; --r-rund:999px;

  /* ---------- Schatten. Nur das Blatt schwebt wirklich. ---------- */
  --schatten-blatt:0 1px 2px rgba(0,0,0,.5), 0 28px 72px -28px rgba(0,0,0,.85);
  --schatten-pop:0 2px 6px rgba(0,0,0,.6), 0 18px 44px -18px rgba(0,0,0,.8);

  --tempo:180ms;
  --kurve:cubic-bezier(.22,.61,.36,1);
}

/*
 * Bewusst **ein** Theme — siehe DESIGN.md §3.
 * Lange Texte werden trotzdem hell gelesen: Unterlagen liegen auf einem Blatt.
 */