/*
Theme Name: dRei Child (GeneratePress)
Theme URI: https://drei.de
Description: dRei.de child theme for GeneratePress (Block-Theme parent). Tokens, components and templates implement the DRE-118 design system (Stitch tokens 2026-06-11).
Author: dReiWeb
Author URI: https://drei.wtf
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drei-child
Template: generatepress
*/

/* -----------------------------------------------------------------
 * Design tokens — already exposed as CSS variables by theme.json
 * (--wp--preset--color--*, --wp--preset--font-*, --wp--preset--spacing--*).
 * Aliases below normalize the names used inside hand-written CSS.
 * ----------------------------------------------------------------- */
:root {
	--color-surface: var(--wp--preset--color--surface);
	--color-on-surface: var(--wp--preset--color--on-surface);
	--color-on-surface-variant: var(--wp--preset--color--on-surface-variant);
	--color-outline: var(--wp--preset--color--outline);
	--color-outline-variant: var(--wp--preset--color--outline-variant);
	--color-primary: var(--wp--preset--color--primary);
	--color-primary-container: var(--wp--preset--color--primary-container);
	--color-on-primary: var(--wp--preset--color--on-primary);
	--color-error: var(--wp--preset--color--error);

	--radius-sm: 0.25rem;
	--radius-default: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1rem;
	--radius-xl: 1.5rem;
	--radius-full: 9999px;

	--space-xs: var(--wp--preset--spacing--xs);
	--space-sm: var(--wp--preset--spacing--sm);
	--space-md: var(--wp--preset--spacing--md);
	--space-lg: var(--wp--preset--spacing--lg);
	--space-xl: var(--wp--preset--spacing--xl);
	--space-xxl: var(--wp--preset--spacing--xxl);
	--space-giant: var(--wp--preset--spacing--giant);

	--shadow-elev-1: 0 0 0 1px var(--color-outline-variant);
	--shadow-elev-2: 0 0 0 1px var(--color-outline-variant), 0 4px 12px rgba(0, 0, 0, 0.08);

	--glass-blur: 20px;
	--glass-bg: color-mix(in srgb, var(--color-surface) 80%, transparent);
}

/* -----------------------------------------------------------------
 * WCAG 2.4.7 focus ring (Handoff §1.6).
 * Never `outline: none` without this replacement.
 * ----------------------------------------------------------------- */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);
	border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------
 * Skip link — WCAG 4.3 "Zum Inhalt springen".
 * Hidden until focused.
 * ----------------------------------------------------------------- */
.drei-skip-link {
	position: absolute;
	left: var(--space-md);
	top: var(--space-md);
	z-index: 10000;
	padding: var(--space-sm) var(--space-md);
	background: var(--color-primary);
	color: var(--color-on-primary);
	border-radius: var(--radius-default);
	font-weight: 600;
	transform: translateY(-200%);
	transition: transform 0.15s ease-out;
}

.drei-skip-link:focus-visible,
.drei-skip-link:focus {
	transform: translateY(0);
	outline: 2px solid var(--color-on-primary);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------
 * Sticky glassmorphism nav (Handoff §1.5 / Stitch vorlage).
 * Respects prefers-reduced-motion / reduced-transparency.
 * ----------------------------------------------------------------- */
.drei-sticky-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
	border-bottom: 1px solid var(--color-outline-variant);
}

@media (prefers-reduced-transparency: reduce) {
	.drei-sticky-nav {
		background: var(--color-surface);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* -----------------------------------------------------------------
 * Min 44x44 CSS-px touch targets (WCAG 4.12).
 * ----------------------------------------------------------------- */
.wp-block-button__link,
button,
input[type="submit"] {
	min-height: 44px;
	min-width: 44px;
}

/* -----------------------------------------------------------------
 * Status indicators / accent badges
 * Secondary green = Smart-Home OK; Tertiary teal = Hosting/Cloud.
 * ----------------------------------------------------------------- */
.drei-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 4px 12px;
	border-radius: var(--radius-lg);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.drei-badge--smarthome { background: var(--wp--preset--color--secondary-container); color: var(--wp--preset--color--secondary); }
.drei-badge--hosting   { background: var(--wp--preset--color--tertiary-container); color: var(--wp--preset--color--on-primary); }
.drei-badge--error     { background: var(--wp--preset--color--error-container); color: var(--color-error); }