/* ==========================================================================
   Los3 — Designtoken
   --------------------------------------------------------------------------
   Übernommen aus dem :root-Block von docs/los3-shell.html, zeichengenau und
   vollständig — der Block ist die maschinenlesbare Fassung der
   Designvorgabe LOS3-Designvorgaben-Website.pdf (Stand 09.09.2026).

   Umgestellt am 10.09.2026 (Kian, Messe-Fassung): die kühle blaugraue
   Palette aus docs/los4-shell.html ist abgelöst. Warmes Papier statt
   Blaugrau, Braunschwarz statt Nachtblau, Schiefer-Tinte statt Blau als
   Akzent, dazu Ocker für Hinweise. Die Vorgabe sagt: kein Blau, kein kühles
   Grau. 30 der 44 alten Werte haben sich geändert, neun Token sind dazu
   gekommen (--surface-0, --schiefer, --ocker*, --ok-tint, --bad-tint,
   --warn-tint).

   Diese Datei enthält ausschliesslich Variablen. Keine Zurücksetzung, keine
   Regeln für Elemente, keine Klassen. Das gehört nach css/site.css.

   Regel aus docs/webseite-struktur.md: die Werte nicht neu erfinden und
   keine Farben dazumischen. Wer hier etwas ändert, ändert es auch im Mockup.

   Es gibt bewusst keine Token für Schriftgrössen. Das Mockup setzt Grössen
   hart im CSS und ist eine dichte Anwendungsoberfläche; eine Skala für die
   Webseite ist eine eigene Entscheidung und wird getrennt getroffen.
   ========================================================================== */

:root{

  /* --- Flächen und Text, warm -------------------------------------------
     paper ist der Seitengrund (Vorgabe: "Papier, nicht Weiß, nicht Grau"),
     card die erhobene Fläche darauf. surface-2 und wash sind wertgleich
     (#F3EFE9) — Doppelung aus dem Mockup, absichtlich beide behalten.
     ink ist Braunschwarz: "Schrift und Ernst".                            */
  --paper:#F8F6F2;
  --card:#FFFFFF;
  --surface-2:#F3EFE9;
  --wash:#F3EFE9;
  --surface-0:#ECE6DE;
  --ink:#2A0807;
  --ink-2:#4A3230;
  --muted:#7D6E67;
  --faint:#A69A93;
  --line:#E9E3DB;
  --line-2:#DAD2C8;

  /* --- Dunkel, nur als Akzent -------------------------------------------
     Kein zweites Farbschema für die ganze Seite. Die Vorgabe geht weiter
     als früher: höchstens ein dunkles Element pro Bildschirmhöhe, immer
     Braunschwarz. dark ist deshalb wertgleich mit ink.                    */
  --dark:#2A0807;
  --dark-elev:#3D1A18;
  --dark-ink:#F8F6F2;
  --dark-muted:#B9A9A2;
  --dark-line:rgba(255,255,255,.10);

  /* --- Akzent: Schiefer ---------------------------------------------------
     schiefer ist die 3 im Zeichen und die Farbe für Flächen und große
     Ziffern (auf Weiß nur 3,6:1 — nicht für Text). accent ist die
     Schiefer-Tinte für Text, Knöpfe, Verweise, Fokus (4,6:1 auf Weiß),
     accent-press der gedrückte Zustand, accent-tint die ausgewählte Fläche.
     accent-soft ist wertgleich mit schiefer, accent-dark der Ton auf
     dunklem Grund.                                                        */
  --schiefer:#76859A;
  --accent:#59687C;
  --accent-press:#48566A;
  --accent-soft:#76859A;
  --accent-tint:#EEF1F5;
  --accent-line:#C9D1DC;
  --accent-dark:#9AA7B8;

  /* --- Zweite Farbe: Ocker ----------------------------------------------
     "Ocker ist der Claim — Hinweise, Markierungen, Wärme." ocker in
     Reinform nur für Flächen und das Zeichen (3,1:1), ocker-ink für Text
     (4,9:1), ocker-tint als Fläche für Markiertes, ocker-line als Rahmen. */
  --ocker:#B28D49;
  --ocker-ink:#8A6A2E;
  --ocker-tint:#F7F0E3;
  --ocker-line:#E8D7B5;

  /* --- Signal ------------------------------------------------------------
     warn und gold sind wertgleich mit ocker-ink bzw. ocker — Doppelungen
     aus dem Mockup. grey ist wertgleich mit faint.                        */
  --ok:#3C8C5A;
  --ok-tint:#E6F1EA;
  --bad:#B8443C;
  --bad-tint:#F6E4E2;
  --warn:#8A6A2E;
  --warn-tint:#F7F0E3;
  --gold:#B28D49;
  --grey:#A69A93;
  --l4-quiet:#DAD2C8;

  /* --- Schatten ----------------------------------------------------------
     In Braunschwarz getönt (rgba 42,8,7), nie Grau, nie Schwarz — so die
     Vorgabe. sh-1 bis sh-3 sind gestaffelte Höhen. edge ist die helle
     Innenkante der Karten, sh-accent der Schatten unter einem Knopf.      */
  --sh-1:0 1px 1px rgba(42,8,7,.04), 0 2px 6px rgba(42,8,7,.05);
  --sh-2:0 1px 1px rgba(42,8,7,.04), 0 6px 16px rgba(42,8,7,.07), 0 18px 44px rgba(42,8,7,.06);
  --sh-3:0 2px 3px rgba(42,8,7,.05), 0 14px 34px rgba(42,8,7,.10), 0 34px 80px rgba(42,8,7,.10);
  --edge:inset 0 1px 0 rgba(255,255,255,.92);
  --sh-accent:0 2px 6px rgba(89,104,124,.24), 0 10px 28px rgba(89,104,124,.22);

  /* --- Radien ------------------------------------------------------------
     Karten 20px (r-lg) wie in der Vorgabe. Knöpfe sind seit 10.09.2026
     Pillen (999px), das steht in site.css, nicht hier.                    */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;

  /* --- Bewegung ----------------------------------------------------------
     ease und e-out sind wertgleich — Doppelung aus dem Mockup. Die drei
     Dauern sind genau die der Vorgabe: 0,18 s / 0,30 s / 0,60 s.          */
  --ease:cubic-bezier(.19,1,.22,1);
  --e-out:cubic-bezier(.19,1,.22,1);
  --e-spring:cubic-bezier(.34,1.4,.64,1);
  --t-1:.18s; --t-2:.3s; --t-3:.6s;

  /* --- Schrift -----------------------------------------------------------
     Nur Schriften, die auf dem Gerät liegen. Nichts von fremden Servern.
     mono ist seit 10.09.2026 wertgleich mit sans: die Vorgabe will Zahlen
     in derselben Schrift, halbfett, mit Tabellenziffern — keine Monospace. */
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
  --mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
}