/* Website-Tokens: Schriftskala, Abstände, Radien und Bewegung der Website.
   Farben und Schriften kommen aus assets/marke/kern.css (Kopie aus dem Plugin zarevo-marke),
   das vorher geladen wird. Regeln dazu: DESIGN.md. */

:root {
  /* Grund der dunklen Bilder, bevor das Motiv gezeichnet ist */
  --glow-night: #14163a;

  --text-display: clamp(44px, 6.2vw, 112px);  /* nur die Hero-Aussage */
  --text-h1: clamp(34px, 3.6vw, 64px);        /* Abschnittstitel */
  --text-h2: clamp(28px, 2.9vw, 50px);        /* Kartentitel groß */
  --text-h3: clamp(22px, 1.7vw, 26px);        /* Kartentitel klein */
  --text-quote: clamp(26px, 3vw, 50px);
  --text-lead: clamp(18px, 1.45vw, 21px);
  --text-body: 16px;
  --text-small: 14px;
  --text-micro: 12px;                        /* Mono-Labels */

  --track-display: -0.035em;
  --track-heading: -0.025em;
  --track-text: -0.006em;
  --track-mono: 0.06em;

  /* Abstände (8er-Raster) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-7: 56px;
  --s-10: 80px;
  --s-16: 128px;
  --section: clamp(88px, 11vw, 160px);
  --container: 1920px;       /* wächst mit dem Bildschirm, wie bei cohere.com */
  --container-wide: 2280px;  /* Hero-Bild, breiter als der Inhalt */
  --gutter: clamp(16px, 3vw, 40px);
  --nav-h: 72px;

  /* App-Fenster und Panels wachsen auf großen Bildschirmen mit (CSS zoom) */
  --ui-zoom: 1;

  /* Radien: vollständige Liste, keine weiteren Werte */
  --r-sm: 6px;      /* kleine UI: Chips in Panels, Checkboxen */
  --r-md: 10px;     /* Nav-Hover, Eingaben, Zeilen in Panels */
  --r-ui: 8px;      /* Karten in App-Beispielen, wie im Kundenportal */
  --r-lg: 16px;     /* Panels in Karten */
  --r-xl: 24px;     /* Karten, Bilder */
  --r-pill: 999px;  /* Buttons, Tags */

  /* Bewegung */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 450ms;
}

@media (min-width: 1700px) { :root { --ui-zoom: 1.15; } }
@media (min-width: 2100px) { :root { --ui-zoom: 1.3; } }
@media (min-width: 2500px) { :root { --ui-zoom: 1.45; } }