/* FACKELPFAD · Marke als CSS-Variablen · Fassung VINTAGE (Expedition, 1920er)
 *
 * Gesetz ist apps/pyramide/schmiede/MARKE.md. Wer hier einen Wert ändert, ändert ERST dort.
 * Die Variablennamen sind mit dem Baumeister abgestimmt und dürfen nicht umbenannt werden;
 * neue dürfen dazukommen. spiel.js liest zwölf davon fürs Brett (--farbe-hintergrund bis
 * --farbe-gold), die Palette fließt also bis ins Spielfeld.
 *
 * Kontraste nach WCAG 2.x, von Hand gerechnet (relative Leuchtdichte L aus den
 * sRGB-Kanälen, linearisiert mit ((c+0,055)/1,055)^2,4 bzw. c/12,92 unter 0,03928,
 * L = 0,2126 R + 0,7152 G + 0,0722 B, Verhältnis (L1+0,05)/(L2+0,05)).
 * Gerechnet am 06.09.2026, nicht im Browser gemessen.
 *
 *   Papier          #E3D3B0 auf Fotoschwarz #1C1511  12,20:1   (Pflicht 4,5)
 *   Papier          #E3D3B0 auf Leder       #2A211A  10,68:1   (Pflicht 4,5)
 *   Papier          #E3D3B0 auf Knopf       #3A2E24   8,90:1   (Pflicht 4,5)
 *   Papier          #E3D3B0 auf Stempelrot  #9E3B2E   4,55:1   (Pflicht 4,5, knapp; nur große Schrift)
 *   Vergilbt        #C4B08A auf Fotoschwarz #1C1511   8,52:1   (Pflicht 4,5)
 *   Vergilbt        #C4B08A auf Leder       #2A211A   7,46:1   (Pflicht 4,5)
 *   Messing         #B9953F auf Fotoschwarz #1C1511   6,38:1   (Pflicht 4,5, auch als Text)
 *   Messing         #B9953F auf Leder       #2A211A   5,59:1   (Pflicht 4,5)
 *   Messing         #B9953F auf Knopf       #3A2E24   4,66:1   (Pflicht 4,5)
 *   Tinte           #1C1511 auf Messing     #B9953F   6,38:1   (Schrift auf dem Hauptknopf)
 *   Stempelrot hell #D86E5E auf Fotoschwarz #1C1511   5,42:1   · auf Leder 4,74:1
 *   Fayence         #6FAFA3 auf Fotoschwarz #1C1511   7,16:1   · auf Leder 6,26:1
 *   Ocker hell      #D9A24A auf Fotoschwarz #1C1511   7,91:1   · auf Leder 6,92:1
 *   Ocker           #C8742B auf Fotoschwarz #1C1511   5,14:1   (Fackelbalken, Flamme)
 *   Sand            #C2A878 auf Fotoschwarz #1C1511   7,74:1
 *   Stein           #5C4A3A auf Fotoschwarz #1C1511   1,94:1   (nur Ränder und Flächen, nie Text)
 *
 * Es gibt nur den Dunkelmodus: das Braun-Schwarz einer alten Fotografie.
 */
:root {
  color-scheme: dark;

  /* Grund */
  --farbe-hintergrund: #1C1511;      /* Fotoschwarz: das Braun-Schwarz einer alten Aufnahme */
  --farbe-flaeche: #2A211A;          /* Leder: Karten, Anzeigenleiste, Meldung */
  --farbe-text: #E3D3B0;             /* Papier: aller Fließtext, alle Werte, leicht vergilbt */
  --farbe-text-gedaempft: #C4B08A;   /* Vergilbt: Nebentext, Beschriftungen, Datum */

  /* Aktion */
  --farbe-akzent: #B9953F;           /* Messing, angelaufen: Hauptknopf, Wortmarke, Linien, Reif */
  --farbe-akzent-text: #1C1511;      /* Tinte auf Messing */

  /* Signal, nur mit Wort, nie Farbe allein. Zwei Plakatfarben der Zeit, sparsam. */
  --farbe-erfolg: #6FAFA3;           /* Fayence: verblasstes Türkis, Ebene geschafft, Schlüssel, Treppe */
  --farbe-warnung: #D9A24A;          /* Ocker hell: Fackel knapp, Dynamit */
  --farbe-fehler: #D86E5E;           /* Stempelrot hell: Leben, Fallen, Ende, PLATZHALTER (als Text) */

  /* Stoff der Welt */
  --farbe-fackel: #C8742B;           /* Ocker, verbranntes Orange: Flamme, Lichtkreis, Fackelbalken */
  --farbe-stein: #5C4A3A;            /* Stein: Ränder, Mauern, erloschene Herzen */
  --farbe-sand: #C2A878;             /* Sand, gebrochen: Boden im Lichtkreis, Ebenenname */
  --farbe-gold: #B9953F;             /* Gold = Messing. Es gibt EIN Metall in dieser Marke */

  /* Druckfarben: die Flächen des Mehrfarbdrucks */
  --stempelrot: #9E3B2E;             /* Stempelrot, stumpf: Flächen, der rote Druckversatz hinter der Wortmarke */
  --messing-tief: #7A6128;           /* Messing im Schatten: Register-Geist des Reifs, Kante unter dem Hauptknopf */
  --tinte: #120D0A;                  /* Tinte: Schacht, Pforte, Rahmenlinien auf Messing */
  --farbe-knopf: #3A2E24;            /* Etikett: Stein-Knopf, Steuerkreuz, Taten */
  --farbe-knopf-tief: #221A14;       /* die Vertiefung: Mitte des Steuerkreuzes, gedrückt */

  /* Ergänzung: durchscheinende Töne, abgeleitet aus Messing und Tinte, keine neuen Farben */
  --rand-leise: rgba(185, 149, 63, 0.32);    /* Messing bei 32 %: Trennlinien, Feldränder */
  --rand-gold: rgba(185, 149, 63, 0.6);      /* Messing bei 60 %: Rahmenlinien der Etiketten und Karten */
  --kante-stein: rgba(0, 0, 0, 0.5);         /* Tinte bei 50 %: die untere Kante von Knöpfen */
  --schleier: rgba(28, 21, 17, 0.86);        /* Fotoschwarz bei 86 %: Grund der Einblendung */
  --vignette: rgba(0, 0, 0, 0.5);            /* die dunklen Ecken einer alten Aufnahme */

  /* Die Körnung: Papier. Ein 200-Pixel-Rauschen aus feTurbulence, papierfarben, 7 Prozent
     Deckung, als Kachel über ALLEM (auch über dem Brett). Keine Bilddatei, kein Netz. */
  --koernung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .89 0 0 0 0 .83 0 0 0 0 .69 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)'/%3E%3C/svg%3E");

  /* Schrift: nur Systemschriften, kein Netz, keine Webfonts.
     Rockwell ist eine Egyptienne von 1934 nach Vorbildern von 1910, auf iOS und macOS vorhanden;
     Futura ist von 1927, auf iOS und macOS vorhanden. Android fällt auf Serif bzw. Roboto zurück. */
  --schrift-titel: "Rockwell", "Roboto Slab", "American Typewriter", "Courier New", serif;
  --schrift-text: "Futura", "Avenir Next", "Gill Sans", "Trebuchet MS", Roboto, "Segoe UI", sans-serif;
  --schrift-schmal: "Futura", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;

  /* Die Wortmarke wächst mit der Breite und passt in EINE Zeile.
     --wortmarke-em ist die Breite des Namens in em (Rockwell fett, Versalien, Sperrung 0,04em):
     FACKELPFAD = 7,3. Wechselt der Name, wird diese eine Zahl neu gesetzt. */
  --wortmarke-em: 7.3;
  --groesse-wortmarke: clamp(28px, calc((100vw - 108px) / var(--wortmarke-em)), 64px);
  --groesse-titel: 24px;
  --groesse-untertitel: 20px;
  --groesse-text: 16px;
  --groesse-klein: 13px;
  --groesse-beschriftung: 12px;

  /* Form: gedruckt, nicht gegossen. Ecken fast scharf. */
  --radius-karte: 2px;
  --radius-knopf: 2px;
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-6: 24px;
  --abstand-8: 32px;
  --tippflaeche: 48px;

  /* Das Siegel auf der Titelseite: ein Stempel, rechts, leicht schräg */
  --siegel: min(58vw, 30vh, 480px);
  --siegel-neigung: -7deg;

  /* Bewegung: ein Druck bewegt sich nicht. Nur Antworten auf Tippen und der knappe Fackelbalken. */
  --dauer: 160ms;
  --dauer-einblendung: 220ms;
}

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