/* Designtokens der Kundenakte. Hell zuerst; alles ab der Marke dark gilt für Dunkel. */
:root {
  --bg: #e8ebee;
  --surface: #f7f8f9;
  --ink: #1b2430;
  --muted: #566474;
  --line: #c9d0d7;
  --tape: #f5c400;
  --ink-on-tape: #1b2430;
  --focus: #2457c5;
  --ok: #17734a;
  --warn: #9a4a00;
  --bad: #b3261e;
  --nav: #1b2430;
  --navfg: #aab6c4;
  --nav-focus: #ffffff;
  --nav-active-bg: rgba(255, 255, 255, .1);
  --tc-rot: #a8201a; --tc-orange: #8f4700; --tc-gruen: #17603c; --tc-blau: #1d4b9e; --tc-grau: #4a5663;
  --av1-bg: #fde9a8; --av1-fg: #6b4f00;
  --av2-bg: #cfe3fb; --av2-fg: #1d4b86;
  --av3-bg: #d8f0df; --av3-fg: #17603c;
  --av4-bg: #f3d6e6; --av4-fg: #7a2455;
  --shadow: 0 1px 2px rgba(27, 36, 48, .06), 0 8px 24px rgba(27, 36, 48, .08);
  --shadow-hover: 0 2px 4px rgba(27, 36, 48, .08), 0 14px 32px rgba(27, 36, 48, .16);
  --ring: rgba(36, 87, 197, .25);
  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --unit: 56px;
  --radius: 10px;
  --radius-lg: 16px;
  color-scheme: light;
}
/*dark*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12171d; --surface: #1b222a; --ink: #e6eaee; --muted: #9aa7b4; --line: #2c3641;
    --tape: #f5c400; --ink-on-tape: #1b2430; --focus: #7fa6f5;
    --ok: #4cc38a; --warn: #e5a04d; --bad: #ff8a80; --nav: #1f2933; --navfg: #9aa7b4; --nav-focus: #ffffff;
    --tc-rot: #ff8a80; --tc-orange: #f0a850; --tc-gruen: #4cc38a; --tc-blau: #8fb4ff; --tc-grau: #b4bfca;
    --nav-active-bg: rgba(255, 255, 255, .1);
    --av1-bg: #4a3d0f; --av1-fg: #ffdf7a; --av2-bg: #163456; --av2-fg: #a9ceff;
    --av3-bg: #17402b; --av3-fg: #a6e3bf; --av4-bg: #4a1f38; --av4-fg: #f5b8d8; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); --shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 32px rgba(0, 0, 0, .5); --ring: rgba(127, 166, 245, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12171d; --surface: #1b222a; --ink: #e6eaee; --muted: #9aa7b4; --line: #2c3641;
  --tape: #f5c400; --ink-on-tape: #1b2430; --focus: #7fa6f5;
  --ok: #4cc38a; --warn: #e5a04d; --bad: #ff8a80; --nav: #1f2933; --navfg: #9aa7b4; --nav-focus: #ffffff;
  --tc-rot: #ff8a80; --tc-orange: #f0a850; --tc-gruen: #4cc38a; --tc-blau: #8fb4ff; --tc-grau: #b4bfca;
  --nav-active-bg: rgba(255, 255, 255, .1);
  --av1-bg: #4a3d0f; --av1-fg: #ffdf7a; --av2-bg: #163456; --av2-fg: #a9ceff;
  --av3-bg: #17402b; --av3-fg: #a6e3bf; --av4-bg: #4a1f38; --av4-fg: #f5b8d8; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); --shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 14px 32px rgba(0, 0, 0, .5); --ring: rgba(127, 166, 245, .35);
  color-scheme: dark;
}