/*
 * Gestaltungswerte aller Raetsel.
 *
 * Jeder Wert leitet sich aus den Theme-Variablen ab (--primary-color, --text-color,
 * --button-*, --font-family), die der Customizer und die Seitenstile setzen. Eine
 * Seite mit eigenen Farben bekommt so automatisch passende Raetsel. Wer einzelne
 * Werte anders will, ueberschreibt die --ltrs-*-Variablen, nicht die Regeln.
 *
 * Definiert auf dem Raetsel selbst, nicht auf :root: eine Variable, die auf andere
 * verweist, wird dort berechnet, wo sie steht. Auf :root kaemen die Seitenfarben,
 * die das Theme auf body bzw. .page-id-N setzt, nie an.
 *
 * Die Karten ("Pergament") bleiben immer hell und die Schrift darauf immer dunkel:
 * auf einer dunklen Seite waere eine aus --text-color abgeleitete Schrift sonst hell
 * auf hellem Grund.
 */
:is(.ltrs-riddle, .textfield-riddle, .lock-riddle, .select-riddle, .keypad-riddle, .sort-riddle, .pattern-riddle,
  .slider-riddle, .memory-riddle, .puzzle-riddle, .matching-riddle, .cloze-riddle, .simon-riddle,
  .hotspot-riddle, .logic-riddle) {
  /* Farben */
  --ltrs-accent: var(--button-color, #c9a35a);
  --ltrs-accent-text: var(--button-text-color, #1f1a14);
  --ltrs-accent-hover: var(--button-hover-color, var(--ltrs-accent));
  --ltrs-accent-hover-text: var(--button-text-hover-color, var(--ltrs-accent-text));
  /* Pergament: fester heller Grundton, nur leicht von der Seitenfarbe getoent -
     sonst wuerde es auf dunklen Seiten grau. */
  --ltrs-paper: color-mix(in srgb, var(--primary-color, #e6d39a) 10%, #eedfb2);
  --ltrs-paper-edge: color-mix(in srgb, var(--ltrs-paper) 82%, #5a4630);
  --ltrs-paper-stripe: color-mix(in srgb, var(--ltrs-paper) 92%, #6b5435);
  --ltrs-ink: #2a2017;
  --ltrs-ink-soft: color-mix(in srgb, var(--ltrs-ink) 70%, var(--ltrs-paper));
  --ltrs-frame: color-mix(in srgb, var(--text-color, #1a1a1a) 22%, transparent);
  --ltrs-text: var(--text-color, #1a1a1a);
  --ltrs-success: #2f7d4f;
  --ltrs-error: #a33a2b;
  --ltrs-focus: color-mix(in srgb, var(--ltrs-accent) 80%, #ffffff);

  /* Schrift */
  --ltrs-font-ui: var(--font-family, Georgia, "Iowan Old Style", "Palatino Linotype", serif);
  --ltrs-font-content: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --ltrs-content-style: italic;
  --ltrs-text-size: 1.05rem;

  /* Form */
  --ltrs-radius: 6px;
  --ltrs-radius-frame: 10px;
  --ltrs-gap: 12px;
  --ltrs-pad: clamp(14px, 3vw, 22px);
  --ltrs-control: 44px;
  --ltrs-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 2px 6px rgba(0, 0, 0, 0.18);
  --ltrs-transition: 160ms ease;
}