/* ToolBock Fahrtenbuch – Tokens. Erzeugt aus docs/design-system/tokens.json; nicht von Hand aendern.
   Dunkelmodus unter html.dark (so schaltet ToolBock), siehe README „Umsetzung in ToolBock“. */

@font-face { font-family: "Bitter"; src: url("/fonts/bitter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("/fonts/bitter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url("/fonts/bitter-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --papier: #f4f1ea;
  --papier-tief: #efebe2;
  --flaeche: #fffdf8;
  --flaeche-aktiv: #fffdf8;
  --linie: #ddd5c5;
  --linie-kontrolle: #8a8172;
  --tinte: #1f2a37;
  --tinte-leise: #5c6470;
  --vcp-blau: #004287;
  --vcp-blau-tief: #002a57;
  --auf-blau: #ffffff;
  --akzent: var(--vcp-blau);
  --akzent-tief: var(--vcp-blau-tief);
  --auf-akzent: var(--auf-blau);
  --fokus: var(--akzent);
  --feuerrot: #c2323f;
  --waldgruen: #23781f;
  --wasserblau: #00668f;
  --feuergelb: #fecf16;
  --marker: #fecf16;
  --tint-blau: #dfe7f1;
  --tint-gelb: #fbefc0;
  --tint-gruen: #dcefd9;
  --tint-rot: #f9e1e2;
  --schatten-knopf: 0 2px 0 #002a57;
  --schatten-karte: 0 1px 0 #ddd5c5, 0 8px 24px -16px rgba(40, 30, 10, 0.35);
  --font-display: Bitter, Georgia, serif;
  --font-text: "Atkinson Hyperlegible", system-ui, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --ziel-touch: 44px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-rund: 999px;
  color-scheme: light;
}

html.dark {
  --papier: #16191d;
  --papier-tief: #1b1f24;
  --flaeche: #1f2328;
  --flaeche-aktiv: #262b31;
  --linie: #3a4048;
  --linie-kontrolle: #7b828c;
  --tinte: #ece7dc;
  --tinte-leise: #aaa59b;
  --vcp-blau: #8db4ea;
  --vcp-blau-tief: #5b82b8;
  --auf-blau: #0f1620;
  --feuerrot: #f2868f;
  --waldgruen: #7ccf76;
  --wasserblau: #6cc8ef;
  --marker: rgba(254, 207, 22, 0.35);
  --tint-blau: #24364f;
  --tint-gelb: #3d3418;
  --tint-gruen: #22381f;
  --tint-rot: #3f2326;
  --schatten-knopf: 0 2px 0 #5b82b8;
  --schatten-karte: 0 1px 0 #3a4048, 0 8px 24px -16px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}