/* ============================================================
   zk-design — Token-Layer. EIN Akzent, zwei Themes.
   .ds        = Wrapper-Scope + Light-Theme (Default)
   .ds.dark   = Dark-Theme (Overrides)
   ------------------------------------------------------------
   ZENTRALE FARBANPASSUNG PRO PROJEKT:
   Diese Datei NICHT forken. Stattdessen nach tokens.css ein
   projekteigenes brand.css laden, das einzelne Tokens auf
   .ds / .ds.dark ueberschreibt (siehe brand.example.css).
   Token-Namen sind stabil und werden von components.css,
   contrast.css und der Autocontrast-Engine (contrast.php) gelesen.
   ============================================================ */

.ds {
  /* fonts */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ---------- LIGHT (Default) ---------- */
  --bg: #f1f4f2;
  --surface: #ffffff;
  --surface-2: #f7f8f7;
  --line: #dde3e1;
  --line-soft: #e9edeb;
  --ink: #191f1c;
  --ink-2: #515c57;
  --ink-3: #6d7874;
  --accent: #15734b;
  --accent-press: #0f5c3b;
  --accent-ink: #126043;
  --accent-soft: #e2ede7;
  --on-accent: #ffffff;
  --danger: #c0392b;
  --danger-soft: #fbe9e7;
  --on-danger: #ffffff;
  --warn: #d98a0b;
  --warn-soft: #fdf1dc;
  --on-warn: #1f1404;
  --ok: #1f7a4d;
  --ok-soft: #dcefe3;
  --on-ok: #ffffff;
  --info: #2757a6;
  --info-soft: #dde7f7;
  --on-info: #ffffff;
  /* Kategorien (z. B. Projekte), gedaempft, Text >= 4.5:1 */
  --cat-1: #8a2f5b;
  --cat-1-soft: #f4dfe9;
  --cat-2: #2757a6;
  --cat-2-soft: #dde7f7;
  --cat-3: #1f6b45;
  --cat-3-soft: #dcefe3;
  --cat-4: #80530a;
  --cat-4-soft: #f7ead2;
  --cat-5: #5b3f9e;
  --cat-5-soft: #e9e3f6;
  --cat-6: #3d5a6c;
  --cat-6-soft: #e1e9ee;
  /* Diagrammserien (feste Reihenfolge, nie zyklisch; Farbe folgt der Sache, nicht dem Rang).
     Validiert mit dem dataviz-Pruefskript (OKLab, CVD): hell auf #ffffff, dunkel auf #191f1c
     und #17171a bestehen alle Pruefungen; hell liegen aqua, gelb, magenta unter 3:1, dort
     braucht es sichtbare Beschriftung oder die Tabellenansicht. Ueber vier Serien Rest zu
     "Sonstige" falten. Nicht fuer Tags (dafuer --cat-*), nicht fuer Status. */
  --series-1: #2a78d6;  /* blau */
  --series-2: #eb6834;  /* orange */
  --series-3: #1baf7a;  /* aqua */
  --series-4: #eda100;  /* gelb */
  --series-5: #e87ba4;  /* magenta */
  --series-6: #008300;  /* gruen */
  --series-7: #6250d6;  /* violett */
  --series-8: #e34948;  /* rot */
  --you-bg: var(--accent);
  --you-ink: var(--on-accent);
  --owner-bg: #ffffff;
  --owner-ink: #1b261f;
  --owner-line: #e3e8e6;
  --coach-bg: #f4f6f5;
  --coach-ink: #323e39;
  --r-card: 20px;
  --r-el: 13px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(18,40,28,.05), 0 10px 26px rgba(18,40,28,.07);
  --shadow-lg: 0 2px 6px rgba(18,40,28,.07), 0 24px 50px rgba(18,40,28,.14);
  --bar-track: #e3e8e6;

  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }

/* ---------- DARK ---------- */
.ds.dark {
  --bg: #101412;
  --surface: #191f1c;
  --surface-2: #202724;
  --line: #2e3834;
  --line-soft: #252d29;
  --ink: #eef1f0;
  --ink-2: #a9b2ae;
  --ink-3: #87928d;
  --accent: #34c98a;
  --accent-press: #2bb077;
  --accent-ink: #5cdca2;
  --accent-soft: rgba(52,201,138,.12);
  --on-accent: #06150e;
  --danger: #e5484d;
  --danger-soft: rgba(229,72,77,.14);
  --on-danger: #1a0505;
  --warn: #f0a83a;
  --warn-soft: rgba(240,168,58,.14);
  --on-warn: #1f1404;
  --ok: #4cc38a;
  --ok-soft: rgba(76,195,138,.14);
  --on-ok: #04140c;
  --info: #6c9cf0;
  --info-soft: rgba(108,156,240,.14);
  --on-info: #050c1a;
  --cat-1: #e58bb4;
  --cat-1-soft: rgba(229,139,180,0.14);
  --cat-2: #8fb2f2;
  --cat-2-soft: rgba(143,178,242,0.14);
  --cat-3: #6fd3a0;
  --cat-3-soft: rgba(111,211,160,0.14);
  --cat-4: #e6b65c;
  --cat-4-soft: rgba(230,182,92,0.14);
  --cat-5: #b9a2f0;
  --cat-5-soft: rgba(185,162,240,0.14);
  --cat-6: #9fbccc;
  --cat-6-soft: rgba(159,188,204,0.14);
  /* Diagrammserien, dunkel gestuft (nicht gespiegelt), siehe Kommentar im hellen Block. */
  --series-1: #3987e5;  /* blau */
  --series-2: #d95926;  /* orange */
  --series-3: #199e70;  /* aqua */
  --series-4: #c98500;  /* gelb */
  --series-5: #d55181;  /* magenta */
  --series-6: #008300;  /* gruen */
  --series-7: #9085e9;  /* violett */
  --series-8: #e66767;  /* rot */
  --you-bg: var(--accent);
  --you-ink: var(--on-accent);
  --owner-bg: #1e2422;
  --owner-ink: #eef3ef;
  --owner-line: #2e3834;
  --coach-bg: #1e2422;
  --coach-ink: #d2dad7;
  --r-card: 18px;
  --r-el: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.4);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 28px 60px rgba(0,0,0,.55);
  --bar-track: #27302c;
}

/* Dunkel nach Systemeinstellung ohne JavaScript (0.5.0): dieselben Werte wie .ds.dark, wenn weder .light noch .dark
   gesetzt ist. Stil editorial ist ausgenommen (dunkel nur mit .dark). Eine brand.css, die den dunklen Akzent setzt,
   braucht denselben @media-Block (siehe brand.example.css). */
@media (prefers-color-scheme: dark) {
  .ds:not(.light):not(.dark):not(.editorial) {
    --bg: #101412;
    --surface: #191f1c;
    --surface-2: #202724;
    --line: #2e3834;
    --line-soft: #252d29;
    --ink: #eef1f0;
    --ink-2: #a9b2ae;
    --ink-3: #87928d;
    --accent: #34c98a;
    --accent-press: #2bb077;
    --accent-ink: #5cdca2;
    --accent-soft: rgba(52,201,138,.12);
    --on-accent: #06150e;
    --danger: #e5484d;
    --danger-soft: rgba(229,72,77,.14);
    --on-danger: #1a0505;
    --warn: #f0a83a;
    --warn-soft: rgba(240,168,58,.14);
    --on-warn: #1f1404;
    --ok: #4cc38a;
    --ok-soft: rgba(76,195,138,.14);
    --on-ok: #04140c;
    --info: #6c9cf0;
    --info-soft: rgba(108,156,240,.14);
    --on-info: #050c1a;
    --cat-1: #e58bb4;
    --cat-1-soft: rgba(229,139,180,0.14);
    --cat-2: #8fb2f2;
    --cat-2-soft: rgba(143,178,242,0.14);
    --cat-3: #6fd3a0;
    --cat-3-soft: rgba(111,211,160,0.14);
    --cat-4: #e6b65c;
    --cat-4-soft: rgba(230,182,92,0.14);
    --cat-5: #b9a2f0;
    --cat-5-soft: rgba(185,162,240,0.14);
    --cat-6: #9fbccc;
    --cat-6-soft: rgba(159,188,204,0.14);
    /* Diagrammserien, dunkel gestuft (nicht gespiegelt), siehe Kommentar im hellen Block. */
    --series-1: #3987e5;  /* blau */
    --series-2: #d95926;  /* orange */
    --series-3: #199e70;  /* aqua */
    --series-4: #c98500;  /* gelb */
    --series-5: #d55181;  /* magenta */
    --series-6: #008300;  /* gruen */
    --series-7: #9085e9;  /* violett */
    --series-8: #e66767;  /* rot */
    --you-bg: var(--accent);
    --you-ink: var(--on-accent);
    --owner-bg: #1e2422;
    --owner-ink: #eef3ef;
    --owner-line: #2e3834;
    --coach-bg: #1e2422;
    --coach-ink: #d2dad7;
    --r-card: 18px;
    --r-el: 12px;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 30px rgba(0,0,0,.4);
    --shadow-lg: 0 2px 8px rgba(0,0,0,.4), 0 28px 60px rgba(0,0,0,.55);
    --bar-track: #27302c;
  }
}

/* Optionaler expliziter Alias: .ds.light == .ds (Default). Praktisch, wenn ein
   Projekt das Theme datengesteuert per Klasse setzt (light/dark statt nur dark). */
.ds.light { }