/*
 * Design-Tokens — Standardwerte des Basis-Themes.
 *
 * BEWUSST NEUTRAL. Diese Werte sollen nirgends „nach Marke" aussehen; sie sind
 * nur dafür da, dass ein Shop ohne Child-Theme nicht kaputt aussieht.
 *
 * NICHT HIER ÄNDERN. Zum Gestalten das Child-Theme überschreiben lassen:
 *   themes/<marke>/assets/css/design.css
 *
 * Referenz aller Tokens mit Bedeutung: docs/02-design-tokens.md
 */

:root {
  /* ── Farben: Flächen ───────────────────────────── */
  --wlf-color-bg:            #ffffff;   /* Seitenhintergrund */
  --wlf-color-surface:       #f6f7f8;   /* Karten, abgesetzte Blöcke */
  --wlf-color-surface-alt:   #eceef0;   /* zweite Ebene, Hover auf Flächen */

  /* ── Farben: Text ──────────────────────────────── */
  --wlf-color-ink:           #16181b;   /* Fließtext, Überschriften */
  --wlf-color-ink-muted:     #646b73;   /* Sekundärtext, Meta-Angaben */
  --wlf-color-ink-inverted:  #ffffff;   /* Text auf dunklen Flächen */

  /* ── Farben: Linien ────────────────────────────── */
  --wlf-color-line:          #d8dbde;   /* Rahmen, Trenner */
  --wlf-color-line-soft:     #e9ebed;   /* dezente Trenner in Listen */

  /* ── Farben: Akzent (Marke) ────────────────────── */
  --wlf-color-accent:        #16181b;   /* Buttons, Links, Hervorhebung */
  --wlf-color-accent-hover:  #000000;
  --wlf-color-accent-ink:    #ffffff;   /* Text AUF der Akzentfarbe */

  /* ── Farben: Signale ───────────────────────────── */
  --wlf-color-success:       #2e6b60;
  --wlf-color-warning:       #a9682f;
  --wlf-color-danger:        #a3342a;

  /* ── Schrift ───────────────────────────────────── */
  --wlf-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wlf-font-display: var(--wlf-font-body);  /* Überschriften */
  --wlf-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Typo-Skala — bewusst klein gehalten; mehr Stufen = mehr Uneinheitlichkeit */
  --wlf-text-xs:   0.75rem;   /* 12px — Labels, Badges */
  --wlf-text-sm:   0.875rem;  /* 14px — Meta, Hilfetext */
  --wlf-text-base: 1rem;      /* 16px — Fließtext */
  --wlf-text-lg:   1.125rem;  /* 18px — Lead */
  --wlf-text-xl:   1.375rem;  /* 22px — Kartentitel */
  --wlf-text-2xl:  1.75rem;   /* 28px — Abschnittsüberschrift */
  --wlf-text-3xl:  2.5rem;    /* 40px — Seitentitel */

  --wlf-leading-tight: 1.15;
  --wlf-leading-base:  1.55;
  --wlf-tracking-wide: 0.08em;  /* für Versalien-Labels */

  --wlf-weight-normal: 400;
  --wlf-weight-medium: 500;
  --wlf-weight-bold:   700;

  /* ── Abstände ──────────────────────────────────── */
  --wlf-space-1: 0.25rem;
  --wlf-space-2: 0.5rem;
  --wlf-space-3: 0.75rem;
  --wlf-space-4: 1rem;
  --wlf-space-5: 1.5rem;
  --wlf-space-6: 2rem;
  --wlf-space-7: 3rem;
  --wlf-space-8: 4.5rem;

  /* ── Layout ────────────────────────────────────── */
  --wlf-container:        1200px;  /* Standardbreite */
  --wlf-container-narrow:  720px;  /* Lesetexte */
  --wlf-gutter:  var(--wlf-space-5);

  /* ── Form ──────────────────────────────────────── */
  --wlf-radius-sm: 3px;
  --wlf-radius-md: 6px;
  --wlf-radius-lg: 12px;
  --wlf-radius-pill: 999px;

  --wlf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --wlf-shadow-md: 0 8px 24px -12px rgba(0, 0, 0, .18);

  /* ── Bewegung ──────────────────────────────────── */
  --wlf-transition: 140ms ease;
}

/*
 * Dunkler Modus: Das Basis-Theme schaltet NICHT automatisch um. Ob ein Shop
 * einen Dunkelmodus anbietet, ist eine Design-Entscheidung und gehört ins
 * Child-Theme. Vorlage:
 *
 *   @media (prefers-color-scheme: dark) {
 *     :root { --wlf-color-bg: #101315; ... }
 *   }
 */

@media (prefers-reduced-motion: reduce) {
  :root { --wlf-transition: 0ms; }
}