/* FACKELPFAD · Vergleichsentwurf „Belichteter Pfad“
   Die sechs Markenfarben haben feste Bedeutungen. Tonwerte sind ausschließlich
   daraus abgeleitet; Orange ist Licht/Aktion, Fayence ist Ziel/Sicherheit. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("marke/fonts/atkinson-hyperlegible-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("marke/fonts/atkinson-hyperlegible-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("marke/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("marke/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: dark;

  --nachtplatte: #081317;
  --tiefenblau: #122A30;
  --kalk: #E8DCC0;
  --fackelorange: #D97932;
  --fayence: #3E9D91;
  --gefahr: #E17363;

  /* Vertrag mit der Canvas-Spiellogik. */
  --farbe-hintergrund: var(--nachtplatte);
  --farbe-flaeche: var(--tiefenblau);
  --farbe-text: var(--kalk);
  --farbe-text-gedaempft: var(--kalk);
  --farbe-akzent: var(--fackelorange);
  --farbe-akzent-text: var(--nachtplatte);
  --farbe-erfolg: var(--fayence);
  --farbe-warnung: var(--fackelorange);
  --farbe-fehler: var(--gefahr);
  --farbe-fackel: var(--fackelorange);
  --farbe-stein: #29454A;
  --farbe-sand: var(--kalk);
  --farbe-gold: var(--kalk);

  --linie: color-mix(in srgb, var(--kalk) 28%, transparent);
  --linie-stark: color-mix(in srgb, var(--kalk) 58%, transparent);
  --flaeche-hell: color-mix(in srgb, var(--tiefenblau) 82%, var(--kalk));
  --flaeche-tief: color-mix(in srgb, var(--nachtplatte) 76%, var(--tiefenblau));
  --text-leise: color-mix(in srgb, var(--kalk) 72%, var(--nachtplatte));
  --schleier: color-mix(in srgb, var(--nachtplatte) 92%, transparent);

  --schrift-anzeige: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --schrift-text: "Atkinson Hyperlegible", "Segoe UI", Roboto, sans-serif;
  --schrift-zahl: "Atkinson Hyperlegible", "Segoe UI", Roboto, sans-serif;

  --radius-klein: 2px;
  --radius-mittel: 6px;
  --fokus: 3px solid var(--fackelorange);
  --tippflaeche: 44px;
  --dauer: 130ms;
}

@supports not (color: color-mix(in srgb, white, black)) {
  :root {
    --linie: rgba(232, 220, 192, .28);
    --linie-stark: rgba(232, 220, 192, .58);
    --flaeche-hell: #33484A;
    --flaeche-tief: #0B1B20;
    --text-leise: #A8A38F;
    --schleier: rgba(8, 19, 23, .92);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dauer: 0ms;
  }
}