/* KüchenTreff Niederrhein – Farben und Staffeln.
 *
 * Direkt einbindbar. Dieselben Werte stehen in farben.json und in
 * UEBERGABE.md; weichen sie voneinander ab, ist die Uebergabe kaputt.
 *
 * DAS ROT KOMMT AUS DEM OFFIZIELLEN LOGO, gemessen am 22.09.2026 in
 * 524-image.png: #e3001b, die Grundflaeche des roten Quadrats (51,4 % aller
 * Bildpunkte). Vorher stand hier #ee3024 aus einer aelteren Logodatei -
 * ein Ton zu orange.
 *
 * DAS SPART EINEN WERT: #ee3024 erreichte auf Weiss nur 4,13:1 und durfte
 * deshalb keine Textfarbe sein; es brauchte ein zweites, tieferes Rot fuer
 * alles Geschriebene. #e3001b erreicht 4,90:1 und darf beides. --kt-logo
 * und --kt-rot sind in der hellen Sicht derselbe Wert - die Marke traegt
 * den Text, nicht ein Ersatzton daneben.
 *
 * DIE FUSSFLAECHE HAT EINEN EIGENEN WERT (--kt-fussgrund), nicht mehr
 * --kt-rot-tief. In der dunklen Sicht ist --kt-rot-tief ein HELLER Ton fuer
 * Hover; als Fussflaeche ergab das --kt-fusstext darauf mit 1,56:1 einen
 * unlesbaren Fuss. Zwei Aufgaben, zwei Werte.
 */

:root {
  /* Flaechen und Schrift */
  --kt-grund: #ffffff;
  --kt-sanft: #faf8f6;
  --kt-text: #1a1718;
  --kt-neben: #5f5a5b;
  --kt-linie: #e8e3e1;
  --kt-feldlinie: #8e8886;

  /* Die Marke */
  --kt-logo: #e3001b;
  --kt-rot: #e3001b;
  --kt-rot-tief: #a50015;
  --kt-rot-sanft: #fdecee;
  --kt-fussgrund: #a50015;
  --kt-fusstext: #f6dcd7;

  /* Bedeutung */
  --kt-erfolg: #1b6b46;
  --kt-erfolg-grund: #e8f3ed;
  --kt-warnung: #7a5200;
  --kt-warnung-grund: #fdf3e0;
  --kt-fehler: #9a1015;
  --kt-fehler-grund: #fdecec;

  /* Groessen */
  --kt-groesse-1: 13px;
  --kt-groesse-2: 15px;
  --kt-groesse-3: 17px;
  --kt-groesse-4: 20px;
  --kt-groesse-5: 24px;
  --kt-groesse-6: 30px;
  --kt-groesse-7: 38px;
  --kt-groesse-8: 48px;
  --kt-groesse-9: 62px;

  /* Abstaende */
  --kt-luft-1: 4px;
  --kt-luft-2: 8px;
  --kt-luft-3: 12px;
  --kt-luft-4: 16px;
  --kt-luft-5: 24px;
  --kt-luft-6: 32px;
  --kt-luft-7: 48px;
  --kt-luft-8: 64px;
  --kt-luft-9: 96px;

  /* Radien, Schatten, Rahmen */
  --kt-radius-0: 0;
  --kt-radius-1: 4px;
  --kt-radius-2: 10px;
  --kt-schatten-weich: 0 1px 2px rgba(26, 23, 24, .06);
  --kt-schatten-tief: 0 12px 34px rgba(26, 23, 24, .12);
  --kt-rahmen-1: 1px;
  --kt-rahmen-2: 1.5px;
  --kt-rahmen-kante: 4px;

  /* Schrift */
  --kt-schrift-kopf: Fraunces, Georgia, "Times New Roman", serif;
  --kt-schrift-text: "Source Sans 3", -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, Arial, sans-serif;

  color-scheme: light;
}

/* Die dunkle Sicht - zweimal, damit beides greift: die Voreinstellung des
 * Geraets und ein ausdruecklich gesetzter Schalter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kt-grund: #161314;
    --kt-sanft: #1e1a1b;
    --kt-text: #f2eeed;
    --kt-neben: #aaa3a4;
    --kt-linie: #322c2d;
    --kt-feldlinie: #7d7472;

    /* Die Logofarbe bleibt, was in der Datei steht. */
    --kt-logo: #e3001b;
    --kt-rot: #f47181;
    --kt-rot-tief: #f58492;
    --kt-rot-sanft: #2c1114;
    --kt-fussgrund: #6b0010;
    --kt-fusstext: #f6dcd7;

    --kt-erfolg: #79d6a4;
    --kt-erfolg-grund: #12241a;
    --kt-warnung: #e8b657;
    --kt-warnung-grund: #241c0d;
    --kt-fehler: #ff8f92;
    --kt-fehler-grund: #2a1416;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --kt-grund: #161314;
  --kt-sanft: #1e1a1b;
  --kt-text: #f2eeed;
  --kt-neben: #aaa3a4;
  --kt-linie: #322c2d;
  --kt-feldlinie: #7d7472;

  --kt-logo: #e3001b;
  --kt-rot: #f47181;
  --kt-rot-tief: #f58492;
  --kt-rot-sanft: #2c1114;
  --kt-fussgrund: #6b0010;
  --kt-fusstext: #f6dcd7;

  --kt-erfolg: #79d6a4;
  --kt-erfolg-grund: #12241a;
  --kt-warnung: #e8b657;
  --kt-warnung-grund: #241c0d;
  --kt-fehler: #ff8f92;
  --kt-fehler-grund: #2a1416;

  color-scheme: dark;
}