:root {
  /* =========================================================
     ZwirblCon · Variante 5 · Pastell auf Dunkel
     Dunkler Grund, pro Bereich eine Pastellfarbe als Akzent.
     Alle Bewegungen: Easy Ease cubic-bezier(.33, 0, .67, 1).
     ========================================================= */

  /* Pastellfamilie rund um das Marken-Peach */
  --color-peach: #f6b387;
  --color-butter: #efe8a6;
  --color-sage: #bcd8d1;
  --color-lilac: #d8cfe6;
  --color-sand: #e7e1dc;

  /* Grundfarben */
  --color-bg: #191516;
  --color-tile: #221d1e;
  --color-surface-raised: #2b2526;
  --color-text: #f1e4da;
  --color-muted: rgba(241, 228, 218, 0.55);
  --color-on-accent: #191516;
  --color-on-accent-muted: rgba(25, 21, 22, 0.6);
  --color-danger: #ffb4a9;
  --color-success: #a9d7ad;
  --color-warning: #f6d28c;

  /* Per-screen accent (JS or per-template class sets this) and derived hairline */
  --accent: var(--color-peach);
  --accent-hairline: color-mix(in srgb, var(--accent) 40%, transparent);

  /* Brand accent alias kept for compatibility with existing markup */
  --color-accent: var(--accent);
  --color-line: var(--accent-hairline);

  /* Self-hosted Archivo variable font */
  --font-body: "Archivo Variable", Archivo, system-ui, sans-serif;
  --font-display: "Archivo Variable", Archivo, system-ui, sans-serif;

  /* Width axis: always set twice (font-stretch + font-variation-settings) — Safari */
  --font-width-body: 92%;
  --font-width-display: 70%;
  --font-width-subheading: 78%;
  --font-weight-body: 400;
  --font-weight-label: 500;
  --font-weight-bold: 700;
  --font-weight-display: 800;
  --font-size-body: 0.9375rem; /* 15px */
  --font-size-small: 0.8125rem; /* 13px */
  --font-size-label: 0.6875rem; /* 11px */
  --font-size-h1: clamp(1.875rem, 5vw, 2.75rem);
  --font-size-h2: clamp(1.5rem, 4vw, 2rem);
  --line-height-body: 1.4;
  --line-height-tight: 1.05;

  /* Landing display type */
  --font-size-landing-kicker: clamp(0.8125rem, 1.8vw, 1.125rem);
  --font-size-landing-date: clamp(2.75rem, 13vw, 8rem);
  --font-width-landing-body: 92%;

  /* Spacing: 4, 8, 12, 16, 24, 32, 48, 64 px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Layout and shape: Variant 5 is rounded — cards 24px, controls pill */
  --layout-max-width: 70rem; /* 1120px desktop grid */
  --layout-content-width: 47.5rem; /* 760px subpage column */
  --radius-card: 1.5rem;
  --radius-control: 2rem;
  --radius-surface: 1rem;
  --target-min-size: 2.75rem;

  /* Motion: Easy Ease only */
  --motion-duration: 400ms;
  --motion-duration-slow: 800ms;
  --motion-ease: cubic-bezier(0.33, 0, 0.67, 1);
}