/*
 * Design-Tokens: einzige Quelle für Gestaltungswerte des Themes.
 *
 * Wird vor allen anderen Stylesheets geladen (Frontend: inc/enqueue.php,
 * Grid-Editor im Admin: inc/admin-grid-editor.php). Bauteil-CSS verwendet
 * Farben, Abstände, Schriften, Radien, Linienstärken, Ebenen und
 * Animationszeiten nur über diese Variablen.
 *
 * Zwei Ebenen:
 * 1. Basis-Werte (Palette, Skalen) — Rohwerte, nur hier verwendet oder
 *    für eindeutig benannte Rollen.
 * 2. Semantische Tokens (Zweck: Fläche, Text, Linie, Akzent, Schatten …)
 *    — die Bauteile verwenden diese.
 *
 * Bewusst KEINE Tokens: die Geometrie der isometrischen Kacheln und des
 * Panels (Kachelmaße, clip-path-Polygone, Versätze, Panelbreite) — das
 * sind bauteileigene Konstruktionsmaße, keine wiederverwendbaren
 * Gestaltungswerte; sie stehen kommentiert direkt im jeweiligen Bauteil.
 * Media-Query-Grenzen ebenfalls nicht, weil var() in @media nicht
 * funktioniert.
 *
 * Eingeführt 2026-10-26: Werte aus dem bisherigen CSS übernommen;
 * Abstände außerhalb der Skala danach auf Una-Wunsch auf die nächste
 * Skalenstufe vereinheitlicht.
 */

:root {
	/* ---------- 1. Basis: Palette ---------- */
	--color-navy: #0a1622;
	--color-petrol: #0f3436;
	--color-forest: #12251c;
	--color-anthracite: #202325;
	--color-plum-deep: #0f0017;
	--color-teal-deep: #002421;
	--color-tile-side-light: #0a2426;
	--color-tile-side-dark: #050d14;
	--color-text: #e9f3f1;
	--color-text-dim: #a9bdb9;
	--color-accent-magenta: #ff3fb4;
	--color-accent-apricot: #ffb37b;
	--color-accent-turquoise: #2ff2d0;

	/* Transparente Abstufungen (rgba, damit sie in Verläufen und
	   Schatten exakt wie bisher wirken). */
	--color-black-30: rgba( 0, 0, 0, 0.3 );
	--color-black-35: rgba( 0, 0, 0, 0.35 );
	--color-black-40: rgba( 0, 0, 0, 0.4 );
	--color-black-45: rgba( 0, 0, 0, 0.45 );
	--color-black-50: rgba( 0, 0, 0, 0.5 );
	--color-black-60: rgba( 0, 0, 0, 0.6 );
	--color-black-70: rgba( 0, 0, 0, 0.7 );
	--color-black-80: rgba( 0, 0, 0, 0.8 );
	--color-black-90: rgba( 0, 0, 0, 0.9 );
	--color-white-05: rgba( 255, 255, 255, 0.05 );
	--color-white-08: rgba( 255, 255, 255, 0.08 );
	--color-text-15: rgba( 233, 243, 241, 0.15 );
	--color-text-40: rgba( 233, 243, 241, 0.4 );
	--color-navy-0: rgba( 10, 22, 34, 0 );
	--color-navy-65: rgba( 10, 22, 34, 0.65 );
	--color-navy-85: rgba( 10, 22, 34, 0.85 );
	--color-night-18: rgba( 6, 12, 18, 0.18 );
	--color-turquoise-06: rgba( 47, 242, 208, 0.06 );
	--color-turquoise-15: rgba( 47, 242, 208, 0.15 );
	--color-turquoise-18: rgba( 47, 242, 208, 0.18 );
	--color-magenta-18: rgba( 255, 63, 180, 0.18 );

	/* ---------- 2. Semantisch: Farben ---------- */
	--color-surface: var( --color-navy );
	--color-surface-raised: var( --color-anthracite );
	--color-surface-transparent: var( --color-navy-0 );
	--color-surface-translucent: var( --color-navy-65 );
	--color-surface-translucent-strong: var( --color-navy-85 );
	--color-page-gradient-start: var( --color-plum-deep );
	--color-page-gradient-end: var( --color-teal-deep );
	--color-box-bg: var( --color-white-05 );
	--color-box-border: var( --color-text-15 );
	--color-line: var( --color-text-15 );
	--color-line-strong: var( --color-text-40 );
	--color-chip-bg: var( --color-white-08 );
	--color-surface-alt: var( --color-petrol );
	--color-surface-deep: var( --color-forest );
	--color-text-muted: var( --color-text-dim );
	--color-accent: var( --color-accent-turquoise );
	--color-accent-alt: var( --color-accent-magenta );
	--color-accent-warm: var( --color-accent-apricot );
	--color-accent-soft: var( --color-turquoise-15 );
	--color-positive-bg: var( --color-turquoise-18 );
	--color-negative-bg: var( --color-magenta-18 );
	--color-scrim: var( --color-night-18 );
	--color-cursor-glow: var( --color-turquoise-06 );
	--color-inset-field: var( --color-black-30 );

	/* Schattenfarben, von schwach nach stark. */
	--color-shadow-30: var( --color-black-30 );
	--color-shadow-35: var( --color-black-35 );
	--color-shadow-40: var( --color-black-40 );
	--color-shadow-45: var( --color-black-45 );
	--color-shadow-50: var( --color-black-50 );
	--color-shadow-60: var( --color-black-60 );
	--color-shadow-70: var( --color-black-70 );
	--color-shadow-80: var( --color-black-80 );
	--color-shadow-90: var( --color-black-90 );

	/* Druckfassung (assets/css/print.css): helles Papier statt Dunkel-Look. */
	--print-ink: #1a1a1a;
	--print-paper: #fff;
	--print-muted: #555;
	--print-subtle: #666;
	--print-line: #999;

	/* ---------- Abstände (rem-Skala) ---------- */
	--space-3xs: 0.125rem; /* 2px: Feinabstand in Symbolen und unter Feldern */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 2.5rem;
	--space-3xl: 3rem;
	--space-4xl: 4rem;
	--space-5xl: 5rem;
	--space-6xl: 6rem;
	--space-7xl: 8rem;

	/* ---------- Schrift ---------- */
	--font-family-sans: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-family-display: 'Italiana', Georgia, 'Times New Roman', serif;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--font-size-3xs: 0.65rem;
	--font-size-2xs: 0.75rem;
	--font-size-xs: 0.8rem;
	--font-size-sm: 0.85rem;
	--font-size-md: 0.9rem;
	--font-size-base-sm: 0.95rem;
	--font-size-base: 1rem;
	--font-size-base-lg: 1.05rem;
	--font-size-lg: 1.1rem;
	--font-size-xl: 1.2rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 2rem;
	--font-size-footer: 10pt;
	--font-size-headline: clamp( 2rem, 5vw + 1rem, 3.75rem );
	--font-size-dropcap: 3.4em;
	--font-size-relative-sm: 0.9em; /* relativ zur umgebenden Schrift */
	--font-size-relative-xs: 0.75em;

	--letter-spacing-footer: 0.02em;
	--letter-spacing-wide: 0.04em;
	--letter-spacing-wider: 0.06em;

	/* ---------- Radien ---------- */
	--radius-xs: 0.15rem;
	--radius-sm: 0.4rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.6rem;
	--radius-xl: 1rem;
	--radius-pill: 999px;
	--radius-round: 50%;

	/* ---------- Linienstärken ---------- */
	--border-width-thin: 1px;
	--border-width-medium: 2px;
	--border-width-thick: 3px;
	--focus-ring-width: var( --border-width-medium );
	--focus-ring-offset: 2px;

	/* ---------- Ebenen (z-index) ---------- */
	--z-header-shadow: 10;
	--z-footer-link: 11;
	--z-panel-scrim: 15;
	--z-panel: 16;
	--z-media-window: 17;
	--z-media-toggle: 18;
	--z-panel-fade: 19;
	--z-header: 20;

	/* ---------- Bewegung ---------- */
	--duration-fast: 0.18s;
	--duration-short: 0.2s;
	--duration-medium: 0.3s;
	--duration-panel: 0.35s;
	--duration-slow: 0.6s;
	--duration-grid: 0.9s;
	--ease-out-expo: cubic-bezier( 0.22, 1, 0.36, 1 );

	/* ---------- Schatten ---------- */
	--shadow-header: 0 20px 40px var( --color-shadow-80 );
	--shadow-popover: 0 10px 30px var( --color-shadow-40 );
	--shadow-tile: 0 14px 24px var( --color-shadow-50 ), 0 3px 6px var( --color-shadow-35 );
	--shadow-tile-lift: 0 14px 24px var( --color-shadow-50 );
	--shadow-panel-side: -20px 0 50px var( --color-shadow-50 );
	--shadow-panel-bottom: 0 -20px 50px var( --color-shadow-50 );
	--shadow-field: inset 0 0 0.5rem var( --color-shadow-45 ), inset 0 0 1.5rem var( --color-shadow-50 );
	--shadow-sunken: inset 0 0 0.6rem var( --color-shadow-90 ), inset 0 0 4rem var( --color-shadow-70 );

	/* ---------- Elementgrößen ---------- */
	--size-cursor-glow: 960px; /* = 2 × 480px Radius des Lichtkegels. */
	--size-content-max: 42rem;
	--size-panel-max: 44rem;
	--size-search-group-max: 40rem;
	--size-search-field: 18rem;
	--size-search-field-min: 10rem;
	--size-filter-min: 8rem;
	--size-suggestions-max: 16rem;
	--size-logo-height: 2.5rem;
	--size-media-toggle: 2.25rem;
	--size-textarea-min: 8rem;
	--size-select-icon: 1.1rem;
	--size-checkbox: 1.05rem;
}