/**
 * Partyprops – Design-Tokens.
 * Ausgelesen aus dem abgenommenen Layout. Ab hier kein Wert mehr frei Hand:
 * jede Farbe, jeder Abstand, jeder Radius im Theme-CSS referenziert eine Variable.
 */

:root {
	/* ---------- Farbe ---------- */
	/* Aus dem Logo abgeleitet. Akzent nur auf dunkler Schrift, nie weiß auf Orange. */
	--pp-accent:        #f3a300; /* Logo-Orange, Flächen und Buttons */
	--pp-accent-dark:   #d69005; /* Hover auf Akzentflächen */
	--pp-accent-ink:    #8a5a00; /* Orange als Textfarbe, 4.6:1 auf Papier */

	--pp-ink:           #2d2a2b; /* Grundschrift, dunkle Sektionen */
	--pp-ink-soft:      #3a3530; /* Fließtext in Langtexten */
	--pp-muted:         #6b655e; /* Sekundärtext, Labels */
	--pp-faint:         #8a827a; /* Platzhalter, Bildunterschriften */

	--pp-paper:         #fbf9f6; /* Seitenhintergrund */
	--pp-paper-2:       #f4f1ec; /* Eingerückte Flächen, GEO-Absatz, TOC */
	--pp-surface:       #ffffff; /* Karten */
	--pp-line:          #e6e1db; /* Rahmen und Trenner */
	--pp-line-strong:   #d8d2ca; /* Formularrahmen, Chips */

	--pp-on-dark:            rgba(242, 238, 232, 1);
	--pp-on-dark-soft:       rgba(242, 238, 232, 0.82);
	--pp-on-dark-muted:      rgba(242, 238, 232, 0.55);
	--pp-on-dark-line:       rgba(242, 238, 232, 0.15);

	--pp-error:         #b3261e;

	/* ---------- Typografie ---------- */
	--pp-font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
	--pp-font-text:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--pp-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

	--pp-text-xs:   0.78rem;  /* Labels, Rechtszeile */
	--pp-text-sm:   0.88rem;  /* Meta, Hinweise */
	--pp-text-base: clamp(1rem, 0.97rem + 0.15vw, 1.06rem);
	--pp-text-lead: clamp(1.05rem, 1rem + 0.35vw, 1.19rem);

	--pp-h1: clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
	--pp-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem);
	--pp-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
	--pp-h4: 1.05rem;

	--pp-weight-text:    400;
	--pp-weight-medium:  500;
	--pp-weight-strong:  600;
	--pp-weight-display: 800;

	--pp-leading-tight: 1.08; /* Überschriften */
	--pp-leading-text:  1.6;  /* Fließtext */
	--pp-tracking-tight: -0.02em; /* Display */
	--pp-tracking-label:  0.08em; /* Versalien-Labels */

	--pp-measure:      72ch; /* Lesebreite Langtext */
	--pp-measure-lead: 60ch;

	/* ---------- Abstände (4-px-Raster) ---------- */
	--pp-space-1:  0.25rem;
	--pp-space-2:  0.5rem;
	--pp-space-3:  0.75rem;
	--pp-space-4:  1rem;
	--pp-space-5:  1.25rem;
	--pp-space-6:  1.5rem;
	--pp-space-8:  2rem;
	--pp-space-10: 2.5rem;
	--pp-space-12: 3rem;
	--pp-space-16: 4rem;

	/* Sektionsabstände, fluid zwischen mobil und Desktop */
	--pp-section-y:       clamp(2.5rem, 5vw, 4.5rem);
	--pp-section-y-tight: clamp(1.5rem, 3vw, 2.5rem);
	--pp-gap-grid:        clamp(0.8rem, 2vw, 1.25rem);
	--pp-gap-cards:       clamp(1rem, 2.2vw, 1.5rem);

	/* ---------- Maße ---------- */
	--pp-max:     1280px;
	--pp-gutter:  clamp(1.1rem, 4vw, 2.5rem);

	--pp-radius-s: 12px; /* Buttons, Felder, kleine Kacheln */
	--pp-radius-l: 20px; /* Karten, Teaser, Dialoge */
	--pp-radius-pill: 999px;

	--pp-border: 1px;

	/* ---------- Schatten ---------- */
	--pp-shadow-header: 0 6px 24px rgba(45, 42, 43, 0.10);
	--pp-shadow-card:   0 18px 40px rgba(45, 42, 43, 0.12);
	--pp-shadow-panel:  -20px 0 60px rgba(45, 42, 43, 0.20);

	/* ---------- Header ---------- */
	--pp-header-h:       96px;
	--pp-logo-h:         80px;
	--pp-logo-h-small:   44px;

	/* ---------- Interaktion ---------- */
	--pp-tap:        44px; /* Mindestgröße Touch-Ziel */
	--pp-control-h:  48px; /* Formularfelder, Buttons */
	--pp-control-h-l: 54px; /* Primäraktion Produktseite */

	--pp-ease:       cubic-bezier(0.2, 0, 0.2, 1);
	--pp-dur-fast:   0.15s;
	--pp-dur:        0.25s;

	--pp-z-header:    100;
	--pp-z-offcanvas: 200;
	--pp-z-dialog:    300;
}

/* ---------- Breakpoints ----------
 * Abgenommen: 640 / 900 / 1280.
 *   < 640  einspaltig
 *   < 900  Off-Canvas statt Navigation
 *  >= 1280 Container am Maximum
 * Custom Properties funktionieren nicht in Media-Queries – die Werte stehen
 * als Kommentar hier und werden im CSS ausgeschrieben. Nirgends andere Zahlen.
 */

@media (max-width: 899px) {
	:root {
		--pp-header-h:     72px;
		--pp-logo-h:       52px;
		--pp-logo-h-small: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--pp-dur-fast: 0.001s;
		--pp-dur:      0.001s;
	}
}