/*
 * tokens.css — Design-Tokens, einzige Quelle der Wahrheit.
 * Werte exakt nach DESIGN_SYSTEM.md (Beschlüsse 2026-07-15-5,
 * 2026-07-16-7 und 2026-07-23-9).
 * Farben, Abstände und Schriftgrößen werden ausschließlich über
 * diese Tokens referenziert, nie als Freihandwerte im Komponenten-CSS.
 */

:root {
  /* Farbe */
  --color-paper: #faf8f2;
  --color-surface: #fff;
  --color-field: #fffdf6;
  --color-ink: #21201c;
  --color-ink-soft: #52504a;
  --color-ink-faint: #6e6b63;
  --color-line: #dad5c9;
  --color-line-strong: #b5ae9f;
  --color-accent: #34523a;
  --color-accent-strong: #27402c;
  --color-error: #a2331f;
  --color-focus: var(--color-ink);

  /* Schriftfamilien */
  --font-display: fraunces, georgia, 'Times New Roman', serif;
  --font-text: 'Source Serif 4', georgia, 'Times New Roman', serif;
  --font-ui: 'Instrument Sans', system-ui, -apple-system, sans-serif;

  /* Typografie: fluide Skala (360-px- bis 1280-px-Viewport) */
  --text-meta: clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
  --text-s: clamp(0.9375rem, 0.91rem + 0.2vw, 1rem);
  --text-base: clamp(1.0625rem, 1.02rem + 0.3vw, 1.1875rem);
  --text-lead: clamp(1.1875rem, 1.12rem + 0.45vw, 1.375rem);
  --text-h3: clamp(1.375rem, 1.28rem + 0.6vw, 1.625rem);
  --text-h2: clamp(1.75rem, 1.58rem + 1vw, 2.25rem);
  --text-h1: clamp(2rem, 1.7rem + 1.9vw, 3.25rem);
  --text-display: clamp(2.375rem, 1.9rem + 3.2vw, 4.5rem);
  --text-quote-mark: clamp(4rem, 2.5rem + 5.625vw, 7rem);
  --text-initial: 4.5em;
  --text-end-mark: 0.7em;

  /* Typografie: Zeilenhöhen */
  --leading-text: 1.62;
  --leading-lead: 1.5;
  --leading-heading: 1.25;
  --leading-display: 1.08;

  /* Typografie: Laufweite */
  --tracking-display: -0.015em;
  --tracking-meta: 0.06em;

  /* Typografie: optische Größe der variablen Display-Schrift */
  --opsz-display: 130;
  --opsz-h1: 110;
  --opsz-statement: 120;
  --opsz-h2: 64;
  --opsz-wordmark: 40;

  /* Typografie: Zeilenlängen */
  --measure: 66ch;
  --measure-narrow: 44ch;
  --measure-wide: 80ch;

  /* Abstand (4-px-Basis) */
  --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;
  --space-section: clamp(4rem, 3rem + 6vw, 7rem);

  /* Raster */
  --container-max: 72rem;
  --container-pad: clamp(1rem, 4vw, 2rem);
  --grid-gap: var(--space-5);

  /* Radius & Rahmen */
  --border-w: 1px;
  --border-w-strong: 2px;
  --radius-s: 2px;
  --radius-m: 4px;

  /* Bewegung */
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Ebenen */
  --z-nav: 100;
  --z-overlay: 200;
  --z-dialog: 300;
  --z-skiplink: 400;
}

/*
 * Reduzierte Bewegung: alle Dauern effektiv 0.01ms — Zustandswechsel
 * erscheinen sofort. Scroll-Reveals und View Transitions werden
 * zusätzlich in main.css per Media Query vollständig abgeschaltet.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}