/**
 * Musterlaune Design-System: CSS Custom Properties.
 *
 * Einzige Quelle der Wahrheit fuer Farben, Typografie, Spacing, Radius und
 * Schatten. Kein anderes Stylesheet im Theme darf rohe Hex-Werte verwenden -
 * immer diese Variablen referenzieren. Das haelt das Theme konsistent und
 * macht spaetere Rebranding-Aenderungen an einer einzigen Stelle moeglich.
 */

:root {
	/* ---------------------------------------------------------------
	 * Farben
	 * Bewusst reduzierte Palette: eine Primaerfarbe (Himbeer) fuer alle
	 * Calls-to-Action, zwei Sekundaerfarben fuer thematische Abschnitte
	 * (Tanne fuer Weihnachten/Natur, Senf fuer Highlights), ein Akzent
	 * (Lavendel) fuer "Neu"-Kennzeichnungen. Keine grellen Bootstrap-Farben,
	 * keine klassischen Rot/Gruen-Weihnachtskombination.
	 * ------------------------------------------------------------- */
	--color-primary: #E1487B;
	--color-primary-dark: #B8355F;
	--color-secondary: #1F6F5C;
	--color-secondary-dark: #154F41;
	--color-accent: #E3A335;
	--color-accent-dark: #8A5E10;
	--color-highlight: #7B6EF6;
	--color-highlight-dark: #4A3ED1;

	--color-background: #FBF6EF;
	--color-background-alt-warm: #FCEEF1;
	--color-background-alt-cool: #EEF6F0;
	--color-surface: #FFFFFF;

	--color-text: #2B2420;
	--color-text-muted: #6E655C;
	--color-text-faint: #A79E93;
	--color-text-on-dark: #FFFFFF;

	--color-border: #EAE0D4;
	--color-border-strong: #D8C9B4;

	--color-error: #C24B3F;
	--color-success: #1F6F5C;

	/* ---------------------------------------------------------------
	 * Typografie
	 * ------------------------------------------------------------- */
	--font-heading: 'Fraunces', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-accent: 'Caveat', cursive;

	--font-size-xs: 0.8125rem;   /* 13px - Meta, Badges */
	--font-size-sm: 0.875rem;    /* 14px */
	--font-size-base: 1rem;      /* 16px - Fliesstext, nie kleiner */
	--font-size-md: 1.125rem;    /* 18px */
	--font-size-lg: 1.375rem;    /* 22px - H3 */
	--font-size-xl: 1.75rem;     /* 28px - H2 mobil */
	--font-size-2xl: 2.25rem;    /* 36px - H2 desktop */
	--font-size-3xl: 3rem;       /* 48px - H1 mobil-desktop-uebergang */
	--font-size-4xl: 3.5rem;     /* 56px - H1 desktop */

	--line-height-tight: 1.15;
	--line-height-heading: 1.25;
	--line-height-body: 1.6;

	/* ---------------------------------------------------------------
	 * Spacing (4px-Basis)
	 * ------------------------------------------------------------- */
	--space-xs: 0.25rem;   /* 4px */
	--space-sm: 0.5rem;    /* 8px */
	--space-md: 1rem;      /* 16px */
	--space-lg: 1.5rem;    /* 24px */
	--space-xl: 2rem;      /* 32px */
	--space-2xl: 3rem;     /* 48px */
	--space-3xl: 4rem;     /* 64px */
	--space-4xl: 6rem;     /* 96px */
	--space-5xl: 8rem;     /* 128px */

	/* ---------------------------------------------------------------
	 * Radius
	 * ------------------------------------------------------------- */
	--radius-small: 12px;   /* Formularfelder, kleine Elemente */
	--radius-medium: 20px;  /* Karten */
	--radius-large: 32px;   /* Editorial-/Hero-Flaechen */
	--radius-pill: 999px;   /* Buttons, Badges, Chips */

	/* ---------------------------------------------------------------
	 * Schatten - bewusst sehr zurueckhaltend, kein "Bootstrap-Schattenwurf"
	 * ------------------------------------------------------------- */
	--shadow-soft: 0 8px 24px rgba(43, 36, 32, 0.08);
	--shadow-focus: 0 0 0 3px rgba(225, 72, 123, 0.35);

	/* ---------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------- */
	--container-width: 1280px;
	--container-padding: var(--space-lg);

	/* ---------------------------------------------------------------
	 * Breakpoints als Custom Properties zur Dokumentation.
	 * Hinweis: CSS Custom Properties funktionieren NICHT in @media-Queries,
	 * daher dienen diese Werte nur als Referenz fuer die Media-Query-Werte,
	 * die in den einzelnen Stylesheets manuell als Zahl eingetragen werden
	 * muessen (z.B. @media (max-width: 782px)).
	 * mobile:  bis 599px
	 * tablet:  600px - 899px
	 * desktop: ab 900px
	 * wide:    ab 1280px
	 * ------------------------------------------------------------- */
	--breakpoint-mobile: 599px;
	--breakpoint-tablet: 899px;
	--breakpoint-desktop: 1280px;

	/* ---------------------------------------------------------------
	 * Motion
	 * ------------------------------------------------------------- */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;
}