/*
Theme Name: kr3m
Description: kr3m Design System als Child-Theme von Twenty Twenty-Five. Farben, Typografie, Spacing, Radien und Shadows kommen aus dem kr3m Design System (claude.ai/design).
Author: kr3m. media GmbH
Template: twentytwentyfive
Version: 0.2.1
Requires at least: 6.7
Requires PHP: 8.0
Text Domain: kr3m
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ---------------------------------------------------------------------------
   WordPress-spezifische Anpassungen.
   Die Design-System-Tokens selbst liegen unverändert in tokens/ und werden
   davor geladen (siehe functions.php). Hier steht nur, was WordPress braucht
   und was im Design System so nicht vorkommt.
   --------------------------------------------------------------------------- */

/* Das Design System setzt h1–h4 und p auf margin:0. In Block-Themes regelt
   WordPress Abstände über blockGap, das passt zusammen — aber der Editor
   erwartet, dass wir p im Content nicht global plattmachen. */
.editor-styles-wrapper p,
.wp-site-blocks p {
  margin-block: 0;
}

/* Fokus-Ring aus dem Design System auf alle interaktiven Elemente,
   die WordPress ausgibt. */
.wp-site-blocks :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--kr-red);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus);
}

/* Eyebrow/Kicker-Label — im Editor über "Zusätzliche CSS-Klasse: kr-overline"
   auf einen Absatz anwendbar. Definition kommt aus tokens/base.css. */

/* Karten-Optik des Design Systems.
   .is-style-kr3m-card kommt vom registrierten Block-Stil (Editor-Auswahl),
   .kr-card lässt sich zusätzlich als freie CSS-Klasse setzen. */
.is-style-kr3m-card,
.kr-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}

.is-style-kr3m-card:hover,
.kr-card:hover {
  box-shadow: var(--shadow-md);
}

/* Sekundärer Button (Outline) — Design-System-Variante,
   im Editor via "Zusätzliche CSS-Klasse: is-style-kr3m-secondary". */
.wp-block-button.is-style-kr3m-secondary .wp-block-button__link {
  background: transparent;
  color: var(--kr-red);
  border: 1px solid var(--kr-red);
}

.wp-block-button.is-style-kr3m-secondary .wp-block-button__link:hover {
  background: var(--kr-red-050);
  color: var(--kr-red-600);
  border-color: var(--kr-red-600);
}

/* Ghost-Button */
.wp-block-button.is-style-kr3m-ghost .wp-block-button__link {
  background: transparent;
  color: var(--kr-red);
  border: 1px solid transparent;
}

.wp-block-button.is-style-kr3m-ghost .wp-block-button__link:hover {
  background: var(--kr-red-050);
  color: var(--kr-red-600);
}

/* Pill-Button */
.wp-block-button.is-style-kr3m-pill .wp-block-button__link {
  border-radius: var(--radius-pill);
}