@font-face {
  font-family: "Public Sans";
  src: url("../assets/fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-grotesque-latin-opsz-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
}
:root {
  --sand-50: #FBF8F3; --sand-100: #F6F1E9; --sand-200: #EDE5D8; --sand-300: #E0D5C3;
  --sand-400: #C9BBA5; --sand-500: #A8987F;
  --teal-50: #E8F3F2; --teal-100: #CFE7E5; --teal-300: #7FC2BF; --teal-500: #2A9D9A;
  --teal-600: #238684; --teal-700: #1D6E6C; --teal-800: #175755;
  --copper-100: #F8E6D8; --copper-500: #E0935A; --copper-600: #C97A42; --copper-700: #A5602F;
  --ink-900: #2B2F33; --ink-700: #4A4F54; --ink-500: #6B6F72; --ink-300: #9A9C9C; --white: #FFFFFF;
  --ok-fg: #1D6E6C; --ok-bg: #CFE7E5; --err-fg: #A94A38; --err-bg: #F3DDD6;

  /* Feste Töne für Schrift auf dunklen Flächen. Bleiben im dunklen Schema gleich. */
  --fixed-sand-50: #FBF8F3; --fixed-sand-100: #F6F1E9; --fixed-sand-200: #EDE5D8; --fixed-sand-300: #E0D5C3; --fixed-ink-900: #2B2F33;
  --fixed-teal-300: #7FC2BF; --fixed-teal-700: #1D6E6C; --fixed-teal-800: #175755;
  --fixed-ink-700: #4A4F54; --fixed-ink-500: #6B6F72;

  --font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;

  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem;
  --radius: 14px;
  --maxw: 68rem;

  /* Tafel: Teal-800-Fläche, Sand-Schrift, Klappziffern in Kupfer. Nur abgeleitet aus der Palette. */
  --board: var(--fixed-teal-800);
  --board-row-active: var(--fixed-teal-700);
  --board-ok: color-mix(in srgb, var(--fixed-teal-300) 72%, var(--fixed-sand-50)); /* Status „entlastet“ auf der Tafel, AA auf Teal 800 */
  --board-line: color-mix(in srgb, var(--fixed-teal-300) 26%, var(--fixed-teal-800));
  --board-tile: color-mix(in srgb, var(--fixed-teal-800) 64%, var(--fixed-ink-900));
  --board-tile-top: color-mix(in srgb, var(--fixed-teal-800) 76%, var(--fixed-ink-900));
  --board-seam: color-mix(in srgb, var(--fixed-ink-900) 75%, var(--fixed-teal-800));
  --board-ink: var(--fixed-sand-100);
  --board-ink-strong: var(--fixed-sand-50);
  --board-ink-soft: var(--fixed-sand-300);
  --board-digit: color-mix(in srgb, var(--copper-500) 55%, var(--copper-100)); /* Kupfer, aufgehellt für AA auf Kachel und Tafel */
  --shade: var(--fixed-ink-900); /* Schatten und Abdunkeln, im dunklen Schema Schwarz */
  --shadow-tile: 0 1px 2px color-mix(in srgb, var(--fixed-ink-900) 45%, transparent);
}

/* Dunkles Farbschema. Nur aktiv mit data-theme="dark" am <html> (Vorschau über ?theme=dark).
   Gleiche Rollen wie hell: Sand = Flächen, Ink = Schrift, Teal = Akzent, Kupfer = CTAs und Zahlen. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --sand-50: #1F2427; --sand-100: #171B1D; --sand-200: #252B2E; --sand-300: #353D40;
  --sand-400: #4C5558; --sand-500: #7C8487;
  --ink-900: #EEE8DE; --ink-700: #C9C2B7; --ink-500: #A39C91; --ink-300: #80857F;
  --teal-50: #16302F; --teal-100: #1E4644; --teal-300: #7FC2BF; --teal-500: #3FB1AD;
  --teal-600: #5BBAB6; --teal-700: #7FC2BF; --teal-800: #175755;
  --ok-fg: #9FD3D0; --ok-bg: #1E4644; --err-fg: #F2A893; --err-bg: #4A2821;
  --shade: #000000;
}