/*
 * Farbpalette für alle Tools, festgelegt am 01.10.2026.
 * Alle Werte erreichen auf Weiß und auf der Fläche mindestens 4,5 : 1 (WCAG AA).
 * Tools verwenden nur diese Variablen und keine eigenen Farbwerte.
 */
:root {
  /* Text */
  --farbe-text: #1F2933;               /* 14,8 : 1 auf Weiß */
  --farbe-text-zweitrangig: #52606D;   /* 6,5 : 1 auf Weiß */

  /* Flächen und Linien */
  --farbe-hintergrund: #FFFFFF;
  --farbe-flaeche: #F5F7FA;            /* Karten, abgesetzte Bereiche */
  --farbe-linie: #D9E2EC;

  /* Akzent für Knöpfe und Links */
  --farbe-akzent: #3D6AA8;             /* 5,5 : 1 auf Weiß */
  --farbe-auf-akzent: var(--farbe-hintergrund); /* Schrift auf Akzentflächen */

  /* Rückmeldungen */
  --farbe-fehler: #B83232;             /* 5,9 : 1 auf Weiß */
  --farbe-erfolg: #3A7556;             /* 5,4 : 1 auf Weiß */

  /* Wortfarben der Wortwolke */
  --farbe-wort-blau: #3D6AA8;
  --farbe-wort-petrol: #0F766E;
  --farbe-wort-bernstein: #B45309;
  --farbe-wort-violett: #6F5AA8;
  --farbe-wort-rot: #BE123C;
  --farbe-wort-schiefer: #334155;

  /*
   * Dunkel
   * Palette für Tools mit dunklem Seitengrund, zuerst die Bildschirmzeit
   * (04.10.2026). Abgeleitet aus Schiefer und Akzent der hellen Palette,
   * Akzent, Erfolg und Fehler aufgehellt. Die helle Palette oben bleibt
   * für alle anderen Tools unverändert.
   * Kontraste: erster Wert auf dem Seitengrund, zweiter auf den Karten.
   */
  --dunkel-hintergrund: #2B3646;       /* Seitengrund */
  --dunkel-flaeche: #3A475B;           /* Karten, Knöpfe */
  --dunkel-linie: #5A6A82;             /* Linien, Reglerspur */
  --dunkel-buehne: #1C2531;            /* Bühne, dunkler als der Seitengrund */
  --dunkel-text: var(--farbe-hintergrund);       /* 12,2 : 1 und 9,4 : 1 */
  --dunkel-text-zweitrangig: #C9D3DF;            /* 8,1 : 1 und 6,2 : 1 */
  --dunkel-akzent: #94B9EC;            /* 6,1 : 1 und 4,7 : 1 */
  --dunkel-auf-akzent: var(--farbe-text);        /* 7,3 : 1 auf dem Akzent */
  --dunkel-erfolg: #7FC9A1;            /* 6,3 : 1 und 4,8 : 1 */
  --dunkel-fehler: #F4A5A5;            /* 6,3 : 1 und 4,8 : 1 */

  /*
   * Illustration
   * Farben für gezeichnete Figuren und Szenen in den Tools, zuerst für die
   * Bildschirmzeit (04.10.2026). Gedämpfte Abendtöne, damit das
   * Bildschirmlicht hervortritt. Nur für Grafiken, nicht für Text.
   */

  /* Figur */
  --illu-haut: #EBC2A2;
  --illu-haut-schatten: #D2A182;
  --illu-wangen: #E39A88;
  --illu-falten: #A9765A;
  --illu-augen: #1F2933;
  --illu-augenweiss: #FBFBF8;
  --illu-haare: #5B4537;               /* jung */
  --illu-haare-grau: #CDD1D6;          /* alt, wird überblendet */
  --illu-kleidung-kind: #D9A35E;
  --illu-kleidung-jugend: #5F86BD;
  --illu-kleidung-erwachsen: #3F7A70;
  --illu-kleidung-mitte: #7A6A9C;
  --illu-kleidung-alt: #A3846C;
  --illu-hose: #2B3644;
  --illu-schuhe: #1A222C;
  --illu-brille: #1F2933;
  --illu-geraet: #1A222C;              /* Rückseite von Handy und Tablet */
  --illu-geraet-kamera: #3A4552;
  --illu-leuchten: #CFEFFF;            /* Bildschirmlicht */
  --illu-leuchten-schein: #8FD3F5;     /* Lichtschein im Gesicht */

  /* Szenen */
  --illu-wand-kind: #4F5B7E;
  --illu-wand-schule: #56685F;
  --illu-wand-buero: #4A5668;
  --illu-wand-alt: #6A5A50;
  --illu-tapete-streifen: #72625A;
  --illu-boden-holz: #4A3B33;
  --illu-boden-schule: #474C54;
  --illu-fensterrahmen: #9AA3B0;
  --illu-nachthimmel: #1E2944;
  --illu-mond: #EFE3B4;
  --illu-tafel: #2F4A3F;
  --illu-kreide: #D9DFD7;
  --illu-holz-hell: #A78A6C;
  --illu-holz-dunkel: #6B5141;
  --illu-metall: #8C95A1;
  --illu-polster: #8E5A57;
  --illu-polster-dunkel: #74474A;
  --illu-buerostuhl: #2C333E;
  --illu-sitzsack: #B8794F;
  --illu-teppich-kind: #5F8086;
  --illu-teppich-alt: #7F6052;
  --illu-spielzeug-1: #D49A50;
  --illu-spielzeug-2: #6FA39A;
  --illu-spielzeug-3: #C56B72;
  --illu-stadt: #2A3245;
  --illu-stadt-licht: #E3C46E;
  --illu-bild: #7E93A8;
  --illu-pflanze: #5D8A68;
  --illu-topf: #A66E54;
  --illu-lampe: #EAD3A0;
  --illu-lampenschein: #F2C46F;
  --illu-katze: #8A8F98;
  --illu-stock: #7A5A40;

  /* Bühne um die Szene (dunkel, Text darauf mindestens 4,5 : 1) */
  --illu-buehne: var(--dunkel-buehne);
  --illu-buehne-text: var(--farbe-hintergrund);   /* 15,5 : 1 */
  --illu-buehne-text-zweitrangig: #C9D3DF;        /* 10,2 : 1 */
  --illu-balken-leer: #263040;
  --illu-balken-leben: #6E7E93;
  --illu-balken-bildschirm: #9ED8F7;
}