/* ==========================================================================
   digitlz Design-Tokens — einzige Quelle der Wahrheit
   Light ist Default (:root), Dark via [data-theme="dark"] oder OS-Einstellung.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Farben — monochrome Basis */
  --color-bg: #ffffff;
  --color-surface: #f2f2f2;
  --color-surface-strong: #e6e6e6;
  --color-ink: #333333;
  --color-ink-soft: #6e6e6e;
  --color-line: #e2e2e2;
  --color-zebra: #f7f7f7;
  --color-error: #c43c3c;
  /* Grünes Gegenstück zu --color-error für Vorher/Nachher-Marken
     (Christian, 2026-08-10) — gleiche Sättigungslage wie das Rot. */
  --color-ok: #2f8a4c;

  /* Der Blitz von Sparks (Christian, 2026-09-14; readme.md Regel 9,
     specs/003-sparks-publikationen FR-038). Keine achte Holo-Form und keine
     neue Buntfarbe im Sinn von Regel 1: Die Fläche des Blitzes trägt den
     gewöhnlichen Holo-Verlauf, dieser Token ist nur seine Glanzkante — der
     eine gelbe Streifen, der ihn als Blitz lesbar macht.

     Gemessen gegen die Flächen, auf denen er steht: Weiss 3.41:1,
     --color-surface 3.04:1, also über der 3:1-Grenze für nicht-textliche
     Inhalte auf beiden. Auf --color-ink (Fusszeilenfläche) 3.71:1. */
  --color-spark: #b38300;

  /* Fusszeilenfläche — eigene Token, weil sie NICHT die blosse Umkehrung des
     Seitengrunds ist (Christian, 2026-08-25). Im Light bleibt sie, was sie
     war: der dunkle Ankerblock aus `--color-ink` mit heller Schrift. Im Dark
     hiess dieselbe Umkehrung `--color-ink` auf `--color-bg` — und das ist dort
     #ededed, ein fast weisser Riegel unter einer dunklen Seite. Er blendete,
     und der dunkle Holo-Blob in seiner Ecke stand als violetter Fleck auf
     Hellgrau. Dark trägt deshalb neutrales Anthrazit (Regel 1), eine Stufe
     ÜBER dem Seitengrund statt darunter. */
  --color-footer: #333333;
  --color-footer-ink: #ffffff;

  /* Holo — der einzige Farbträger. Light: Pastell-Perlmutt; Dark: Chrom mit
     spektralen Akzenten aus der Liquid-Szene (Overrides in den Dark-Blöcken). */
  --holo-gradient: linear-gradient(
    115deg,
    #ffd9e8 0%,
    #d9c8ff 18%,
    #b8e8ff 38%,
    #c8ffe8 55%,
    #fff3c8 72%,
    #ffd9e8 100%
  );
  /* Gesättigte Variante für dünne Fokus-Ringe */
  --holo-gradient-focus: linear-gradient(
    115deg,
    #ff9ec7 0%,
    #b39bff 22%,
    #7cc8ff 45%,
    #8fe8c0 68%,
    #ffd98a 88%,
    #ff9ec7 100%
  );
  /* Text auf Holo-Flächen — folgt dem Theme (Light dunkel, Dark weiß) */
  --holo-ink: #333333;
  --holo-ink-soft: #4d4d4d;
  /* Holo ALS Schrift (background-clip: text). Eigener Verlauf, weil der
     Flächen-Verlauf als Text auf dem Seitengrund nur 1.35–2.32:1 erreicht.
     Alle Stopps tragen dieselbe Luminanz (0.16) — der Kontrast bleibt über
     den ganzen Satz konstant bei 5.0:1, unabhängig davon, wo die Animation
     gerade steht. Der Verlauf ist gespiegelt statt zyklisch: Cyan und Orange
     direkt zu mischen ergibt ein schlammiges Khaki, das unter AA fällt. */
  --holo-gradient-text: linear-gradient(
    115deg,
    #c24705 0%,
    #e00611 10%,
    #d9066f 20%,
    #9339fa 30%,
    #2262f9 40%,
    #047997 50%,
    #2262f9 60%,
    #9339fa 70%,
    #d9066f 80%,
    #e00611 90%,
    #c24705 100%
  );
  /* Füllung des Brand-Kreises („AI“-Lockup im Header). Weicher als die
     Spektral-Varianten (kein Rot/Orange, nur Rosa→Violett→Blau), aber satt —
     entsättigte Töne kippen ins Graue. Gespiegelt für nahtloses Loopen der
     Animation. Stopps bei Luminanz ~0.26–0.31: das weiße AI hält an jeder
     Animationsposition ~3:1 (als Logo ausreichend). Der Dark-Override nutzt
     dieselben Hues als deutlich dunklere Juwelentöne — der Sprung muss beim
     Theme-Wechsel sichtbar sein. */
  --holo-gradient-brand: linear-gradient(
    115deg,
    #e56bb8 0%,
    #a76ef0 30%,
    #5f8cf5 50%,
    #a76ef0 70%,
    #e56bb8 100%
  );
  --focus-halo: rgba(179, 155, 255, 0.35);
  --focus-halo-faint: rgba(124, 200, 255, 0.12);

  /* Typografie */
  --font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  /* Die Untergrenzen greifen erst unterhalb von ~460px. Sie sind bewusst
     niedrig: Archivo 800 in Versalien setzt lange deutsche Komposita
     ("GRÜNDERGEFÜHRTE") sonst breiter als ein 320px-Display. */
  --text-display-xl: clamp(2.375rem, 7.5vw, 4.5rem);
  --text-display: clamp(1.75rem, 4.5vw, 3rem);
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.6875rem;

  /* Spacing — 4px-Raster */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Grid */
  --container-max: 1200px;
  --grid-gutter: 24px;

  /* Radius */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 10px;
  --radius-pill: 999px;

  /* Schatten */
  --shadow-s: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-l: 0 20px 50px rgba(0, 0, 0, 0.35);

  /* Motion */
  --duration-fast: 150ms;
  --duration: 250ms;
  --duration-holo: 8s;
  --duration-pulse: 1.8s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #141414;
  --color-surface: #1e1e1e;
  --color-surface-strong: #292929;
  --color-ink: #ededed;
  --color-ink-soft: #a6a6a6;
  --color-line: #333333;
  --color-zebra: #1a1a1a;
  --color-error: #e06a6a;
  /* Heller als das Light-Grün — muss auch auf den Glut-Zonen des dunklen
     Holo-Verlaufs (Luminanz 0.115) lesbar bleiben. */
  --color-ok: #74c98b;

  /* Blitz Dark — heller, weil die Kante gegen einen dunklen Grund steht:
     13.1:1 auf --color-bg, 11.6:1 auf --color-surface, 10.1:1 auf der
     Fusszeilenfläche. Deutlich über der Grenze, und das ist Absicht: Die
     Glut-Zonen des dunklen Holo-Verlaufs liegen alle auf Luminanz 0.115, eine
     leise Kante verschwände zwischen ihnen. */
  --color-spark: #ffd24d;

  /* Fusszeile Dark — siehe :root. `--color-surface-strong` als Wert: die
     Fläche ist ein angehobenes Panel, kein umgedrehter Seitengrund. Gemessene
     Kontraste auf #292929: Schrift 12.4:1, Copyright (0.75) 7.7:1, Navigation
     (0.8) 8.5:1, Versionsnummer (0.4) 3.3:1 — die letzte lag als dunkles Grau
     auf der hellen Fläche bei 2.5:1 und ist jetzt besser als vorher. */
  --color-footer: #292929;
  --color-footer-ink: #ededed;

  /* Holo Dark — Farbschema der Liquid-Szene: Fast-Schwarz-Chrom,
     spektrale Glut-Zonen (Orange/Rot, Magenta, Violett, Blau, Cyan).
     Aufgehellt 2026-07-09: Die alten Glut-Zonen lagen bei 1.4–2.3:1 zum
     Seitengrund — Blobs und Holo-Buttons verschmolzen mit dem Hintergrund.
     Alle Glut-Stufen tragen jetzt dieselbe Luminanz (0.115), unterscheiden
     sich also nur im Farbton: das Leuchten wirkt gleichmässig, und der
     Textkontrast ist überall gleich (Weiss 6.3:1, ink-soft 5.0:1).
     Die Grundstufen bleiben Fast-Schwarz, liegen aber über dem Seitengrund. */
  --holo-gradient: linear-gradient(
    115deg,
    #23202a 0%,
    #a53e0d 14%,
    #bb1d16 26%,
    #2a2733 38%,
    #ac296c 52%,
    #7a39cf 64%,
    #2f56c9 76%,
    #1c6878 88%,
    #23202a 100%
  );
  /* Gesättigte Spektral-Variante für dünne Ringe und Kanten */
  --holo-gradient-focus: linear-gradient(
    115deg,
    #ff6014 0%,
    #ff281e 18%,
    #ff3ca0 36%,
    #9646ff 54%,
    #3c6eff 72%,
    #3cdcff 88%,
    #ff6014 100%
  );
  --holo-ink: #ffffff;
  /* Mitgezogen mit dem helleren Verlauf — bei #cfcfd6 fiele der Kontrast
     auf den Glut-Zonen auf 4.1:1 und damit unter AA für Kleintext. */
  --holo-ink-soft: #e4e4ea;
  /* Holo als Schrift, Dark: gleiche Hues, gleiche Luminanz (0.26) →
     konstant 5.2:1 auf #141414. Siehe Kommentar im :root-Block. */
  --holo-gradient-text: linear-gradient(
    115deg,
    #ef5c0d 0%,
    #f65058 10%,
    #f5449d 20%,
    #ac6bf7 30%,
    #5787f6 40%,
    #0a98bb 50%,
    #5787f6 60%,
    #ac6bf7 70%,
    #f5449d 80%,
    #f65058 90%,
    #ef5c0d 100%
  );
  /* Brand-Kreis Dark — gleiche Hues wie Light als tiefe Juwelentöne
     (Luminanz ~0.13): fügt sich in den dunklen Header ein, Weiß ~5.7:1. */
  --holo-gradient-brand: linear-gradient(
    115deg,
    #b1368b 0%,
    #7a3bd6 30%,
    #2f5fd0 50%,
    #7a3bd6 70%,
    #b1368b 100%
  );
  --focus-halo: rgba(150, 70, 255, 0.4);
  --focus-halo-faint: rgba(60, 110, 255, 0.15);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #141414;
    --color-surface: #1e1e1e;
    --color-surface-strong: #292929;
    --color-ink: #ededed;
    --color-ink-soft: #a6a6a6;
    --color-line: #333333;
    --color-zebra: #1a1a1a;
    --color-error: #e06a6a;
    --color-ok: #74c98b;
    /* Blitz Dark — siehe [data-theme="dark"], identischer Wert */
    --color-spark: #ffd24d;

    /* Fusszeile Dark — siehe [data-theme="dark"], identische Werte */
    --color-footer: #292929;
    --color-footer-ink: #ededed;

    /* Holo Dark — siehe [data-theme="dark"], identische Werte */
    --holo-gradient: linear-gradient(
      115deg,
      #23202a 0%,
      #a53e0d 14%,
      #bb1d16 26%,
      #2a2733 38%,
      #ac296c 52%,
      #7a39cf 64%,
      #2f56c9 76%,
      #1c6878 88%,
      #23202a 100%
    );
    --holo-gradient-focus: linear-gradient(
      115deg,
      #ff6014 0%,
      #ff281e 18%,
      #ff3ca0 36%,
      #9646ff 54%,
      #3c6eff 72%,
      #3cdcff 88%,
      #ff6014 100%
    );
    --holo-ink: #ffffff;
    --holo-ink-soft: #e4e4ea;
    --holo-gradient-text: linear-gradient(
      115deg,
      #ef5c0d 0%,
      #f65058 10%,
      #f5449d 20%,
      #ac6bf7 30%,
      #5787f6 40%,
      #0a98bb 50%,
      #5787f6 60%,
      #ac6bf7 70%,
      #f5449d 80%,
      #f65058 90%,
      #ef5c0d 100%
    );
    --holo-gradient-brand: linear-gradient(
      115deg,
      #b1368b 0%,
      #7a3bd6 30%,
      #2f5fd0 50%,
      #7a3bd6 70%,
      #b1368b 100%
    );
    --focus-halo: rgba(150, 70, 255, 0.4);
    --focus-halo-faint: rgba(60, 110, 255, 0.15);
  }
}