/*
 * Lesedeals – Schriften und Genre-Welten
 * ======================================
 *
 * Jedes Genre ist EIN Block ".theme-<name>", der die Variablen aus base.css
 * überschreibt: Farben, Schrift der Überschriften, Himmel und Kulisse. Die
 * Klasse sitzt am <body> der Genre-Seite und an den Kacheln der Startseite.
 *
 * WAS EIN GENRE AUSMACHT
 *   --sky, --moon  der Himmel hinter Überschrift und Anmeldung (zusammen --hero-bg)
 *   --scene        die gezeichnete Kulisse am unteren Rand des Kopfbereichs
 *                  (public/assets/img/kulisse-<name>.svg, erzeugt von
 *                  bin/kulissen.py – dort lassen sich Farben und Motive ändern)
 *   --title-*      die Überschrift als Aufkleber: Füllung, Umriss, Schatten
 *   --paper-*      dunkle Seiten bekommen helle Karten („Papier") – auf Papier
 *                  gelten diese Farben statt der hellen Schrift der Seite
 *   --pop          Farbe des harten Schattens hinter Karten
 *
 * NEUES GENRE ANLEGEN
 *   1. Einen Block unten kopieren, Farben und Schrift anpassen.
 *   2. Kulisse in bin/kulissen.py ergänzen und das Skript laufen lassen.
 *   3. Namen in src/Domain/Genres.php (THEMES) eintragen, Farben für Mails
 *      in src/Services/Newsletter.php (ACCENTS) und für die Share-Grafik in
 *      src/Services/ShareImage.php (PALETTES).
 *   4. Dunkle Seite? Dann den Namen unten bei „Papier auf dunklen Seiten"
 *      ergänzen.
 *   5. Kontrast prüfen: Text auf Hintergrund mindestens 4,5 : 1.
 *
 * Die Schriften liegen in public/assets/fonts (Lizenzen: LIZENZEN.txt dort).
 * Es wird nichts von fremden Servern geladen.
 */

/* ------------------------------------------------------------------
   Schriften
   ------------------------------------------------------------------ */
@font-face {
  font-family: "LD Bonum"; /* Bookman: Überschriften, Schaltflächen, Buchtitel */
  src: url("../fonts/ld-bonum-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LD Bonum";
  src: url("../fonts/ld-bonum-700i.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "LD Schola"; /* Schulbuch-Antiqua: alles, was man liest */
  src: url("../fonts/ld-schola-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LD Schola";
  src: url("../fonts/ld-schola-400i.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "LD Schola";
  src: url("../fonts/ld-schola-700.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LD Schola";
  src: url("../fonts/ld-schola-700i.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "LD Avant"; /* geometrische Grotesk: kleine Beschriftungen, Kopfzeile */
  src: url("../fonts/ld-avant-700.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "LD Kondensa"; /* schmale Grotesk: Krimi & Thriller */
  src: url("../fonts/ld-kondensa-700.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "LD Kanzlei"; /* Kanzleischrift: Romantasy */
  src: url("../fonts/ld-kanzlei-500.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "LD Raster"; /* Rasterschrift wie auf alten Bildschirmen: Science-Fiction */
  src: url("../fonts/ld-raster-400.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "LD Palatina"; /* Renaissance-Antiqua: Historische Romane */
  src: url("../fonts/ld-palatina-700.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

/* ------------------------------------------------------------------
   Papier auf dunklen Seiten
   Karten, Formulare und Dialoge sind hell; darauf gilt dunkle Schrift.
   (Alle Bausteine mit Hintergrund --surface müssen hier stehen.)
   ------------------------------------------------------------------ */
:is(.theme-fantasy, .theme-thriller, .theme-horror, .theme-romantasy, .theme-scifi)
  :is(.book, .hero-signup, .section-signup .signup, .after-click, .table-wrap, .flash, .callout, .form-block,
      .form-notice, .prefs-block, .booking-row, .stat, .sc-pack, .sc-shelf, .sc-advice, .waitlist form, .skip-link) {
  --ink: var(--paper-ink);
  --muted: var(--paper-muted);
  --line: var(--paper-line);
  --link: var(--paper-link);
  --field-bg: #ffffff;
  --field-ink: var(--paper-ink);
  color: var(--paper-ink);
}

/* ==================================================================
   FANTASY – Bücherburg in der Abenddämmerung
   Violetter Himmel mit Mond und funkelnden Sternen, eine Burg auf einem
   Bücherstapel. Die Überschrift ist ein gelber Aufkleber in kursiver
   Bookman mit rosa Schatten. Karten sind helles Pergament.
   ================================================================== */
.theme-fantasy {
  --bg: #221552;
  --surface: #fff7e6;
  --ink: #f4eeff;
  --muted: #c4b8ea;
  --line: #4a3a94;
  --accent: #ffd23f;
  --on-accent: #1b1040;
  --link: #ffd98a;
  --tag-bg: #ff5fa2;
  --tag-ink: #ffffff;
  --mark: #ff5fa2;
  --focus: #ffd23f;
  --star: #e2a400;
  --edge: #150c3a;
  --pop: #ff5fa2;
  --quiet-bg: #fff7e6;
  --quiet-ink: #221552;

  --paper-ink: #221552;
  --paper-muted: #5d4f8f;
  --paper-line: #dcd2f3;
  --paper-link: #5a2fc4;

  --head-bg: #1a1147;
  --head-ink: #f4eeff;
  --nav-on: #ffd23f;
  --nav-on-ink: #1b1040;
  --hero-ink: #f4eeff;
  --sky: linear-gradient(180deg, #1a1147 0%, #3a1f86 46%, #8a3bb8 80%, #e0589f 100%);
  --moon: radial-gradient(circle at 56% 64px, #fff3b0 0 26px, rgba(255, 243, 176, 0.22) 27px 44px, rgba(255, 243, 176, 0) 45px);
  --hero-bg: var(--moon), var(--sky);
  --scene: url("../img/kulisse-fantasy.svg");
  --scene-h: clamp(96px, 15vw, 200px);

  --display-style: italic;
  --display-spacing: -0.02em;
  --title-fill: #ffd23f;
  --title-edge: #150c3a;
  --title-pop: #ff5fa2;

  --tag-shape: polygon(50.0% 0.0%, 57.8% 5.7%, 67.1% 3.0%, 72.5% 11.0%, 82.1% 11.7%, 84.5% 21.1%, 93.3% 25.0%, 92.3% 34.6%, 99.2% 41.3%, 95.0% 50.0%, 99.2% 58.7%, 92.3% 65.4%, 93.3% 75.0%, 84.5% 78.9%, 82.1% 88.3%, 72.5% 89.0%, 67.1% 97.0%, 57.8% 94.3%, 50.0% 100.0%, 42.2% 94.3%, 32.9% 97.0%, 27.5% 89.0%, 17.9% 88.3%, 15.5% 78.9%, 6.7% 75.0%, 7.7% 65.4%, 0.8% 58.7%, 5.0% 50.0%, 0.8% 41.3%, 7.7% 34.6%, 6.7% 25.0%, 15.5% 21.1%, 17.9% 11.7%, 27.5% 11.0%, 32.9% 3.0%, 42.2% 5.7%);
}

/* Sterne im Himmel – der einzige bewegte Moment der Seite: Sie funkeln langsam. */
.theme-fantasy .hero::before,
.theme-romantasy .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 6% 22%, #ffffff 50%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(1.6px 1.6px at 17% 58%, #ffe9a6 50%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(2.4px 2.4px at 29% 14%, #ffffff 50%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(1.6px 1.6px at 41% 42%, #ffffff 50%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(2px 2px at 55% 18%, #ffe9a6 50%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(1.6px 1.6px at 66% 50%, #ffffff 50%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(2.4px 2.4px at 74% 12%, #ffffff 50%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(1.6px 1.6px at 93% 46%, #ffe9a6 50%, rgba(255, 255, 255, 0) 52%);
  pointer-events: none;
}

.hero {
  position: relative;
}

/* Schmale Bildschirme: Der Mond rückt klein in die Ecke, damit er nicht unter dem Text liegt. */
@media (max-width: 899px) {
  .theme-fantasy {
    --moon: radial-gradient(circle at 90% 30px, #fff3b0 0 15px, rgba(255, 243, 176, 0.22) 16px 26px, rgba(255, 243, 176, 0) 27px);
  }

  .theme-horror {
    --moon: radial-gradient(circle at 90% 30px, #efe6cf 0 15px, rgba(239, 230, 207, 0.18) 16px 26px, rgba(239, 230, 207, 0) 27px);
  }

  .theme-romantasy {
    --moon: radial-gradient(circle at 90% 30px, #ffe9c2 0 15px, rgba(255, 233, 194, 0.2) 16px 26px, rgba(255, 233, 194, 0) 27px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .theme-fantasy .hero::before,
  .theme-romantasy .hero::before {
    animation: ld-funkeln 3.6s ease-in-out infinite alternate;
  }
}

@keyframes ld-funkeln {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

/* ==================================================================
   KRIMI & THRILLER – Nachts in der Stadt
   Skyline mit erleuchteten Fenstern, Laternen, Absperrband, eine Lupe
   auf dem Bücherstapel. Schmale Versalien wie auf einem Filmplakat.
   Karten sind Aktenpapier.
   ================================================================== */
.theme-thriller {
  --bg: #14161c;
  --surface: #f6f1e4;
  --ink: #f1f1ec;
  --muted: #aab0be;
  --line: #353c49;
  --accent: #ffd23f;
  --on-accent: #14161c;
  --link: #ffe07a;
  --tag-bg: #ff4d3d;
  --tag-ink: #ffffff;
  --mark: #ffd23f;
  --focus: #ffffff;
  --edge: #0b0d12;
  --pop: #ffd23f;
  --quiet-bg: #f6f1e4;
  --quiet-ink: #14161c;

  --paper-ink: #14161c;
  --paper-muted: #575d6b;
  --paper-line: #d9d2bf;
  --paper-link: #1d3a8a;

  --head-bg: #0c1330;
  --head-ink: #f1f1ec;
  --nav-on: #ffd23f;
  --nav-on-ink: #14161c;
  --hero-ink: #f1f1ec;
  --sky: linear-gradient(180deg, #0c1330 0%, #1b2a5e 100%);
  --moon: radial-gradient(ellipse 46% 60% at 80% 100%, rgba(255, 210, 63, 0.26), rgba(255, 210, 63, 0) 70%);
  --hero-bg: var(--moon), var(--sky);
  --scene: url("../img/kulisse-thriller.svg");
  --scene-h: clamp(96px, 15vw, 200px);

  --font-display: "LD Kondensa", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --display-transform: uppercase;
  --display-spacing: 0.01em;
  --display-leading: 0.96;
  --display-scale: 1.14;
  --title-fill: #ffffff;
  --title-edge: #0b0d12;
  --title-pop: #ff4d3d;

  --tag-shape: polygon(50.0% 0.0%, 64.5% 14.9%, 85.4% 14.6%, 85.1% 35.5%, 100.0% 50.0%, 85.1% 64.5%, 85.4% 85.4%, 64.5% 85.1%, 50.0% 100.0%, 35.5% 85.1%, 14.6% 85.4%, 14.9% 64.5%, 0.0% 50.0%, 14.9% 35.5%, 14.6% 14.6%, 35.5% 14.9%);
  --radius: 8px;
}

/* Buchtitel und Schaltflächen bleiben in Bookman – die schmale Schrift ist nur fürs Plakat */
.theme-thriller :is(.book-title, .sc-tile-title, .btn, .price-tag, .hero-signup-title) {
  font-family: "LD Bonum", "Bookman Old Style", Georgia, serif;
}

/* ==================================================================
   LIEBESROMANE – Sommerfest
   Rosa Abendhimmel, Wimpelkette, Herzballons, eine Tasse auf dem
   Bücherstapel. Kursive Schulbuch-Antiqua, weiß mit rotem Schatten.
   ================================================================== */
.theme-romance {
  --bg: #fff0f3;
  --surface: #ffffff;
  --ink: #4a1030;
  --muted: #84495f;
  --line: #f3c4d1;
  --accent: #e11d48;
  --on-accent: #ffffff;
  --link: #b3123b;
  --tag-bg: #e11d48;
  --tag-ink: #ffffff;
  --mark: #e11d48;
  --focus: #4a1030;
  --star: #e11d48;
  --edge: #4a1030;
  --pop: #ff8fab;
  --quiet-bg: #ffffff;
  --quiet-ink: #4a1030;

  --head-bg: #ff8fa3;
  --head-ink: #4a1030;
  --nav-on: #4a1030;
  --nav-on-ink: #ffffff;
  --hero-ink: #4a1030;
  --sky: linear-gradient(180deg, #ff8fa3 0%, #ffb3a7 55%, #ffd6c9 100%);
  --hero-bg: var(--sky);
  --scene: url("../img/kulisse-romance.svg");
  --scene-h: clamp(96px, 15vw, 200px);

  --font-display: "LD Schola", "Century Schoolbook", Georgia, serif;
  --display-style: italic;
  --display-spacing: -0.025em;
  --title-fill: #ffffff;
  --title-edge: #4a1030;
  --title-pop: #e11d48;

  --tag-shape: circle(50%);
  --radius: 22px;
}

/* ==================================================================
   HORROR & ENDZEIT – Groschenheft um Mitternacht
   Friedhof unter blutrotem Himmel, Fledermäuse, Hände aus der Erde und
   aus dem Buch. Die Überschrift in giftgrünen Bookman-Versalien wie auf
   einem Gruselheft vom Kiosk. Karten sind vergilbtes Papier.
   ================================================================== */
.theme-horror {
  --bg: #141016;
  --surface: #efe6cf;
  --ink: #efe6cf;
  --muted: #b0a6ad;
  --line: #3b2a3f;
  --accent: #b6f23a;
  --on-accent: #141016;
  --link: #c9f76a;
  --tag-bg: #e3262e;
  --tag-ink: #ffffff;
  --mark: #e3262e;
  --focus: #efe6cf;
  --star: #b3261b;
  --edge: #07050a;
  --pop: #e3262e;
  --quiet-bg: #efe6cf;
  --quiet-ink: #141016;

  --paper-ink: #1c1420;
  --paper-muted: #5c4f5f;
  --paper-line: #cfc3a4;
  --paper-link: #8f1218;

  --head-bg: #120a1c;
  --head-ink: #efe6cf;
  --nav-on: #b6f23a;
  --nav-on-ink: #141016;
  --hero-ink: #efe6cf;
  --sky: linear-gradient(180deg, #120a1c 0%, #3a0f2a 62%, #8a1c2c 100%);
  --moon: radial-gradient(circle at 56% 60px, #efe6cf 0 24px, rgba(239, 230, 207, 0.18) 25px 40px, rgba(239, 230, 207, 0) 41px);
  --hero-bg: var(--moon), var(--sky);
  --scene: url("../img/kulisse-horror.svg");
  --scene-h: clamp(96px, 15vw, 200px);

  --display-transform: uppercase;
  --display-spacing: -0.01em;
  --display-leading: 1;
  --display-scale: 0.86;
  --title-fill: #b6f23a;
  --title-edge: #07050a;
  --title-pop: #e3262e;

  /* Klecks */
  --tag-shape: polygon(50% 0, 62% 9%, 78% 4%, 82% 19%, 97% 24%, 90% 39%, 100% 52%, 89% 62%, 94% 79%, 78% 80%, 72% 96%, 58% 89%, 46% 100%, 37% 88%, 21% 93%, 19% 77%, 3% 72%, 11% 58%, 0 45%, 12% 35%, 7% 19%, 23% 19%, 29% 4%, 41% 11%);
  --radius: 6px;
}

/* Die Überschrift flackert beim Laden kurz wie eine Neonröhre und bleibt dann stehen. */
@media (prefers-reduced-motion: no-preference) {
  body.theme-horror .hero-title {
    animation: ld-flicker 1.6s linear 1 both;
  }
}

@keyframes ld-flicker {
  0% { opacity: 0; }
  8% { opacity: 1; }
  12% { opacity: 0.2; }
  20% { opacity: 1; }
  44% { opacity: 1; }
  47% { opacity: 0.35; }
  52% { opacity: 1; }
  100% { opacity: 1; }
}

/* ==================================================================
   ROMANTASY – Rosengarten bei Nacht
   Pflaumenblauer Himmel mit Sternen, ein Turm, Rosen am Wegrand.
   Geschwungene Kanzleischrift in warmem Gold.
   ================================================================== */
.theme-romantasy {
  --bg: #2a1440;
  --surface: #fff5f0;
  --ink: #f7e9f1;
  --muted: #cdb3d2;
  --line: #4a3263;
  --accent: #f0a7bd;
  --on-accent: #2a1235;
  --link: #f7c3d2;
  --tag-bg: #d6336c;
  --tag-ink: #ffffff;
  --mark: #f0a7bd;
  --focus: #ffffff;
  --star: #d6336c;
  --edge: #180a28;
  --pop: #d6336c;
  --quiet-bg: #fff5f0;
  --quiet-ink: #2a1440;

  --paper-ink: #2a1440;
  --paper-muted: #6a5078;
  --paper-line: #ead6e2;
  --paper-link: #a61e52;

  --head-bg: #1c0d30;
  --head-ink: #f7e9f1;
  --nav-on: #f0a7bd;
  --nav-on-ink: #2a1235;
  --hero-ink: #f7e9f1;
  --sky: linear-gradient(180deg, #1c0d30 0%, #5a2a7a 72%, #c0608c 100%);
  --moon: radial-gradient(circle at 56% 60px, #ffe9c2 0 24px, rgba(255, 233, 194, 0.2) 25px 40px, rgba(255, 233, 194, 0) 41px);
  --hero-bg: var(--moon), var(--sky);
  --scene: url("../img/kulisse-romantasy.svg");
  --scene-h: clamp(96px, 15vw, 200px);

  --font-display: "LD Kanzlei", "Apple Chancery", "Lucida Calligraphy", cursive;
  --display-weight: 500;
  --display-spacing: 0;
  --display-leading: 1;
  --display-scale: 1.28;
  --title-fill: #ffd9a0;
  --title-edge: #180a28;
  --title-pop: #d6336c;

  --tag-shape: polygon(50.0% 0.0%, 57.8% 5.7%, 67.1% 3.0%, 72.5% 11.0%, 82.1% 11.7%, 84.5% 21.1%, 93.3% 25.0%, 92.3% 34.6%, 99.2% 41.3%, 95.0% 50.0%, 99.2% 58.7%, 92.3% 65.4%, 93.3% 75.0%, 84.5% 78.9%, 82.1% 88.3%, 72.5% 89.0%, 67.1% 97.0%, 57.8% 94.3%, 50.0% 100.0%, 42.2% 94.3%, 32.9% 97.0%, 27.5% 89.0%, 17.9% 88.3%, 15.5% 78.9%, 6.7% 75.0%, 7.7% 65.4%, 0.8% 58.7%, 5.0% 50.0%, 0.8% 41.3%, 7.7% 34.6%, 6.7% 25.0%, 15.5% 21.1%, 17.9% 11.7%, 27.5% 11.0%, 32.9% 3.0%, 42.2% 5.7%);
  --radius: 18px;
}

.theme-romantasy :is(.book-title, .sc-tile-title, .btn, .price-tag, .hero-signup-title, .section-title) {
  font-family: "LD Bonum", "Bookman Old Style", Georgia, serif;
  font-weight: 700;
}

/* ==================================================================
   SCIENCE-FICTION – Startrampe
   Nachtblauer Weltraum, Ringplanet, Kuppelstadt, eine Rakete auf dem
   Bücherstapel. Die Überschrift in Rasterschrift wie auf einem alten
   Bordcomputer.
   ================================================================== */
.theme-scifi {
  --bg: #081230;
  --surface: #eef4ff;
  --ink: #e3f0ff;
  --muted: #9db2d6;
  --line: #1f3869;
  --accent: #45d6ff;
  --on-accent: #04121f;
  --link: #86e5ff;
  --tag-bg: #ff7a59;
  --tag-ink: #04121f;
  --mark: #ff7a59;
  --focus: #ffffff;
  --edge: #040a1c;
  --pop: #ff7a59;
  --quiet-bg: #eef4ff;
  --quiet-ink: #081230;

  --paper-ink: #081230;
  --paper-muted: #4a5a80;
  --paper-line: #cfdcf5;
  --paper-link: #1546b8;

  --head-bg: #040a1c;
  --head-ink: #e3f0ff;
  --nav-on: #45d6ff;
  --nav-on-ink: #04121f;
  --hero-ink: #e3f0ff;
  --sky: linear-gradient(180deg, #040a1c 0%, #0c1f55 100%);
  --hero-bg: var(--sky);
  --scene: url("../img/kulisse-scifi.svg");
  --scene-h: clamp(96px, 15vw, 200px);

  --font-display: "LD Raster", "Courier New", monospace;
  --display-weight: 400;
  --display-transform: uppercase;
  --display-spacing: 0.02em;
  --display-leading: 1;
  --display-scale: 0.92;
  --title-fill: #45d6ff;
  --title-edge: #040a1c;
  --title-pop: #ff7a59;

  --tag-shape: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --radius: 4px;
}

.theme-scifi :is(.book-title, .sc-tile-title, .btn, .price-tag, .hero-signup-title, .section-title) {
  font-family: "LD Bonum", "Bookman Old Style", Georgia, serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.015em;
}

/* ==================================================================
   HISTORISCHE ROMANE – Marktplatz
   Pergamenthimmel, Fachwerkgiebel, ein Turm auf alten Folianten.
   Kräftige Renaissance-Antiqua in Sepia mit ochsenblutrotem Schatten.
   ================================================================== */
.theme-historical {
  --bg: #efe4cb;
  --surface: #fbf5e6;
  --ink: #33241a;
  --muted: #6b5946;
  --line: #d3c19d;
  --accent: #7a2a1c;
  --on-accent: #fff7ea;
  --link: #7a2a1c;
  --tag-bg: #7a2a1c;
  --tag-ink: #fff7ea;
  --mark: #7a2a1c;
  --focus: #33241a;
  --star: #7a2a1c;
  --edge: #33241a;
  --pop: #b9895a;
  --quiet-bg: #fbf5e6;
  --quiet-ink: #33241a;

  --head-bg: #f3d9a4;
  --head-ink: #33241a;
  --nav-on: #33241a;
  --nav-on-ink: #f3d9a4;
  --hero-ink: #33241a;
  --sky: linear-gradient(180deg, #f3d9a4 0%, #f7ead0 100%);
  --hero-bg: var(--sky);
  --scene: url("../img/kulisse-historical.svg");
  --scene-h: clamp(96px, 15vw, 200px);

  --font-display: "LD Palatina", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --display-spacing: 0.01em;
  --display-leading: 1.04;
  --title-fill: #33241a;
  --title-edge: #f7ead0;
  --title-pop: #7a2a1c;

  --tag-shape: circle(50%);
  --radius: 4px;
}