/* Designsystem Feldbuch: Tokens.
   ===========================================================================
   Die Werte stammen unveraendert aus hybrid-coach-feldbuch.html, Abschnitt 04.
   Wer sie aendert, aendert das Designsystem und nicht nur eine Farbe.

   Light ist der Standard (Pergament), Dark ist Espresso. Kein reines Weiss,
   kein reines Schwarz: Der hellste Ton ist #F8F3E7, der dunkelste #1C1712.
   =========================================================================== */

:root {
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "IBM Plex Sans", system-ui, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typ-Skala. Nichts dazwischen erfinden. */
  --t-label: 11px;
  --t-meta: 13px;
  --t-body: 15px;
  --t-card: 18px;
  --t-screen: 26px;
  --t-metric: 42px;
  --t-hero: 64px;

  /* Spacing-Raster 4 px */
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 20px; --s5: 28px;
}

.app {
  /* Pergament (Light, Standard) */
  --bg:#EFE7D6; --bg-2:#E7DDC8; --surface:#F8F3E7; --surface-2:#EFE8D8; --line:#DDD1B8; --line-2:#C9BA9C;
  --ink:#2A2218; --ink-2:#5F5344; --ink-3:#8E8170;
  --accent:#5E7A57; --accent-deep:#425A3E; --accent-ink:#F8F3E7; --accent-soft:rgba(94,122,87,.13);
  --lift:#B8773F; --run:#6E8C5A; --ride:#6F8F94;
  --ok:#5E8A52; --warn:#B98A2E; --bad:#A8503C;
  --r:14px; --r-s:8px;
  font-family:var(--f-body);color:var(--ink);background:var(--bg);
  font-variant-numeric:tabular-nums;
}

.app.dark {
  /* Espresso (Dark) */
  --bg:#1C1712; --bg-2:#221C16; --surface:#2A231C; --surface-2:#332B22; --line:#3E342A; --line-2:#4E4335;
  --ink:#EFE6D4; --ink-2:#C2B39B; --ink-3:#8A7C69;
  --accent:#A3B98F; --accent-deep:#6E8A68; --accent-ink:#1C1712; --accent-soft:rgba(163,185,143,.14);
  --lift:#D19A62; --run:#A3B98F; --ride:#8FAAB0;
  --ok:#8FB07C; --warn:#D9AC5C; --bad:#D07B66;
}

/* Systemeinstellung, solange nichts von Hand gewaehlt wurde. Die Klasse .dark
   setzt der Nutzer, das Medium-Query nur die Voreinstellung. */
@media (prefers-color-scheme: dark) {
  .app:not(.light):not(.dark) {
    --bg:#1C1712; --bg-2:#221C16; --surface:#2A231C; --surface-2:#332B22; --line:#3E342A; --line-2:#4E4335;
    --ink:#EFE6D4; --ink-2:#C2B39B; --ink-3:#8A7C69;
    --accent:#A3B98F; --accent-deep:#6E8A68; --accent-ink:#1C1712; --accent-soft:rgba(163,185,143,.14);
    --lift:#D19A62; --run:#A3B98F; --ride:#8FAAB0;
    --ok:#8FB07C; --warn:#D9AC5C; --bad:#D07B66;
  }
}

/* ---------------------------------------------------------------------------
   Uebergang: Die Ansichten Fortschritt, Plan und Coach sprechen noch die
   Variablennamen der Vorgaengerfassung an. Statt sie alle anzufassen, zeigen
   die alten Namen auf die Feldbuch-Tokens. Neue Regeln benutzen sie nicht.

   Die Zuordnung der Diagrammserien ist keine Willkuer: Salbei-Tief, Ocker,
   Pastellblau und Ziegel sind die vier Toene der Palette mit dem groessten
   Abstand zueinander. Er reicht trotzdem nicht fuer Rot-Gruen-Schwaeche,
   deshalb tragen mehrreihige Diagramme zusaetzlich unterschiedliche
   Strichmuster -- Farbe ist dort nie das einzige Merkmal.
   --------------------------------------------------------------------------- */
.app {
  --series-1: var(--accent-deep);
  --series-2: var(--lift);
  --series-3: var(--ride);
  --series-4: var(--warn);
  --series-5: var(--bad);
  --series-7: var(--ink-3);

  --plane: var(--bg);
  --surface-1: var(--surface);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --border: var(--line);
  --border-strong: var(--line-2);
  --grid: var(--line);
  --axis: var(--line-2);
  --good: var(--ok);
  --warning: var(--warn);
  --critical: var(--bad);
  --success-text: var(--ok);
  --accent-soft-legacy: var(--accent-soft);
  --radius: var(--r-s);
  --radius-lg: var(--r);
  --gap: 14px;
  --serif: var(--f-display);
  --sans: var(--f-body);
}