/* ==========================================================================
   Token-Brücke
   --------------------------------------------------------------------------
   WordPress benennt Tokens um: aus --color-accent wird
   --wp--preset--color--accent. Diese Datei bildet die alten Namen auf die
   neuen ab.

   Der Zweck: Die Abschnitte 2 bis 5 aus app/globals.css (Basis, Layout,
   Bausteine, Seitenmuster) lassen sich damit UNVERÄNDERT übernehmen. Nur
   der :root-Block des Entwurfs entfällt — er ist jetzt die theme.json.

   Einbinden VOR der übernommenen Stildatei.
   ========================================================================== */

:root {
  /* --- Farben: Grundflächen ------------------------------------------- */
  --color-bg:             var(--wp--preset--color--bg);
  --color-surface:        var(--wp--preset--color--surface);
  --color-surface-muted:  var(--wp--custom--color--surface-muted);

  /* --- Farben: Rahmen -------------------------------------------------- */
  --color-border:         var(--wp--custom--color--border);
  --color-border-strong:  var(--wp--custom--color--border-strong);

  /* --- Farben: Text ---------------------------------------------------- */
  --color-text:           var(--wp--preset--color--text);
  --color-text-muted:     var(--wp--preset--color--text-muted);
  --color-text-on-accent: var(--wp--custom--color--text-on-accent);

  /* --- Farben: Akzent -------------------------------------------------- */
  --color-accent:         var(--wp--preset--color--accent);
  --color-accent-hover:   var(--wp--custom--color--accent-hover);
  --color-accent-active:  var(--wp--custom--color--accent-active);
  --color-accent-subtle:  var(--wp--custom--color--accent-subtle);
  --color-accent-border:  var(--wp--custom--color--accent-border);

  /* --- Farben: Marke --------------------------------------------------
     Die Navy-Flaeche der Store-Grafiken, uebernommen am 16.09.2026 fuer den
     Fuss. Eine eigene Farbe je Produktfamilie war kurz eingebaut und wurde
     wieder entfernt: Die Seite bleibt einfarbig. */
  --color-marke:          var(--wp--custom--color--marke-navy);
  --color-marke-text:     var(--wp--custom--color--marke-silber);

  /* --- Farben: Status -------------------------------------------------- */
  --color-success:        var(--wp--preset--color--success);
  --color-success-subtle: var(--wp--custom--color--success-subtle);
  --color-success-border: var(--wp--custom--color--success-border);
  --color-warning:        var(--wp--preset--color--warning);
  --color-warning-subtle: var(--wp--custom--color--warning-subtle);
  --color-warning-border: var(--wp--custom--color--warning-border);
  --color-error:          var(--wp--preset--color--error);
  --color-error-subtle:   var(--wp--custom--color--error-subtle);
  --color-error-border:   var(--wp--custom--color--error-border);

  /* --- Typografie ------------------------------------------------------ */
  --font-sans:   var(--wp--preset--font-family--sans);
  --font-mono:   var(--wp--preset--font-family--mono);

  --weight-regular:  var(--wp--custom--weight--regular);
  --weight-medium:   var(--wp--custom--weight--medium);
  --weight-semibold: var(--wp--custom--weight--semibold);
  --weight-bold:     var(--wp--custom--weight--bold);

  --text-xs:   var(--wp--preset--font-size--xs);
  --text-base: var(--wp--preset--font-size--base);
  --text-md:   var(--wp--preset--font-size--md);
  --text-lg:   var(--wp--preset--font-size--lg);
  --text-xl:   var(--wp--preset--font-size--xl);
  --text-2xl:  var(--wp--preset--font-size--xxl);
  --text-3xl:  var(--wp--preset--font-size--xxxl);

  --leading-tight:   var(--wp--custom--leading--tight);
  --leading-normal:  var(--wp--custom--leading--normal);
  --leading-relaxed: var(--wp--custom--leading--relaxed);

  /* --- Abstände -------------------------------------------------------- */
  --space-0: 0;
  --space-1: var(--wp--preset--spacing--10);
  --space-2: var(--wp--preset--spacing--20);
  --space-3: var(--wp--preset--spacing--30);
  --space-4: var(--wp--preset--spacing--40);
  --space-5: var(--wp--preset--spacing--50);
  --space-6: var(--wp--preset--spacing--60);
  --space-7: var(--wp--preset--spacing--70);
  --space-8: var(--wp--preset--spacing--80);
  --space-9: var(--wp--preset--spacing--90);

  /* --- Radien, Rahmen, Fokus, Zielgröße, Maße -------------------------- */
  --radius-sm:    var(--wp--custom--radius--sm);
  --radius-md:    var(--wp--custom--radius--md);
  --border-thin:  var(--wp--custom--border--thin);
  --border-thick: var(--wp--custom--border--thick);
  --focus-width:  var(--wp--custom--focus--width);
  --focus-offset: var(--wp--custom--focus--offset);
  --focus-color:  var(--color-accent);
  --target-min:   var(--wp--custom--target--min);
  --measure:       var(--wp--custom--measure);
  --container-max: var(--wp--custom--container-max);
}