/*
  Zentrale Form-Farb-Zuordnung fuer Liuba.space.
  Diese Datei ist die Website-Quelle fuer alle sieben Formen.
*/

:root {
  --form-kreis: #e5ca41;
  --form-bogen: #e07940;
  --form-quadrat: #2c9e76;
  --form-dreieck: #505ec5;
  --form-linie: #58c3ce;
  --form-spirale: #d34f8f;
  --form-collage: #5098ba;

  --symbol-tile-kreis: var(--form-kreis);
  --symbol-tile-bogen: var(--form-bogen);
  --symbol-tile-quadrat: var(--form-quadrat);
  --symbol-tile-dreieck: var(--form-spirale);
  --symbol-tile-linie: var(--form-linie);
  --symbol-tile-spirale: var(--form-dreieck);
  --symbol-tile-collage: var(--form-quadrat);

  --form-kreis-contrast: #171216;
  --form-bogen-contrast: #171216;
  --form-quadrat-contrast: #171216;
  --form-dreieck-contrast: #fff8ec;
  --form-linie-contrast: #171216;
  --form-spirale-contrast: #fff8ec;
  --form-collage-contrast: #171216;

  --form-spectrum:
    linear-gradient(
      90deg,
      var(--form-kreis) 0 14.2%,
      var(--form-bogen) 14.2% 28.4%,
      var(--form-quadrat) 28.4% 42.6%,
      var(--form-dreieck) 42.6% 56.8%,
      var(--form-linie) 56.8% 71%,
      var(--form-spirale) 71% 85.2%,
      var(--form-collage) 85.2% 100%
    );

  --book-yellow: var(--form-kreis);
  --book-orange: var(--form-bogen);
  --book-green: var(--form-quadrat);
  --book-blue: var(--form-dreieck);
  --book-teal: var(--form-linie);
  --book-pink: var(--form-spirale);
  --book-violet: var(--form-collage);
  --book-red: var(--form-spirale);
}

[data-form="kreis"] {
  --shape-color: var(--form-kreis);
  --shape-contrast: var(--form-kreis-contrast);
  --symbol-tile-color: var(--symbol-tile-kreis);
}

[data-form="bogen"] {
  --shape-color: var(--form-bogen);
  --shape-contrast: var(--form-bogen-contrast);
  --symbol-tile-color: var(--symbol-tile-bogen);
}

[data-form="quadrat"] {
  --shape-color: var(--form-quadrat);
  --shape-contrast: var(--form-quadrat-contrast);
  --symbol-tile-color: var(--symbol-tile-quadrat);
}

[data-form="dreieck"] {
  --shape-color: var(--form-dreieck);
  --shape-contrast: var(--form-dreieck-contrast);
  --symbol-tile-color: var(--symbol-tile-dreieck);
}

[data-form="linie"] {
  --shape-color: var(--form-linie);
  --shape-contrast: var(--form-linie-contrast);
  --symbol-tile-color: var(--symbol-tile-linie);
}

[data-form="spirale"] {
  --shape-color: var(--form-spirale);
  --shape-contrast: var(--form-spirale-contrast);
  --symbol-tile-color: var(--symbol-tile-spirale);
}

[data-form="collage"] {
  --shape-color: var(--form-collage);
  --shape-contrast: var(--form-collage-contrast);
  --symbol-tile-color: var(--symbol-tile-collage);
}

.cover-shape-stack svg[data-form],
.form-code-strip span[data-form],
.form-list > div[data-form] svg,
.book-topic-list > div[data-form] svg,
.signal-grid article[data-form] svg {
  color: var(--shape-color);
}

.cover-shape-stack svg[data-form] {
  background: var(--symbol-tile-color);
  color: var(--shape-contrast);
  stroke: currentColor;
}

.form-code-strip span[data-form] {
  background: var(--shape-color);
  color: var(--shape-contrast);
}

.form-list > div[data-form],
.book-topic-list > div[data-form] {
  border-left-color: var(--shape-color);
  border-top-color: var(--shape-color);
}

.book-topic-list > div[data-form] {
  border-left-color: rgba(23, 18, 22, 0.14);
  border-top-color: var(--symbol-tile-color);
}

.book-topic-list > div[data-form] .form-corner-symbol svg {
  color: var(--book-ink);
  stroke: currentColor;
}

.signal-grid article[data-form],
.offers .offer-grid article[data-form],
.scenario-grid article[data-form],
.available-books li[data-form] {
  border-color: rgba(23, 18, 22, 0.14);
  border-top-color: var(--shape-color);
}

.scenario-grid article[data-form] {
  border-left-color: var(--shape-color);
}

.available-books li[data-form] {
  box-shadow: inset 0 -4px 0 var(--shape-color);
}

/* v73: signal tiles use contrast symbols; hover uses the tile colour on the light overlay. */
.signal-grid article[data-form] svg {
  color: var(--tile-fg, var(--book-ink));
  stroke: currentColor;
}

.signal-grid article[data-form]:hover svg,
.signal-grid article[data-form]:focus-visible svg {
  color: var(--tile-bg, var(--shape-color));
  stroke: currentColor;
}