/* ── GESTALTUNG IN TOKENS ───────────────────────────────────────────
   Aus dem Prototyp V3 übernommen (Abschnitte „SCHRIFTSKALA“ und „DIE
   PALETTE“, Zeilen 86–231). Nach dem Audit vom 26.09.2026 kommen Farben
   und Schriftsatz aus einem System: jede Farbe und jede Schriftrolle der
   App steht hier. Die kurzen alten Namen (--black, --mid, --light,
   --red …) bleiben als Verweise — der Bestand liest sich weiter wie
   gewohnt und zeigt doch auf dieselben Werte. */

/* ── SCHRIFTSKALA ──────────────────────────────────────────────────
   Eine Rolle, ein Satz: Groesse, Gewicht, Sperrung, Zeilenhoehe. Das
   Gewicht steht immer ausdruecklich da - ein <span> erbt sonst die 300
   des Koerpers, ein <button> steht auf 400, und dieselbe Beschriftung
   liefe in zwei Staerken (Audit schrift-07). Gleiche Rollen stehen
   gleich: alle Kategorie-Ueberschriften .24em, alle kleinen
   Versalzeilen .16em.
   Die Sperrung steht auch hinter dem letzten Buchstaben. Rechtsbuendige
   Zeilen ziehen sie darum mit margin-right zurueck, zentrierte gleichen
   sie mit padding-left aus.
   Zeilenhoehe normal heisst bei Urbanist 1,2. In den Sprachen mit
   Rueckfallschrift steht die Kategorie-Ueberschrift fest auf 13 px
   (siehe :lang unten) - Japanisch hob sie sonst auf 17 px, Arabisch auf
   15 px und verschob den Takt des Menues. */
:root {
  /* Kategorie-Ueberschrift: MODUS, STIL, E-MAIL, FORMAT … */
  --t-label-groesse: 11px;
  --t-label-gewicht: 400;
  --t-label-sperrung: 0.24em;
  --t-label-zeilenhoehe: normal;
  /* Reiter: die Modus-Knoepfe des Editors */
  --t-reiter-groesse: 11px;
  --t-reiter-gewicht: 400;
  --t-reiter-sperrung: 0.16em;
  --t-reiter-zeilenhoehe: normal;
  /* Kleine Versalzeile, die man drueckt oder liest: ANMELDEN, KOPIEREN,
     Editor-Chips und -Beschriftungen */
  --t-versal-groesse: 9px;
  --t-versal-gewicht: 400;
  --t-versal-sperrung: 0.16em;
  --t-versal-zeilenhoehe: normal;
  /* Statuszeile: dieselbe Versalzeile, leichter */
  --t-status-groesse: 9px;
  --t-status-gewicht: 300;
  --t-status-sperrung: 0.16em;
  --t-status-zeilenhoehe: normal;
  /* Chips im Menue und im Druckfenster */
  --t-chip-groesse: 14px;
  --t-chip-gewicht: 400;
  --t-chip-sperrung: 0;
  --t-chip-zeilenhoehe: normal;
  /* Zaehler: Kredite oben rechts */
  --t-zahl-groesse: 17px;
  --t-zahl-gewicht: 700;
  --t-zahl-sperrung: 0.01em;
  --t-zahl-zeilenhoehe: 1;
  /* Bildnummer im Kontaktbogen, Datum der grossen Historie */
  --t-nummer-groesse: 10px;
  --t-nummer-gewicht: 700;
  --t-nummer-sperrung: 0.08em;
  --t-nummer-zeilenhoehe: 1;
  /* Kleintext im Druckfenster (Zeilen, Zahlen der Bibliothek) */
  --t-klein-groesse: 11px;
  --t-klein-gewicht: 300;
  --t-klein-sperrung: 0;
  --t-klein-zeilenhoehe: 1.5;
  /* Ziffern gleicher Breite (fonts.css, „Urbanist Ziffern“) */
  --t-ziffern: 'Urbanist Ziffern', var(--sans);
}

/* Sprachen ohne Zeichen in den Hausschriften bekommen einen benannten
   Rueckfall statt dem, was das System gerade findet. Zuerst der Mac, dann
   Windows — nur Systemschriften, nichts wird geladen. Lateinisches bleibt
   in Urbanist und Garamond. Die Kategorie-Ueberschrift behaelt ihre
   lateinische Zeilenhoehe. core/i18n.js setzt html[lang]. */
:root:lang(ja),
:root:lang(zh),
:root:lang(ko),
:root:lang(ar),
:root:lang(hi) {
  --t-label-zeilenhoehe: 13px;
}
:root:lang(ja) {
  --sans: 'Urbanist', 'Century Gothic', Futura, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --serif: 'EB Garamond', Georgia, 'Hiragino Sans', 'Yu Gothic', serif;
}
:root:lang(zh) {
  --sans: 'Urbanist', 'Century Gothic', Futura, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --serif: 'EB Garamond', Georgia, 'PingFang SC', 'Microsoft YaHei', serif;
}
:root:lang(ko) {
  --sans: 'Urbanist', 'Century Gothic', Futura, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --serif: 'EB Garamond', Georgia, 'Apple SD Gothic Neo', 'Malgun Gothic', serif;
}
:root:lang(ar) {
  --sans: 'Urbanist', 'Century Gothic', Futura, 'Geeza Pro', 'Segoe UI', sans-serif;
  --serif: 'EB Garamond', Georgia, 'Geeza Pro', 'Segoe UI', serif;
}
:root:lang(hi) {
  --sans: 'Urbanist', 'Century Gothic', Futura, 'Kohinoor Devanagari', 'Nirmala UI', sans-serif;
  --serif: 'EB Garamond', Georgia, 'Kohinoor Devanagari', 'Nirmala UI', serif;
}

:root {
  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Urbanist', 'Century Gothic', Futura, sans-serif;
  /* ── DIE PALETTE ──────────────────────────────────────────────────
     Jede Farbe der App kommt von hier: Schwarz und Weiss, EINE helle
     Grauleiter, eine dunkle fuer Schrift auf Schwarz, zwei Rot mit je
     einer Rolle. Darunter die Rollen - sie sagen, WOFUER ein Grau steht,
     und zeigen auf die Leiter.
     Bewusst eigen und darum nicht hier: die Papiere, die Farbauszuege
     der Aberration (C/M/Y), das Sonnendiagramm, der Maskenpuffer des
     Anzeichnens, das Gelb der Hinweisblase, der Grund des Druckfensters
     und die Schattierung des Kubus. */
  --weiss: #fff;
  --schwarz: #000;
  --grau-100: #f5f5f5; /* ruhige Flaeche: Platzhalter, Werkzeug unter der Hand */
  --grau-200: #e6e6e6; /* Linie, Trenner, Rahmen */
  --grau-250: #dcdcdc; /* gesperrt */
  --grau-300: #d4d4d4; /* Spur: Schieber, Tagesrahmen */
  --grau-400: #b0b0b0; /* Chip in Ruhe, Ueberschrift, der Weg hinaus */
  /* Die Zeichen der unteren Leiste ruhen einen Hauch dunkler als das
     Hellgrau der App - sie stehen ueber dem Bild und brauchen etwas mehr
     Gewicht. */
  --grau-500: #9a9a9a; /* Zeichen in Ruhe, Tagesdatum */
  --grau-600: #686868; /* Text zweiter Ordnung, Chip unter der Hand, Druckgrau */
  --grau-700: #404040; /* schwarze Flaeche unter der Hand (Schwarz bei 75 %) */
  --grau-800: #2e2e2e; /* dunkle Flaeche: gewaehlte Tafelspalte, Zahl unter der Hand */
  /* Zwei Rot, zwei Rollen. Das Rot der Marke fuer alles, was in der Hand
     liegt, markiert ist, wegkommt oder sich wendet; das Stiftrot fuer jeden
     Strich und jede Anmerkung - im Anzeichnen, im Editor und im Druck, samt
     Gummiband. Was gerade nicht geht, ruht grau und wird erst unter dem
     Zeiger rot. */
  --rot-marke: #e8391c;
  --rot-stift: #d81e16;
  --rot-hell: #f28572; /* helle und dunkle Seite des arbeitenden Kubus */
  --rot-dunkel: #a9220e;
  /* Schrift und Linien auf Schwarz: Deckungen von Weiss in fuenf Stufen. */
  --auf-schwarz-100: var(--weiss);
  --auf-schwarz-80: rgba(255, 255, 255, 0.8);
  --auf-schwarz-55: rgba(255, 255, 255, 0.55);
  --auf-schwarz-45: rgba(255, 255, 255, 0.45);
  --auf-schwarz-30: rgba(255, 255, 255, 0.3);
  /* Die dunkle Tafel der Tarife rechnet deckend statt mit Deckung - sie
     schwebt ueber den Farbauszuegen. */
  --tafel-linie: #3a3a3a;
  --tafel-linie-an: #4a4a4a; /* in der gewaehlten Spalte eine Stufe heller */
  --tafel-leise: #7a7a7a;
  --tafel-laut: #bdbdbd;
  --tafel-unter: #1a1a1a; /* Spalte unter dem Zeiger */
  /* Schleier ueber dem Bild, Schatten, Saeume */
  --schleier: rgba(255, 255, 255, 0.9);
  --schleier-dicht: rgba(255, 255, 255, 0.97);
  --schatten-blatt:
    0 0 0.5px rgba(0, 0, 0, 0.16), 0.5px 1px 1.5px rgba(0, 0, 0, 0.09),
    1px 7px 14px -3px rgba(0, 0, 0, 0.05);
  --schatten-schwebt: 0 2px 26px rgba(0, 0, 0, 0.22);
  --schatten-traegt: 0 16px 38px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.2);
  --ring: 0 0 0 1px rgba(0, 0, 0, 0.35);
  --griff-saum: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.55));
  --glut-rot: drop-shadow(0 0 7px var(--rot-marke)) drop-shadow(0 0 3px var(--rot-marke));
  /* Die Rollen */
  --zeichen-ruhe: var(--grau-500);
  --zeichen-hand: var(--schwarz);
  --zeichen-hinaus: var(--grau-400);
  --zeichen-gesperrt: var(--grau-250);
  --zeichen-text: var(--grau-600);
  --linie: var(--grau-200);
  --spur: var(--grau-300);
  /* Die alten Namen */
  --black: var(--schwarz);
  --white: var(--weiss);
  --mid: var(--grau-600);
  --light: var(--grau-400);
  --leiste-grau: var(--grau-500);
  --border: var(--grau-200);
  --xlight: var(--grau-100);
  --green: #4d9a5e;
  --red: var(--rot-marke);
  --sw: 272px; /* Seitenbreite — links und rechts identisch */
  /* Waagerechte Mittelachse des Hauptbildes. Oben steht es 2*pad + 42
     unter der Fensterkante (Rand plus Schriftzug), unten 2*pad + 68
     darueber (Rand plus Fusshoehe) — der Seitenrand faellt beim Mitteln
     heraus, es bleiben (100vh - 26px) / 2. Beide Aufklappmenues haengen
     daran, damit sie mit dem Bild fluchten und nicht mit dem Fenster. */
  --bild-achse: calc((100vh - 26px) / 2);
  /* Hoehe der Menues: drei Materialplaetze statt vier, in derselben
     Groesse wie bisher. Aus der alten Hoehe (100vh - 2*pad - 109) sind
     das drei Viertel. */
  --menue-h: calc(0.75 * (100vh - 2 * var(--pad) - 109px));
  --pad: 28px; /* Fensterrand */
  --ph-dunkel: #232323; /* Platzhalterlinien beim Ueberfahren: fuenffach dunkler als #b0b0b0 */
}