/* ==========================================================================
   VLISTA — Design Tokens
   Einzige Quelle für Farbe, Typografie, Raster, Rhythmus und Bewegung.
   Alle weiteren Stylesheets referenzieren ausschliesslich diese Variablen.
   ========================================================================== */

:root {
  /* ---------- Farbe ----------
     Reduziert gehalten: Papierweiss als Fläche, ein tiefes Tintenschwarz für
     Text, dazwischen zwei warme Grauwerte. Genau ein Signalton für Akzente. */
  --vl-paper:        #ffffff;
  --vl-paper-shade:  #f4f4f2;  /* abgesetzte Bänder, Feed-Hintergrund */
  --vl-paper-deep:   #e8e7e3;  /* Trennflächen, Platzhalterkacheln */
  --vl-ink:          #101010;  /* nie reines Schwarz */
  --vl-ink-soft:     #3d3d3b;  /* Fliesstext */
  --vl-ink-mute:  #74726b;  /* 4.81:1 auf Weiss — Fliesstext braucht 4.5 */
  --vl-rule:         #dedcd6;  /* Linien und Rahmen */

  /* Signalton — bewusst nur ein einziger, maximal zwei Setzungen je Ansicht.
     Für einen anderen Markenton genügt es, diese beiden Werte zu tauschen. */
  --vl-signal:       #2b4bff;
  --vl-signal-wash:  #e4e8ff;

  --vl-night:        #101010;  /* invertierte Bänder (Fusszeile, Aufrufe) */
  --vl-night-ink:    #f4f4f2;

  /* ---------- Typografie ----------
     Drei Familien mit klarer Aufgabenteilung:
     display  — schmale Grotesk, Versalien, für Headlines und Navigation
     accent   — Serif, überwiegend kursiv, für einzelne betonte Wörter
     body     — neutrale Grotesk für alles Lesbare
     mono     — Zähler, Zeitstempel, technische Marker */
  --vl-font-display: "Archivo Narrow", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;
  --vl-font-accent:  "Playfair Display", Georgia, "Times New Roman", serif;
  --vl-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vl-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Fluide Stufen — untere Grenze mobil, obere Grenze ab ~1440px */
  /* Untergrenze richtet sich nach dem längsten Wort der Seite
     ("AUTOMATISIEREN"): es muss bei 320px Breite ungebrochen
     in die Zeile passen, sonst schneidet die Zeilenmaske es ab. */
  --vl-size-mega:    clamp(2rem, 0.1rem + 8.6vw, 8.5rem);
  --vl-size-xl:      clamp(2rem, 1.1rem + 4.4vw, 5rem);
  --vl-size-l:       clamp(1.5rem, 1.05rem + 2.2vw, 2.75rem);
  --vl-size-m:       clamp(1.15rem, 1rem + 0.75vw, 1.5rem);
  --vl-size-body:    clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --vl-size-small:   0.8125rem;
  --vl-size-label:   0.6875rem;

  --vl-leading-tight: 0.92;
  --vl-leading-snug:  1.15;
  --vl-leading-body:  1.6;

  --vl-track-label:  0.18em;   /* Sperrung für Kleinversalien */
  --vl-track-tight:  -0.03em;  /* optischer Ausgleich grosser Grade */

  /* ---------- Rhythmus ----------
     Bewusst ungleichmässige Sprünge: enge Abstände innerhalb einer Gruppe,
     grosszügige zwischen Sektionen. */
  --vl-gap-2:   0.25rem;
  --vl-gap-3:   0.5rem;
  --vl-gap-4:   0.75rem;
  --vl-gap-5:   1rem;
  --vl-gap-6:   1.5rem;
  --vl-gap-7:   2rem;
  --vl-gap-8:   3rem;
  --vl-gap-9:   4.5rem;
  --vl-gap-10:  7rem;
  --vl-section: clamp(4rem, 2.5rem + 7vw, 11rem);

  /* ---------- Raster ---------- */
  --vl-measure:  1560px;   /* maximale Inhaltsbreite */
  --vl-text-max: 46ch;     /* Zeilenlänge für Fliesstext */
  --vl-edge:     clamp(1.25rem, 0.5rem + 3.5vw, 4.5rem);

  /* ---------- Kanten ---------- */
  --vl-radius:      0;      /* harte Kanten als Grundhaltung */
  --vl-radius-pill: 999px;  /* nur Tags und runde Schaltflächen */
  --vl-hairline:    1px;

  /* ---------- Bewegung ----------
     Kompositor-freundlich: es werden ausschliesslich transform, opacity,
     clip-path und filter animiert. */
  --vl-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --vl-ease-soft: cubic-bezier(0.33, 0, 0.15, 1);
  --vl-dur-fast:  180ms;
  --vl-dur:       420ms;
  --vl-dur-slow:  760ms;

  /* Spalten des Hero-Feeds. Einzige Quelle — die Umbruchpunkte in
     responsive.css schreiben denselben Token um, und scripts/feed.js liest
     ihn aus. Die Fünf in CSS und JS ist nur noch Notnagel. */
  --vl-feed-cols: 5;

  /* Grundtempo des Hero-Feeds in Pixel pro Sekunde.
     Die einzelnen Spalten weichen davon prozentual ab (siehe feed.js). */
  --vl-feed-speed: 34;

  /* Luft für Ober- und Unterlängen innerhalb der Zeilenmaske. Playfair
     Displays kursives "g" schwingt mit seiner Oberlänge weiter aus als
     0.2em Platz liessen — deshalb oben grosszügiger als unten. */
  --vl-lift-top: 0.34em;
  --vl-lift-bottom: 0.3em;

  /* ---------- Ebenen ---------- */
  --vl-z-feed:    1;
  --vl-z-overlay: 40;
  --vl-z-header:  60;
  --vl-z-menu:    80;
}

/* Kontrastverstärkung, wenn das System es verlangt */
@media (prefers-contrast: more) {
  :root {
    --vl-ink-mute: #5f5d57;
    --vl-rule:     #b9b6ae;
  }
}