/**
 * Design Tokens
 *
 * Single source of truth for custom design properties.
 * Color palette hex values are registered in theme.json (for the editor UI)
 * and auto-generated as --wp--preset--color--* variables by WordPress.
 * This file defines semantic tokens that reference those preset variables.
 */

/* Selector includes `body` so these tokens are also available inside the
   block editor iframe: WordPress maps `body` to `.editor-styles-wrapper`
   when scoping editor styles, whereas a bare `:root` does not reliably
   cascade to blocks there. On the front end `:root` is what applies. */
:root,
body {
	/* ============================================
	   Section Color Tokens
	   ============================================ */
	--section-projekte-bg: var(--wp--preset--color--gelb);
	--section-projekte-text: var(--wp--preset--color--schwarz);

	--section-presse-bg: var(--wp--preset--color--erde-gruen);
	--section-presse-text: var(--wp--preset--color--weiss);

	--section-publikationen-bg: var(--wp--preset--color--publikationen);
	--section-publikationen-text: var(--wp--preset--color--weiss);

	--section-stellen-bg: var(--wp--preset--color--stellen);
	--section-stellen-text: var(--wp--preset--color--schwarz);

	--section-beitraege-bg: var(--wp--preset--color--azure);
	--section-beitraege-text: var(--wp--preset--color--schwarz);

	--section-header-bg: var(--wp--preset--color--blau-1);
	--section-header-text: var(--wp--preset--color--weiss);

	--section-body-bg: var(--wp--preset--color--weiss);
	--section-body-text: var(--wp--preset--color--blau-1);

	--section-light-bg: var(--wp--preset--color--grau-1);
	--section-light-text: var(--wp--preset--color--blau-1);

	/* ============================================
	   TwentyTwentyFive Backward-Compatible Aliases
	   Parent theme color slugs referenced in templates,
	   patterns, and page content. Maps to our palette.
	   ============================================ */
	--wp--preset--color--base: var(--wp--preset--color--weiss);
	--wp--preset--color--contrast: var(--wp--preset--color--blau-1);
	--wp--preset--color--accent-1: var(--wp--preset--color--grau-1);
	--wp--preset--color--accent-2: var(--wp--preset--color--erde-gruen);
	--wp--preset--color--accent-3: var(--wp--preset--color--azure);
	--wp--preset--color--accent-4: #7D8287;
	--wp--preset--color--accent-5: var(--wp--preset--color--grau-1);
	--wp--preset--color--accent-6: #E2E2E2;

	/* ============================================
	   Typography Tokens
	   ============================================ */
	--font-family-base: var(--wp--preset--font-family--gt-america);
	--font-weight-normal: 400;
	--font-weight-bold: 500;
	--line-height-body: 1.4;
	--line-height-heading: 1.125;
	--letter-spacing-base: -0.1px;

	/* ============================================
	   Button Tokens
	   ============================================ */
	--button-border-width: 0.15rem;
	--button-padding-block: 0.25rem;
	--button-padding-inline: 1.25rem;
	--button-transition: all 0.2s ease;
}

/* ============================================
   TwentyTwentyFive Utility Class Compatibility
   WordPress only generates has-*-color/background-color
   classes for slugs in settings.color.palette. These
   cover parent theme slugs used in templates and content.
   ============================================ */

.has-base-color { color: var(--wp--preset--color--base) !important; }
.has-base-background-color { background-color: var(--wp--preset--color--base) !important; }
.has-contrast-color { color: var(--wp--preset--color--contrast) !important; }
.has-contrast-background-color { background-color: var(--wp--preset--color--contrast) !important; }
.has-accent-1-color { color: var(--wp--preset--color--accent-1) !important; }
.has-accent-1-background-color { background-color: var(--wp--preset--color--accent-1) !important; }
.has-accent-2-color { color: var(--wp--preset--color--accent-2) !important; }
.has-accent-2-background-color { background-color: var(--wp--preset--color--accent-2) !important; }
.has-accent-3-color { color: var(--wp--preset--color--accent-3) !important; }
.has-accent-3-background-color { background-color: var(--wp--preset--color--accent-3) !important; }
.has-accent-4-color { color: var(--wp--preset--color--accent-4) !important; }
.has-accent-4-background-color { background-color: var(--wp--preset--color--accent-4) !important; }
.has-accent-5-color { color: var(--wp--preset--color--accent-5) !important; }
.has-accent-5-background-color { background-color: var(--wp--preset--color--accent-5) !important; }
.has-accent-6-color { color: var(--wp--preset--color--accent-6) !important; }
.has-accent-6-background-color { background-color: var(--wp--preset--color--accent-6) !important; }
.has-accent-6-border-color { border-color: var(--wp--preset--color--accent-6) !important; }
.has-accent-1-border-color { border-color: var(--wp--preset--color--accent-1) !important; }