/* ==========================================================================
   OnProm Gestaltungssystem: Alltagsatelier
   tokens.css — Farben, Typografie, Abstände, Bewegung
   Interne Bezeichnung der Bildsprache, kein öffentlicher Slogan.
   ========================================================================== */

:root {
  /* --- Papier und Tinte ------------------------------------------------ */
  --paper: #f4f2e9;
  --paper-raised: #fbfaf4;
  --paper-sunken: #ece9dd;
  --ink: #30342f;
  --ink-muted: #606458;
  --rule: #dcdcd0;
  --rule-strong: #c6c6b6;

  /* --- Editoriale Akzente ---------------------------------------------
     Die Akzenttöne sind auf Papier für Fließtext zugänglich abgedunkelt.
     Reine dekorative Pencil-Füllungen behalten die helleren Briefwerte
     (--brick-pencil, --sage-pencil, --blue-pencil, --wheat-pencil).
     Kein Akzent trägt allein eine Bedeutung. */
  --brick: #96453b;          /* Papier-Kontrast 5.0:1 */
  --brick-strong: #7f3a31;
  --brick-pencil: #a64b3f;   /* Briefwert, nur für Grafik und Linien */
  --sage: #4e5e46;           /* Papier-Kontrast 6.0:1 */
  --sage-strong: #414f3a;
  --sage-pencil: #596a51;
  --blue: #4e6173;           /* Papier-Kontrast 5.3:1 */
  --blue-strong: #415265;
  --blue-pencil: #596c80;
  --wheat: #8a6d2c;          /* Papier-Kontrast 4.6:1, sparsam als Text */
  --wheat-strong: #745c25;
  --wheat-pencil: #d8bf84;   /* Briefwert, nur für Flächen */

  /* --- Zustandsfarben (nie allein durch Farbe) -------------------------- */
  --danger: #8f3a2e;
  --success: #3f5c39;
  --focus: #1f2a4d;

  /* --- Typografie ------------------------------------------------------- */
  --font-ui: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-read: "Newsreader", Georgia, "Times New Roman", serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
  --step-1: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --step-2: clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);
  --step-3: clamp(1.375rem, 1.27rem + 0.52vw, 1.6875rem);
  --step-4: clamp(1.5rem, 1.33rem + 0.85vw, 2rem);
  --step-5: clamp(1.75rem, 1.45rem + 1.5vw, 2.5rem);
  --step-6: clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);
  --step-7: clamp(2.25rem, 1.5rem + 3.6vw, 4.25rem);

  --leading-tight: 1.06;
  --leading-snug: 1.16;
  --leading-normal: 1.35;
  --leading-relaxed: 1.6;

  --tracking-label: 0.09em;
  --tracking-nav: 0.005em;
  --tracking-masthead: -0.022em;

  /* --- Raster und Abstände --------------------------------------------- */
  --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;

  --shell-max: 1280px;
  --shell-gutter: clamp(1.25rem, 4vw, 5rem);
  --measure: 41rem;            /* rund 66 Zeichen bei 20px Newsreader */
  --measure-narrow: 34rem;

  --section-gap: clamp(2.5rem, 5vw, 6rem);
  --section-gap-roomy: clamp(3rem, 7vw, 8rem);

  --radius-hairline: 2px;

  /* --- Bewegung --------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 160ms;
  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
  }
}