/* Sentenzo Design-Tokens, Entwurf A „Redaktion“ (Entscheidung 40, 30.10.2026). Einzige Quelle für Farben und Schriften von sentenzo.com und App.
   Nicht in website/ oder app/public/ bearbeiten: dort liegen Kopien. Ändern hier, dann `node scripts/design_tokens.mjs` (kopiert),
   `node scripts/design_tokens.mjs --check` (prüft, läuft auch in scripts/website_check.mjs). Schriften liegen je Auslieferung unter /fonts/. */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("/fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/fonts/figtree-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* Hell: Papierweiß statt Grau, Tinte, Ultramarin als einziger Akzent, Gelb nur für das neue Wort.
   --cobalt heißt aus Gründen der Kompatibilität weiter so, trägt aber das Ultramarin aus Entwurf A. */
:root {
  --paper: #fbfaf7; --surface: #ffffff; --ink: #141b2d; --muted: #545e78;
  --line: #e3e0d8; --line-strong: #cfcac0; --line-soft: #eceae4; --track: #eceae4; --dotted: #9a9fad;
  --cobalt: #2335b8; --cobalt-ink: #ffffff; --cobalt-soft: #e9ebf8; --on-cobalt-muted: #dce0ff;
  --marker: #ffe14d; --marker-ink: #141b2d; --marker-h: 62%;
  --danger: #b3261e; --ok: #1f7a4d; --ok-soft: #e3f2ea;
  --photo: #d8d2c4;                                   /* Fläche, solange ein Foto lädt */
  --band: #141b2d; --band-ink: #fbfaf7; --band-muted: #c9cfdd; --band-soft: #232b40;   /* dunkle Bänder: Zahlen, Geschichten-Karte */
  --flag-ring: rgba(20, 27, 45, .18);
  --shadow: 0 1px 0 var(--line), 0 24px 48px -32px rgba(20, 27, 45, .35);
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
/* Dunkel: bisherige Nachtfarben, Akzent und Bänder angeglichen (kein eigener Entwurf). Marker in voller Höhe, sonst stünde dunkle Schrift halb auf dunklem Grund. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1320; --surface: #161d2d; --ink: #e8ecf5; --muted: #9ba5bd;
    --line: #283149; --line-strong: #34405e; --line-soft: #222a3e; --track: #232c44; --dotted: #6b7593;
    --cobalt: #9aa8ff; --cobalt-ink: #0e1320; --cobalt-soft: #1e2847; --on-cobalt-muted: #26306a;
    --marker: #e9c93c; --marker-ink: #141b2d; --marker-h: 100%;
    --danger: #ff8a80; --ok: #6fd3a0; --ok-soft: #15322a;
    --photo: #283149; --band: #1b2338; --band-ink: #e8ecf5; --band-muted: #9ba5bd; --band-soft: #263049;
    --flag-ring: rgba(232, 236, 245, .25); --shadow: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1320; --surface: #161d2d; --ink: #e8ecf5; --muted: #9ba5bd;
  --line: #283149; --line-strong: #34405e; --line-soft: #222a3e; --track: #232c44; --dotted: #6b7593;
  --cobalt: #9aa8ff; --cobalt-ink: #0e1320; --cobalt-soft: #1e2847; --on-cobalt-muted: #26306a;
  --marker: #e9c93c; --marker-ink: #141b2d; --marker-h: 100%;
  --danger: #ff8a80; --ok: #6fd3a0; --ok-soft: #15322a;
  --photo: #283149; --band: #1b2338; --band-ink: #e8ecf5; --band-muted: #9ba5bd; --band-soft: #263049;
  --flag-ring: rgba(232, 236, 245, .25); --shadow: none; color-scheme: dark;
}

/* Flagge immer mit Sprachnamen (Entscheidung 40): schlichte Streifen, ohne Wappen. <span class="flag flag-it" aria-hidden="true"></span> */
.flag { display: inline-block; width: 1.5em; height: 1em; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px var(--flag-ring); vertical-align: -.12em; }
.flag-it { background: linear-gradient(90deg, #009246 33.4%, #ffffff 33.4% 66.6%, #ce2b37 66.6%); }
.flag-fr { background: linear-gradient(90deg, #002654 33.4%, #ffffff 33.4% 66.6%, #ce1126 66.6%); }
.flag-es { background: linear-gradient(180deg, #aa151b 25%, #f1bf00 25% 75%, #aa151b 75%); }