/* Burbacher Pilzfarm – Design-Tokens
   Welt: naturkundliche Lehrtafel. Tafelgrund im Logo-Oliv, weiße Linienzeichnung,
   Lesetafeln auf Flechtengrund, Rost für Nummern, Fliegenpilzrot nur für Status. */

@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-var.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("../fonts/alegreya-italic-var.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/alegreya-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Grundpalette (Namen aus Wald, Erde, Pilz) */
  --c-oliv: #5b5b40;          /* Logo-Grund, Tafelfläche */
  --c-oliv-tief: #47472f;     /* Tafelfläche gedrückt / Hover */
  --c-tanne: #2f4a35;         /* tiefe Tafel, Fuß */
  --c-waldboden: #23201b;     /* Text */
  --c-humus: #4a443a;         /* Sekundärtext auf hell */
  --c-flechte: #eceee2;       /* Lesegrund, kühl-grünlich */
  --c-papier: #f8f8f1;        /* Tafelpapier, Formularflächen */
  --c-kreide: #f4f2e7;        /* Text und Linien auf Tafelgrund */
  --c-kreide-2: #d4d3bd;      /* Sekundärtext auf Tafelgrund */
  --c-linie: #9b9a80;         /* Haarlinien auf hell */
  --c-rost: #9c4f22;          /* Schüppling-Rost: Nummern, Marker, Akzent */
  --c-rost-hell: #e0a35c;     /* Rost auf Tafelgrund */
  --c-ocker: #c99a3b;         /* Hutocker: Hervorhebung, Info-Banner */
  --c-fliegenpilz: #b3362b;   /* nur Status: ausgebucht, abgesagt, wichtig */
  --c-moos: #4f6b2a;          /* Status geöffnet auf hell */
  --c-moos-hell: #b7c97a;     /* Status geöffnet auf Tafelgrund */

  /* Rollen */
  --bg: var(--c-flechte);
  --surface: var(--c-papier);
  --text: var(--c-waldboden);
  --text-2: var(--c-humus);
  --rule: var(--c-linie);
  --accent: var(--c-rost);
  --link: var(--c-tanne);
  --focus: var(--c-rost);

  --tafel-bg: var(--c-oliv);
  --tafel-text: var(--c-kreide);
  --tafel-text-2: var(--c-kreide-2);
  --tafel-accent: var(--c-rost-hell);
  --tafel-rule: rgb(244 242 231 / .42);

  /* Schrift */
  --font-serif: "Alegreya", "Iowan Old Style", Georgia, serif;
  --font-sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --font-label: "Oswald", "Arial Narrow", sans-serif;

  --fs-0: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);   /* Fließtext, min. 17px */
  --fs--1: clamp(.9375rem, .9rem + .15vw, 1rem);
  --fs--2: .8125rem;
  --fs-1: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --fs-2: clamp(1.5rem, 1.3rem + .9vw, 2.125rem);
  --fs-3: clamp(2rem, 1.6rem + 1.8vw, 3.125rem);
  --fs-4: clamp(2.5rem, 1.8rem + 3.2vw, 4.75rem);

  --lh-body: 1.55;
  --lh-tight: 1.08;
  --measure: 68ch;

  /* Raum (8er-Raster, fließend für Abschnitte) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
  --section: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --page-max: 78rem;

  /* Form */
  --radius: 2px;              /* gedruckte Tafel, kaum gerundet */
  --hair: 1px;
  --frame-gap: 5px;           /* Abstand Doppelrahmen */
  --shadow-1: 0 1px 2px rgb(35 32 27 / .08), 0 6px 18px -8px rgb(35 32 27 / .22);
  --shadow-2: 0 2px 4px rgb(35 32 27 / .1), 0 18px 40px -16px rgb(35 32 27 / .35);

  /* Bewegung */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: 160ms; --dur-2: 320ms; --dur-draw: 1400ms;
}

/* Dunkelmodus: Tafeln bleiben, Lesegrund wird Nacht im Wald */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1b1c16;
    --surface: #24251d;
    --text: #ecebdc;
    --text-2: #c2c0a8;
    --rule: #5d5c48;
    --accent: #e0a35c;
    --link: #c9d79a;
    --focus: #e0a35c;
    --tafel-bg: #3c3c29;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 6px 18px -8px rgb(0 0 0 / .5);
    --shadow-2: 0 2px 4px rgb(0 0 0 / .3), 0 18px 40px -16px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1c16;
  --surface: #24251d;
  --text: #ecebdc;
  --text-2: #c2c0a8;
  --rule: #5d5c48;
  --accent: #e0a35c;
  --link: #c9d79a;
  --focus: #e0a35c;
  --tafel-bg: #3c3c29;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 6px 18px -8px rgb(0 0 0 / .5);
  --shadow-2: 0 2px 4px rgb(0 0 0 / .3), 0 18px 40px -16px rgb(0 0 0 / .6);
}