/* Design-Tokens der Jasstafel – 1:1 aus Design/README.md ("Design Tokens").
   Werte bewusst als Referenz-Pixelmasse; Skalierung auf die iPad-Fläche
   erfolgt in tafel.css über eine CSS-Variable --scale. */

:root {
  /* ---- Farben: Tafel ---- */
  --holz-hell: #d9b587;
  --holz-dunkel: #cfa876;
  --rahmen-linie-1: rgba(93, 64, 32, 0.35);
  --rahmen-linie-2: rgba(93, 64, 32, 0.22);
  --rahmen-schrift: #2c4560;
  --schiefer: #2b322e;
  --kreide: #e9e8dc;
  --kreide-linie: rgba(233, 232, 220, 0.6);
  --hairline-schwach: rgba(233, 232, 220, 0.16);
  --hairline-stark: rgba(233, 232, 220, 0.25);
  --leiste-grund: #15181a;
  --bedienflaeche: #22262a;
  --sekundaertaste: #3a4046;
  --zifferntaste: #5d646b;
  --abbruch: #2a2f33;
  --akzent: #5980a6;
  --akzent-dunkel: #416180;
  --papier: #f2f2f3;
  --tinte: #1d1f20;

  /* ---- Typografie ---- */
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  /* ---- Geometrie / Radien ---- */
  --radius-holz: 26px;
  --radius-zierrahmen: 18px;
  --radius-tafel: 14px;
  --radius-bedien: 0; /* eckig ist Absicht */

  /* ---- Strichgeometrie ---- */
  --strich-breite: 3px;
  --strich-hoehe: 42px;
  --strich-hoehe-50: 40px;
  --strich-neigung: 4deg;
  --strich-gap: 8px;
  --querstrich-neigung: -16deg;

  /* ---- Abstände (Systemvielfache) ---- */
  --sp-1: 1px;
  --sp-5: 5px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-26: 26px;
  --sp-40: 40px;
  --sp-44: 44px;
  --sp-60: 60px;

  /* ---- Schatten ---- */
  --shadow-holz: 0 20px 54px rgba(29, 31, 32, 0.4);
  --shadow-tafel-innen: inset 0 0 70px rgba(0, 0, 0, 0.55);
  --shadow-dropdown-oben: 0 -10px 30px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.6);

  /* ---- Referenzmasse der Tafel ---- */
  --tafel-w: 880px;
  --tafel-h: 1240px;
  color-scheme: dark;
}