/*
  Gestaltungs-Tokens — Bible §7.

  Farben werden AUSSCHLIESSLICH hier definiert. Kein Bauteil schreibt einen
  Farbwert direkt hin, sonst bricht eines der beiden Themes.

  Drei Zustände sind abzudecken: helles System, dunkles System und die
  ausdrückliche Wahl über data-theme. Deshalb steht die volle helle Palette
  auf blankem :root, die dunkle einmal in der Media Query (gegen eine
  ausdrückliche Hell-Wahl abgesichert) und einmal unter [data-theme="dark"].
*/

:root {
  /* Flächen und Text */
  --ground: #f1f2ee;
  --surface: #fbfbf9;
  --surface-2: #e7e9e2;
  --surface-3: #dcdfd6;
  --ink: #16191b;
  --ink-2: #454b4f;
  --muted: #737a7e;
  --rule: #d8dbd2;
  --rule-strong: #b9beb3;

  /* Akzent und Signale */
  --accent: #12456b;
  --accent-ink: #fbfbf9;
  --accent-soft: #e0e8ef;
  --pos: #1b6b5a;
  --neg: #9e3b36;
  --warn: #8c6822;

  /* Kontenpalette */
  --acc-kobalt: #2b5f86;
  --acc-petrol: #2f7a6b;
  --acc-messing: #8c6822;
  --acc-pflaume: #6a4a7c;
  --acc-rost: #a0522a;
  --acc-schiefer: #4d5b66;

  /* Schrift. Archivo, sobald selbst ausgeliefert; bis dahin trägt der
     Systemstapel. Beide sind gemässigte Grotesken, der Bruch ist klein. */
  --f-ui: 'Archivo', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system,
    sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Abstandsskala — nichts dazwischen (Bible §7) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 20px;
  --s5: 32px;
  --s6: 52px;

  --radius: 4px;
  --tap: 44px;
  --nav-h: 60px;
  --header-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #14171a;
    --surface: #1a1e22;
    --surface-2: #232931;
    --surface-3: #2c333c;
    --ink: #eceee9;
    --ink-2: #c0c6c2;
    --muted: #8a9197;
    --rule: #2c3238;
    --rule-strong: #414951;

    --accent: #82b6da;
    --accent-ink: #10161b;
    --accent-soft: #1b2b37;
    --pos: #57bba0;
    --neg: #db837c;
    --warn: #cfa850;

    --acc-kobalt: #6ea3cc;
    --acc-petrol: #5cae9b;
    --acc-messing: #c9a052;
    --acc-pflaume: #a186b5;
    --acc-rost: #cd8659;
    --acc-schiefer: #8d9aa6;
  }
}

:root[data-theme='dark'] {
  --ground: #14171a;
  --surface: #1a1e22;
  --surface-2: #232931;
  --surface-3: #2c333c;
  --ink: #eceee9;
  --ink-2: #c0c6c2;
  --muted: #8a9197;
  --rule: #2c3238;
  --rule-strong: #414951;

  --accent: #82b6da;
  --accent-ink: #10161b;
  --accent-soft: #1b2b37;
  --pos: #57bba0;
  --neg: #db837c;
  --warn: #cfa850;

  --acc-kobalt: #6ea3cc;
  --acc-petrol: #5cae9b;
  --acc-messing: #c9a052;
  --acc-pflaume: #a186b5;
  --acc-rost: #cd8659;
  --acc-schiefer: #8d9aa6;
}