/* WD Base — Token-Alias-Layer.
   Bildet die kurzen, lesbaren Token-Namen (die sections.css nutzt) auf die von
   theme.json erzeugten WP-Presets ab. Pro Kunde ändert sich NUR das theme.json
   (Palette/Fonts/custom) — sections.css und diese Datei bleiben byte-identisch.
   Die 5-Tier-Gutter (--pad-x) bleibt hier, weil theme.json keine Media-Queries kann. */
:root {
  --primary:    var(--wp--preset--color--primary);
  --primary-d:  var(--wp--preset--color--primary-d);
  --accent:     var(--wp--preset--color--accent);
  --navy:       var(--wp--preset--color--secondary);
  --navy-2:     var(--wp--preset--color--secondary-d);
  --ink:        var(--wp--preset--color--text);
  --ink-soft:   var(--wp--preset--color--ink-soft);
  --paper:      var(--wp--preset--color--bg);
  --surface:    var(--wp--preset--color--surface);
  --surface-2:  var(--wp--preset--color--surface-2);
  --line:       var(--wp--preset--color--line);
  --on-primary: var(--wp--preset--color--on-primary);
  --display:    var(--wp--preset--font-family--display);
  --body:       var(--wp--preset--font-family--body);
  --radius:     var(--wp--custom--radius);
  --radius-sm:  var(--wp--custom--radius-sm);
  --shadow:     var(--wp--custom--shadow);
  --shadow-sm:  var(--wp--custom--shadow-sm);
  --ease:       var(--wp--custom--ease);
  --btn-min-h:  var(--wp--custom--btn-min-h);
  --maxw:       var(--wp--custom--maxw);

  /* ---- Semantische Rollen-Tokens (marken-AGNOSTISCH) -----------------------
     wd-base-Komponenten dürfen KEINE Markenfarbe hardcoden. Dunkle Sektionen
     (Header/Hero/page-hero/CTA/Footer) + Text darauf laufen ausschließlich über
     diese Rollen. Default = theme.json-Tokens / WEISS-basiert → jede Marke rendert
     in-brand; eine Marke kann nie in eine andere durchschlagen. Ein Kunde
     überschreibt sie EINMAL in seinem :root (Faithful-CSS) = „CI im Theme verankert". */
  --wd-dark:           var(--wp--preset--color--secondary);
  --wd-dark-2:         var(--wp--preset--color--secondary-d);
  --wd-on-dark:        #ffffff;
  --wd-on-dark-muted:  color-mix(in srgb, var(--wd-on-dark) 82%, transparent);
  --wd-on-dark-faint:  color-mix(in srgb, var(--wd-on-dark) 64%, transparent);
  --wd-accent-on-dark: var(--wp--preset--color--accent, var(--wd-on-dark));

  --pad-x: 16px;
}
@media (min-width: 480px)  { :root { --pad-x: 22px; } }
@media (min-width: 768px)  { :root { --pad-x: 32px; } }
@media (min-width: 1024px) { :root { --pad-x: 48px; } }
@media (min-width: 1280px) { :root { --pad-x: 64px; } }