/* =========================================================================
   Tirana Catering V3 — Design Tokens
   1:1-Port des statischen Startseiten-Designs (Navy #1f2079 + Gold #c9a55a,
   Cormorant Garamond + Great Vibes + Inter). Spiegelt theme.json wider und
   stellt die Tokens als CSS Custom Properties für Frontend + Blöcke bereit.
   Self-hosted Fonts (kein Google-Fonts-CDN → DSGVO + Performance).
   ========================================================================= */

/* ---- Self-hosted Fonts ------------------------------------------------ */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-400.woff2") format("woff2");
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/cormorant-600.woff2") format("woff2");
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/cormorant-700.woff2") format("woff2");
}
@font-face {
	font-family: "Great Vibes";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/greatvibes-400.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-700.woff2") format("woff2");
}

/* ---- Tokens ----------------------------------------------------------- */
:root {
	/* V3-Originalpalette (Namen wie im statischen Entwurf) */
	--primary: #1f2079;
	--primary-dark: #15155a;
	--primary-light: #3536a0;
	--accent: #c9a55a;
	--accent-dark: #a9883f;
	--bg: #fbfaf7;
	--surface: #ffffff;
	--surface-2: #f3f1ec;
	--text: #1a1a1a;
	--text-muted: #5e5e63;
	--border: #e6e3dc;
	--shadow-v3-sm: 0 2px 8px rgba(31, 32, 121, 0.06);
	--shadow-v3-md: 0 8px 24px rgba(31, 32, 121, 0.10);
	--shadow-v3-lg: 0 20px 50px rgba(31, 32, 121, 0.16);
	--radius-v3: 14px;
	--radius-v3-lg: 22px;
	--transition: cubic-bezier(0.4, 0, 0.2, 1);
	--font-script: "Great Vibes", cursive;

	/* Bestehende Theme-Variablen → auf die V3-Palette gemappt,
	   damit alle Blöcke (Konfigurator, Service-Seiten …) das Design erben. */
	--color-base: var(--primary);
	--color-accent: var(--accent);
	--color-accent-strong: var(--accent-dark);
	--color-surface: var(--bg);
	--color-surface-2: var(--surface-2);
	--color-ink: var(--text);
	--color-muted: var(--text-muted);
	--color-hairline: var(--border);
	--color-white: #ffffff;
	--color-on-base: #ffffff;       /* Text auf Navy */
	--color-on-accent: #ffffff;     /* Text auf Gold */

	/* Schriften */
	--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Fluide Typo-Skala (an den V3-Entwurf angelehnt) */
	--fs-small: clamp(0.83rem, 0.79rem + 0.2vw, 0.94rem);
	--fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.06rem);
	--fs-lead: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
	--fs-h3: clamp(1.4rem, 1.3rem + 0.6vw, 2rem);
	--fs-h2: clamp(2rem, 1.7rem + 1.4vw, 3.2rem);
	--fs-h1: clamp(2.5rem, 2rem + 2.5vw, 5rem);
	--fs-display: clamp(2.99rem, 2.4rem + 2.95vw, 4.27rem);

	/* Zeilenhöhen */
	--lh-tight: 1.2;
	--lh-snug: 1.25;
	--lh-body: 1.65;

	/* Spacing — 4px Basis */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: clamp(0.75rem, 0.7rem + 0.3vw, 1rem);
	--space-s: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
	--space-m: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
	--space-l: clamp(2.5rem, 2rem + 2.5vw, 4rem);
	--space-xl: clamp(4rem, 3rem + 4vw, 6rem);
	--section-pad: 6rem;

	/* Layout */
	--container-max: 75rem;      /* 1200px wie im Entwurf */
	--container-pad: 4%;         /* .container = min(1200px, 92%) */
	--measure: 68ch;             /* Optimale Textlänge */

	/* Form / Buttons */
	--radius: var(--radius-v3);
	--radius-lg: var(--radius-v3-lg);
	--radius-sm: 8px;
	--radius-pill: 999px;

	/* Elevation */
	--shadow-sm: var(--shadow-v3-sm);
	--shadow-md: var(--shadow-v3-md);
	--shadow-lg: var(--shadow-v3-lg);

	/* Motion */
	--ease: var(--transition);
	--dur: 0.5s;
	--dur-fast: 0.2s;

	/* UI */
	--header-h: 78px;
	--focus-ring: 0 0 0 3px rgba(31, 32, 121, 0.35);
}