/* Design-Tokens — Farben, Schriften, Typo, Spacing. Einzige Quelle der Wahrheit. */

:root {
	/* ── Farben ──────────────────────────────────────────────
	   Jede Farbe steht einmal als Zahlentripel. Transparenzen leiten sich
	   daraus ab: rgb(var(--color-primary-rgb) / 0.45). Ein Farbwechsel ist
	   damit genau eine Zeile — sonst müssten über 40 Einzelwerte quer durch
	   alle Komponenten gesucht werden. */
	--color-ink-rgb:       20 17 15;      /* Grundfläche, fast schwarz */
	--color-ink-soft-rgb:  31 26 22;      /* abgesetzte dunkle Fläche */
	--color-wood-rgb:      58 36 24;      /* Holz dunkel */
	--color-primary-rgb:   62 122 78;     /* Tannengrün — CTAs, Akzente */
	--color-accent-rgb:    126 26 26;     /* Bordeaux — Headlines, Counter */
	--color-cream-rgb:     244 235 218;   /* Fließtext auf dunkel */
	--color-success-rgb:   46 74 44;      /* Preis-Badges wie auf der Karte */

	--color-ink:           rgb(var(--color-ink-rgb));
	--color-ink-soft:      rgb(var(--color-ink-soft-rgb));
	--color-wood:          rgb(var(--color-wood-rgb));
	--color-wood-light:    #5A3A22;       /* Holz hell, Rahmen */
	--color-wood-soft:     #6B5A45;       /* gedämpfter Text auf Creme */
	--color-primary:       rgb(var(--color-primary-rgb));
	--color-primary-light: #5FA372;       /* Grün hell — Hover, feine Linien */
	--color-accent:        rgb(var(--color-accent-rgb));
	--color-accent-light:  #A32626;       /* Bordeaux Hover */
	--color-success:       rgb(var(--color-success-rgb));
	--color-cream:         rgb(var(--color-cream-rgb));
	--color-cream-dim:     #C9BCA5;       /* zurückgenommener Text auf dunkel */
	--color-white:         #FFFFFF;

	/* ── Verfügbarkeit im Kalender ───────────────────────────
	   Die Farbe trug früher das Zeitfenster (Gold mittags, Bordeaux
	   nachmittags). Bei vier bis fünf Fenstern pro Tag sagt sie jetzt, ob noch
	   etwas frei ist: grün oder rot. */
	--color-taken-rgb:  142 43 43;              /* Rot — ausgebucht */
	--color-free:       var(--color-primary);
	--color-taken:      rgb(var(--color-taken-rgb));
	--color-taken-text: #E8CFCF;                /* Schrift auf dem Rot */

	/* ── Schrift-Familien ────────────────────────────────────── */
	--font-headline: 'Oswald', 'Arial Narrow', Arial, sans-serif;
	--font-body:     'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
	--font-script:   'Great Vibes', 'Snell Roundhand', cursive;

	/* ── Typografie-Skala ────────────────────────────────────── */
	--text-hero:   64px;
	--text-h1:     46px;
	--text-h2:     34px;
	--text-h3:     26px;
	--text-h4:     20px;
	--text-lead:   18px;
	--text-body:   16px;
	--text-small:  14px;
	--text-micro:  12px;

	/* ── Gewichte ────────────────────────────────────────────── */
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* ── Zeilenhöhen ─────────────────────────────────────────── */
	--lh-tight: 1.1;
	--lh-heading: 1.25;
	--lh-normal: 1.55;
	--lh-relaxed: 1.7;

	/* ── Spacing (8er-System) ────────────────────────────────── */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 40px;
	--space-2xl: 64px;
	--space-3xl: 96px;
	--space-4xl: 128px;

	/* ── Breiten ─────────────────────────────────────────────── */
	--container-max:  1180px;
	--container-wide: 1360px;
	--container-text:  720px;

	/* ── Radien, Rahmen, Schatten ────────────────────────────── */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--border-primary: 1px solid rgb(var(--color-primary-rgb) / 0.35);
	--shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.35);
	--shadow-hard: 0 16px 44px rgba(0, 0, 0, 0.55);

	/* ── Transitions ─────────────────────────────────────────── */
	--transition-fast:   150ms ease;
	--transition-normal: 250ms ease;
	--transition-slow:   400ms ease;

	/* ── Layout-Konstanten ───────────────────────────────────── */
	--header-height: 76px;
}