/* ══════════════════════════════════════════════════════════════════
   FahrradBlick — Farben der Marke

   site.css bringt den vollständigen Satz an Farbwerten mit; hier stehen
   nur die, die sich von Zeitung zu Zeitung unterscheiden. Die Datei wird
   nach site.css geladen und ist für jede Zeitung eine andere — welche,
   entscheidet tools/deploy.sh anhand des Ziels.

   WOHER DAS ORANGE KOMMT
   Aus der Zeitung selbst: die WoltLab-Vorlage führte
   wcfContentLink = rgba(239, 104, 37) — #EF6825 — und dieselbe Farbe
   steht im Logo, im „C" des Zeichens und im Zeichen zwischen FAHRRAD und
   BLICK. Es ist also nicht gewählt, sondern übernommen.

   WARUM DER VERWEISTON DUNKLER IST ALS DAS LOGO-ORANGE
   #EF6825 hat auf Weiss 3,15:1. Für Fliesstext und Verweise verlangt
   AA 4,5:1 — die Marke selbst taugt also nicht als Textfarbe. #A84713
   ist derselbe Farbton, nur tiefer, und kommt auf 5,87:1. Dieselbe
   Überlegung wie bei der Unfallzeitung, deren Blau bewusst tiefer ist
   als das Logoblau.

   Die Grautöne sind gegenüber site.css eine Spur wärmer. Nicht als
   Effekt, sondern damit Orange nicht auf einem bläulichen Grau steht —
   das wirkt sonst wie ein Fehldruck.
   ══════════════════════════════════════════════════════════════════ */

:root {
  --bg: #f2f1ef;
  --flaeche: #ffffff;
  --flaeche-2: #f8f7f5;
  --text: #1a1714;
  --text-2: #47423d;
  --gedaempft: #77716a;
  --linie: #e6e3df;
  --linie-2: #d1ccc5;

  /* 5,87:1 auf Weiss, 5,20:1 auf dem Grund. */
  --akzent: #a84713;
  --akzent-2: #c4541b;

  /* Gefüllte Flächen tragen weissen Text — derselbe Wert, 5,87:1.
     --akzent-fuellung und --akzent-kante rechnen in site.css aus
     --akzent und ziehen deshalb von selbst mit. */
  --akzent-flaeche: #a84713;

  --fuss-bg: #191410;
  --kachel-grund: #1c1611;
  --kachel-akzent: #f2a97c;
}

/* Dunkel, wenn das System es will — ausser die Wahl steht auf hell. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --bg: #121110;
    --flaeche: #1b1917;
    --flaeche-2: #232120;
    --text: #f1efec;
    --text-2: #c8c3bd;
    --gedaempft: #8d8781;
    --linie: #2c2926;
    --linie-2: #3b3733;

    /* Auf dunklem Grund trägt das Logo-Orange: 6,00:1. Der Verweiston
       darüber ist noch eine Stufe heller, 7,13:1. */
    --akzent: #f2803f;
    --akzent-2: #ef6825;
    --akzent-flaeche: #a84713;

    --fuss-bg: #0e0b09;
  }
}

/* Ausdrücklich gewähltes dunkles Thema — gilt unabhängig vom System. */
:root[data-thema="dunkel"] {
  --bg: #121110;
  --flaeche: #1b1917;
  --flaeche-2: #232120;
  --text: #f1efec;
  --text-2: #c8c3bd;
  --gedaempft: #8d8781;
  --linie: #2c2926;
  --linie-2: #3b3733;

  --akzent: #f2803f;
  --akzent-2: #ef6825;
  --akzent-flaeche: #a84713;

  --fuss-bg: #0e0b09;
}

/* Ausdrücklich gewähltes helles Thema. */
:root[data-thema="hell"] {
  --bg: #f2f1ef;
  --flaeche: #ffffff;
  --flaeche-2: #f8f7f5;
  --text: #1a1714;
  --text-2: #47423d;
  --gedaempft: #77716a;
  --linie: #e6e3df;
  --linie-2: #d1ccc5;

  --akzent: #a84713;
  --akzent-2: #c4541b;
  --akzent-flaeche: #a84713;

  --fuss-bg: #191410;
}