/* mypacing — design-tokens.css
 * Zentrale Design-Tokens ("Aurora"-Design-System). Ersetzt die bislang auf ~90 Seiten
 * einzeln duplizierten :root{...}-Blöcke (identische Variablennamen, aber leicht
 * auseinanderlaufende Werte — s. _NEUAUFBAU_Roadmap.md Abschnitt 1.4). Diese Datei ist
 * ab jetzt die EINE Quelle der Wahrheit für Farben, Radius und Schatten.
 *
 * Herkunft der Werte: das V5-Redesign ("Aurora", 03.08.2026, zuerst auf index.html
 * angewendet) ist der vollständigste, aktuellste Token-Satz (inkl. --deep/--mint/--gold/
 * --rose für Gradient-Buttons und redaktionelle Akzente) und wird hier zum verbindlichen
 * Standard für ALLE Seiten erklärt — auch für Kernbildschirme wie app.html/heute.html,
 * die bisher noch den älteren, kleineren Token-Satz (--r:18px statt 20px, kein --deep)
 * hatten.
 *
 * Einbindung: <link rel="stylesheet" href="/assets/design-tokens.css"> VOR
 * /assets/modern.css und VOR etwaigen noch verbliebenen Seiten-eigenen <style>-Blöcken
 * mit :root{} laden, damit Seiten, die noch nicht vollständig migriert sind, ihre alten
 * Werte übergangsweise weiter überschreiben können (Cascade), statt hart zu brechen.
 * Vollständig migrierte Seiten (s. Fortschritts-Log in _NEUAUFBAU_Roadmap.md) haben
 * ihren eigenen :root-Block komplett entfernt und hängen nur noch an dieser Datei.
 */

@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 650;
  font-display:swap;
  src:url('/assets/webfonts/fraunces-variable.woff2') format('woff2-variations'),
      url('/assets/webfonts/fraunces-variable.woff2') format('woff2');
}

:root{
  /* Flächen & Text */
  --bg:#FBF7F1; --surface:#ffffff; --ink:#20302B; --mut:#71776F; --line:#EAE2D2;
  /* Status/Akzent */
  --good:#2E7D6B; --goodbg:rgba(121,214,188,.16);
  --deep:#123B31; --accent:#79D6BC; --mint:#79D6BC;
  --caution:#8A5A2A; --cautionbg:rgba(232,185,138,.20);
  --alert:#8C3B32; --alertbg:#F7E4DF;
  --lilac:#5B6FA8; --lilacbg:rgba(91,111,168,.12);
  --gold:#E8B98A; --rose:#D98E86;
  /* Form & Tiefe */
  --r:20px; --shadow:0 8px 24px -12px rgba(18,59,49,.16),0 1px 2px rgba(18,59,49,.05);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.disp{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.015em;
  line-height:1.08;margin:0;}
.mono{font-family:'Inter',monospace;font-variant-numeric:tabular-nums}
a{color:var(--deep);text-decoration:none}

/* =====================================================================
 * DARK MODE — identisch zur bisherigen Logik in modern.css (04.08.2026),
 * hier nur konsolidiert an EINER Stelle statt implizit über modern.css.
 * modern.css bleibt zusätzlich geladen (Interaktions-/Bewegungsschicht),
 * überschreibt hier nichts mehr doppelt.
 * ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#121915; --surface:#1C2620; --ink:#EDEAE0; --mut:#9CA79C; --line:#2B3730;
    --good:#5FC7A6; --goodbg:rgba(95,199,166,.18);
    --deep:#8FE2C4; --caution:#E3AD70; --cautionbg:rgba(227,173,112,.16);
    --alert:#E2938A; --alertbg:rgba(226,147,138,.14);
    --lilac:#98A6DA; --lilacbg:rgba(152,166,218,.16);
    --accent:#79D6BC; --mint:#79D6BC; --gold:#E8B98A; --rose:#D98E86;
    --shadow:0 10px 26px -14px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --bg:#121915; --surface:#1C2620; --ink:#EDEAE0; --mut:#9CA79C; --line:#2B3730;
  --good:#5FC7A6; --goodbg:rgba(95,199,166,.18);
  --deep:#8FE2C4; --caution:#E3AD70; --cautionbg:rgba(227,173,112,.16);
  --alert:#E2938A; --alertbg:rgba(226,147,138,.14);
  --lilac:#98A6DA; --lilacbg:rgba(152,166,218,.16);
  --accent:#79D6BC; --mint:#79D6BC; --gold:#E8B98A; --rose:#D98E86;
  --shadow:0 10px 26px -14px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.35);
}