/* ==========================================================================
   tokens.css — zentrale Design-Tokens
   Einzige Quelle für Farbe, Typografie, Raster, Abstand, Motion.
   Wer hier etwas ändert, ändert es überall.
   ========================================================================== */

:root {
  /* ---- Farbe: Basis ---------------------------------------------------- */
  /* Kein reines Schwarz — vermeidet harte Kanten und OLED-Schlieren. */
  --ink-900: #08080a;   /* Seitenhintergrund */
  --ink-800: #0d0d10;   /* abgesetzte Flächen */
  --ink-700: #131317;   /* Karten, Zeilen-Hover */
  --ink-600: #1c1c21;   /* Rahmen auf Dunkel */

  --paper:   #e9e6de;   /* warmes Off-White, Hauptfläche hell */
  --paper-2: #f4f2ec;   /* helle Fläche, aufgehellt */
  --paper-3: #dcd8ce;   /* helle Fläche, abgedunkelt */

  /* ---- Farbe: Text ----------------------------------------------------- */
  /* Alle Werte gegen ihren Untergrund auf WCAG AA (4.5:1) geprüft. */
  --fg:          #f2f1ed;  /* Primärtext auf Dunkel */
  --fg-dim:      #a5a5a0;  /* Sekundärtext auf Dunkel — 8.9:1 auf --ink-900 */
  --fg-faint:    #85857f;  /* Meta/Labels auf Dunkel — 5.4:1 */
  --fg-ink:      #14141a;  /* Primärtext auf Hell */
  --fg-ink-dim:  #55554f;  /* Sekundärtext auf Hell — 6.9:1 auf --paper */
  --fg-ink-faint:#64645c;  /* Meta/Labels auf Hell — 4.8:1 */

  /* ---- Farbe: Linien --------------------------------------------------- */
  --rule:        rgba(242, 241, 237, 0.14);
  --rule-strong: rgba(242, 241, 237, 0.26);
  --rule-ink:        rgba(20, 20, 26, 0.16);
  --rule-ink-strong: rgba(20, 20, 26, 0.34);

  /* ---- Farbe: Neon ----------------------------------------------------- */
  /* Regel: Neon ist LICHT, kein Rahmen. Als Glow, Verlauf, Punkt oder
     einzelne Haarlinie einsetzen — niemals als Kontur um jedes Element. */
  --lime:   #c8ff2f;
  --violet: #7b5cff;
  --cyan:   #4fd6ff;

  --lime-ink:   #4d6600;  /* Lime abgedunkelt für Text auf Hell — 4.8:1 */
  --violet-ink: #4a34c4;  /* Violett abgedunkelt für Text auf Hell */

  --glow-lime:   rgba(200, 255, 47, 0.30);
  --glow-violet: rgba(123, 92, 255, 0.28);
  --glow-cyan:   rgba(79, 214, 255, 0.22);

  --focus: var(--lime);

  /* ---- Typografie ------------------------------------------------------ */
  /* Bewusst nur eine Familie. Helvetica ist die Anweisung, nicht der
     Kompromiss — die Hierarchie entsteht über Größe, Schnitt und Laufweite. */
  --font-sans: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluide Skala, Basis 16px, Verhältnis ~1.25 auf kleinen Screens */
  --step--2: 0.6875rem;                              /* 11px — nur Labels */
  --step--1: 0.8125rem;                              /* 13px — Meta */
  --step-0:  clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem);  /* 15–17px Fließtext */
  --step-1:  clamp(1.0625rem, 1rem + 0.31vw, 1.25rem);
  --step-2:  clamp(1.375rem, 1.25rem + 0.63vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
  --step-4:  clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
  /* Displaygrade skalieren mit Breite UND Höhe: Ein Titel, der auf einem
     flachen Laptop den ganzen Bildschirm füllt, zerstört die Komposition. */
  --display-s: clamp(2.5rem, min(4.6vw, 7vh), 5.5rem);
  --display-m: clamp(2.75rem, min(6.4vw, 9.5vh), 8rem);
  --display-l: clamp(3.25rem, min(8.6vw, 12.5vh), 10.5rem);

  /* Laufweite: je größer der Grad, desto enger (Butterick) */
  --track-display: -0.055em;
  --track-head:    -0.035em;
  --track-body:    0;
  --track-caps:    0.1em;   /* Versalien immer sperren */

  --leading-display: 0.86;
  --leading-head:    1.05;
  --leading-body:    1.6;

  /* ---- Raster & Maße --------------------------------------------------- */
  --shell: 1440px;                 /* maximale Inhaltsbreite */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 62ch;                 /* Zeilenlänge Fließtext: 45–90 Zeichen */
  --measure-tight: 46ch;
  --bar-h: 68px;                   /* Höhe Kopfleiste */

  /* Abstandsskala, 4px-Basis, großzügig (Density 3/10) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(5.5rem, 11vh, 10rem);

  /* Radien bewusst klein — große Radien erzeugen den generischen Karten-Look */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 10px;   /* nur Browser-Mock im Scroll-Aufbau */

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);      /* Eingänge */
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);      /* Ausgänge */
  --ease-mid:  cubic-bezier(0.65, 0, 0.35, 1);     /* Zustandswechsel */

  --dur-micro: 140ms;   /* Hover, Toggle */
  --dur-state: 260ms;   /* Panels, Zeilen */
  --dur-heavy: 520ms;   /* Overlays, Reveals */

  /* ---- Ebenen ---------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 10;
  --z-bar: 40;
  --z-menu: 45;
  --z-grain: 100;
}

/* Reduzierte Bewegung: Dauer global auf ~0 ziehen, statt jede Regel
   einzeln zu überschreiben. Scroll-gebundene Zustände bleiben nutzbar. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-state: 1ms;
    --dur-heavy: 1ms;
  }
}