/* core-tokens.css — die geteilte Mechanik der vier Quartz-Wikis
 *
 * KANONISCHE DATEI. Diese Fassung in seogeo/seo-stack/design/ ist die Quelle;
 * campaigning_wiki, parentalcontrol.wiki, leadership-wiki und learn vendorn sie
 * byteweise. Hier ändern, dann neu vendorn — nie eine Kopie bearbeiten.
 * Abgleich: seogeo/seo-stack/scripts/core-tokens-sync.py
 *
 * Geteilt wird die MECHANIK, nicht die Anmutung. Farbrollen stehen unten als
 * Kommentar und werden je Wiki in einer eigenen brand.css gefüllt — die vier
 * Marken bleiben verschieden (Strategiepapier §6).
 *
 * Skala aus 000_master/.claude/skills/design-standards/SKILL.md.
 * Gemessener Anlass (2026-09-07): campaigning benutzte 53 verschiedene
 * rem-Abstandswerte, parentalcontrol 27, leadership 22, learn 17 — bei einer
 * Skala von neun Stufen. Kein einzelner Wert fällt auf; zusammen nehmen sie
 * der Seite den Rhythmus.
 *
 * CORE_TOKENS_VERSION: 2026-09-07
 */

:root {
  /* ── Abstand — neun Stufen, keine zehnte ─────────────────── */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.5rem;    /* 24px */
  --sp-6: 2rem;      /* 32px */
  --sp-7: 3rem;      /* 48px */
  --sp-8: 4rem;      /* 64px */
  --sp-9: 6rem;      /* 96px */

  /* Abschnittsluft — design-standards: min 64px Desktop, 48px mobil */
  --sp-section: var(--sp-8);
  --sp-section-mobile: var(--sp-7);

  /* ── Typografie ──────────────────────────────────────────── */
  --fs-caption: 0.875rem;
  --fs-body:    1rem;
  --fs-lead:    1.125rem;
  --fs-h3:      1.25rem;
  --fs-h2:      1.5rem;
  --fs-h1:      2rem;
  --lh-tight:   1.25;
  --lh-body:    1.6;

  /* ── Radien ──────────────────────────────────────────────── */
  --radius-tight: 2px;
  --radius:       6px;
  --radius-round: 999px;

  /* ── Zustände ────────────────────────────────────────────── */
  --focus-ring:   2px solid currentColor;
  --focus-offset: 2px;

  /* ── Berührungsziele — design-standards: min 44×44px ─────── */
  --tap-min: 44px;
}

@media (max-width: 48rem) {
  :root { --sp-section: var(--sp-section-mobile); }
}

/* ── Farbrollen: ABSICHTLICH LEER ────────────────────────────
 *
 * Diese Namen füllt jedes Wiki in seiner eigenen brand.css. Wer sie hier mit
 * Werten belegt, macht aus vier Marken eine.
 *
 *   --bg            Grundfläche
 *   --surface       abgesetzte Fläche (Karten)
 *   --ink           Überschriften
 *   --ink-body      Fliesstext
 *   --ink-soft      Sekundärtext — muss 4.5:1 halten
 *   --accent        Markenfarbe für Flächen und Text
 *   --accent-ink    Text auf --accent
 *   --highlight     Akzentfläche
 *   --highlight-ink Text auf --highlight
 *   --border        dekorative Trennlinie (keine Kontrastanforderung)
 *   --border-strong identifizierender Rahmen (Eingabefeld, Schalter) — 3:1
 *
 * Der Unterschied zwischen --border und --border-strong ist der zwischen
 * Trennlinie und Formularrand. WCAG 1.4.11 verlangt 3:1 nur für das Zweite.
 */