/* ==========================================================================
   Vaterhaus Child Theme – Design Tokens
   Architektur: reines CSS + Custom Properties (kein Build-Schritt).
   Quelle der Farbwerte: docs/chatgpt class descriptions styling.txt
   + Werte aus der migrierten Avada-Custom-CSS / Child-Theme-Struktur.
   ========================================================================== */

:root {
	/* --- Farben: Markenbasis (docs/chatgpt…) --- */
	--vh-color-forest: #193d30;        /* Dunkelgrün (Marke) */
	--vh-color-gold: #b9873e;          /* Gold (Marke) */
	--vh-color-cream: #fffdf8;         /* Cremeweiß */

	/* --- Farben: Verstärkungen, abgeleitet --- */
	--vh-color-forest-dark: #102b22;     /* sehr dunkles Grün (Overlays, Text) */
	--vh-color-forest-deep: #203b32;     /* Nav/Player-Grün (Predigten) */
	--vh-color-forest-title: #19362c;    /* Überschriften-Grün (Predigten) */
	--vh-color-forest-body: #2d453a;     /* Fließtext-Grün (Predigten) */
	--vh-color-forest-accent: #244c3b;   /* Pagination-/Accent-Grün (Predigten Overview) */
	--vh-color-forest-hover: #17392f;    /* Menü-Hover (Submenu) */
	--vh-color-menu-text: #f5f3ec;       /* Menü-Submenu-Text */

	--vh-color-gold-light: #d9b98a;      /* helles Gold (Eyebrow, Buttons) */
	--vh-color-gold-soft: #e7bf7b;       /* weiches Gold (Kurve, Player) */
	--vh-color-gold-pale: #c49a55;       /* gedämpftes Gold (Akzent-Schrift) */
	--vh-color-hellgold: #f6ead5;        /* Hellgold/Champagner */
	--vh-color-gold-frame: #ead8b8;      /* goldener Rahmen */

	/* --- Farben: Text & Hintergründe --- */
	--vh-color-text: #141617;          /* dunkler Grundtext (Ist: awb-color8) */
	--vh-color-text-secondary: #68716f;  /* Sekundärtext, auch #68756e */
	--vh-color-text-body-soft: rgba(255, 255, 255, 0.92);
	--vh-color-surface: #fffefa;         /* Karten-/Panel-Hintergrund */
	--vh-color-surface-warm: #fafaf7;    /* heller Section-Hintergrund (Predigten) */
	--vh-color-line: #e5ebe5;            /* helle Linie (Predigten) */
	--vh-color-line-soft: #eff0eb;       /* Kartenrahmen (Predigten) */
	--vh-color-line-tab: #e9ede8;        /* Tab-Leiste */
	--vh-color-line-hover: #b8cabe;      /* Playlist-Hover-Rahmen */
	--vh-color-tab-inactive: #78887f;    /* inaktiver Tab-Text */
	--vh-color-icon: #829187;            /* Tab-Icons */
	--vh-color-muted: #7b8c82;           /* Playlist-Meta */


	/* --- Typografie --- */
	--vh-font-display: "Cormorant Garamond", Georgia, serif;
	--vh-font-body: "IBM Plex Sans", Arial, Helvetica, sans-serif;
	--vh-font-ui: "Montserrat", Arial, sans-serif;
	--vh-font-accent: "Allura", cursive;

	/* Schriftgrößen-Skala (audit-validiert am 2026-10-31 gegen die Startseite)
	   Stufen-Typ: display = Cormorant Garamond (serif), body = IBM Plex Sans,
	   ui = Montserrat, accent = Allura, eyebrow = ui + uppercase */
	--vh-font-size-h1: clamp(2.75rem, 5.5vw, 4.5rem); /* ~72px Sektions-Display (Ist) */
	--vh-font-size-h2: 2.5rem;                        /* 40px Mid-Sektion */
	--vh-font-size-h3: 1.875rem;                      /* 30px Untertitel/Event (Ist) */
	--vh-font-size-h4: 1.25rem;                       /* 20px */
	--vh-font-size-body: 1.125rem;                    /* 18px Fließtext (Ist) */
	--vh-font-size-body-sm: 0.875rem;                 /* 14px Klein/Meta */
	--vh-font-size-eyebrow: 0.8125rem;                /* 13px, uppercase (Ist) */
	--vh-font-size-accent: clamp(3rem, 6vw, 5.625rem);/* ~90px Allura-Akzent (Ist) */
	--vh-font-weight-heading: 500;                    /* Ist: Cormorant 500 */
	--vh-font-weight-body: 500;                       /* Ist: IBM Plex 500 */
	--vh-line-height-heading: 1.3;
	--vh-line-height-body: 1.8;                       /* Ist: 32.4/18 */
	--vh-letter-spacing-eyebrow: 0.08em;

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

	/* --- Radien --- */
	--vh-radius-xs: 9px;
	--vh-radius-sm: 8px;
	--vh-radius-md: 12px;
	--vh-radius-lg: 16px;
	--vh-radius-xl: 18px;
	--vh-radius-pill: 20px;
	--vh-radius-full: 999px;

	/* --- Schatten --- */
	--vh-shadow-card: 0 12px 35px rgba(30, 55, 43, 0.06);
	--vh-shadow-card-hover: 0 18px 40px rgba(30, 55, 43, 0.12);

	/* --- Übergänge --- */
	--vh-transition: 0.25s ease;

	/* --- Layout --- */
	--vh-content-max: 1200px;
	--vh-z-overlay: 1;
}