/**
 * Tokens — CSS Custom Properties
 *
 * Quelle der Wahrheit: DESIGN.md §2 bis §6 + §10.1.
 * Diese Datei ist die einzige Stelle, an der Farben, Schriften, Spacing und
 * Easing als Werte definiert werden. Alle weiteren CSS-Files referenzieren
 * über var().
 */

:root {
	/* ── Marken-Welt-Farben (DESIGN.md §2.1) ──────────────────────────── */
	/*
	 * MARINE + GOLD-DISZIPLIN
	 * ── Mitternacht (Marine) + Honig (Gold) ist das klassische Premium-Cliché
	 * ── (siehe DESIGN.md §11.3). Wir brechen es, indem Honig sehr sparsam ist.
	 * ── Honig ist nur an drei Orten erlaubt:
	 * ──   1. Sterne im Hero (Komposition + Pull-Quote-Lead-Glyph)
	 * ──   2. Editorial-Nummern in Werte-Stripe und Säulen
	 * ──   3. Hervorhebungen in CTA-Pärchen (Telefon-Link auf Mitternacht)
	 * ── Außerhalb dieser drei Slots: Honig NICHT verwenden, sonst kippt es ins Cliché.
	 */
	--color-cream:        #FAF6EE;
	--color-midnight:     #1E3A4F;
	--color-honey:        #E8B547;
	--color-terracotta:   #C5613B;
	--color-deep-brown:   #2B2119;

	/* ── Charakter-Farben — Krippen (DESIGN.md §2.2) ──────────────────── */
	--color-marienkaefer: #D85A30;
	--color-fisch:        #4A8FB8;
	--color-sonne:        #E8B547;
	--color-regenbogen:   #9B7AB8;

	/* ── Charakter-Farben — Familiengruppen ───────────────────────────── */
	--color-stern:        #D89C2A;
	--color-mond:         #7A9B7E;
	--color-biene:        #C49B3D;
	--color-baer:         #8B5A3C;

	/* ── Funktionale Farben (DESIGN.md §2.3) ──────────────────────────── */
	--color-text-primary:   #1E3A4F;
	--color-text-body:      #2B2119;
	--color-text-secondary: #5F5E5A;
	--color-text-tertiary:  #8A8985;
	--color-border-subtle:  rgba(43, 33, 25, 0.08);
	--color-border-medium:  rgba(43, 33, 25, 0.16);
	--color-success:        #7A9B7E;
	--color-error:          #C5613B;

	/* ── Schriften (DESIGN.md §3.1) ──────────────────────────────────── */
	--font-sans:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-serif:   "Crimson Pro", Georgia, "Times New Roman", serif;
	--font-display: "Nunito", system-ui, -apple-system, sans-serif;

	/* ── Schrift-Größen (DESIGN.md §3.2) ─────────────────────────────── */
	--font-size-hero:    clamp(2.25rem, 5vw, 3.5rem);
	--font-size-h1:      clamp(1.875rem, 4vw, 2.75rem);
	--font-size-h2:      clamp(1.5rem, 3vw, 2rem);
	--font-size-h3:      clamp(1.25rem, 2.5vw, 1.5rem);
	--font-size-h4:      1.125rem;
	--font-size-body-lg: 1.125rem;
	--font-size-body:    1rem;
	--font-size-body-sm: 0.875rem;
	--font-size-caption: 0.8125rem;
	--font-size-eyebrow: 0.6875rem;

	/* ── Schrift-Gewichte (DESIGN.md §3.3) ───────────────────────────── */
	--font-weight-regular:  400;
	--font-weight-medium:   500;
	--font-weight-semibold: 600;
	--font-weight-bold:     700;

	/* ── Line-Heights (DESIGN.md §3.4) ───────────────────────────────── */
	--line-height-tight:   1.1;
	--line-height-snug:    1.2;
	--line-height-normal:  1.5;
	--line-height-relaxed: 1.65;
	--line-height-loose:   1.75;

	/* ── Letter-Spacing (DESIGN.md §3.5) ─────────────────────────────── */
	--letter-spacing-tight:  -0.02em;
	--letter-spacing-snug:   -0.01em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide:   0.08em;

	/* ── Spacing — 4px-Grid (DESIGN.md §4) ───────────────────────────── */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-6:  24px;
	--space-8:  32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* ── Border-Radii (DESIGN.md §5) ─────────────────────────────────── */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   16px;
	--radius-full: 9999px;

	/* ── Layout (DESIGN.md §6.1) ─────────────────────────────────────── */
	--container-max:    1200px;
	--container-narrow: 680px;
	--container-pad:    var(--space-4);

	/* ── Easing (DESIGN.md §10.1) ────────────────────────────────────── */
	--ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (min-width: 1024px) {
	:root {
		--container-pad: var(--space-8);
	}
}