:root {
	/* Palett – justeras efter Ulrikas riktiga bilder och logotyp */
	--cream: #F6F1EA;
	--sand: #E8DCCB;
	--clay: #B5653F;
	--clay-dark: #94502F;
	--olive: #6F7A5A;
	--ink: #2B2622;
	--ink-soft: #5E5651; /* mörkare än spec (#6E6560) för AA-kontrast även mot sand */
	--white: #FFFFFF;

	/* Typografi */
	--font-heading: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

	--text-xs: 0.8125rem;   /* 13px – etiketter, topprad */
	--text-sm: 0.9375rem;   /* 15px – meta, priser i listning */
	--text-base: 1.0625rem; /* 17px – brödtext */
	--text-lg: 1.25rem;     /* 20px – ingress */
	--text-h3: clamp(1.35rem, 2vw, 1.75rem);
	--text-h2: clamp(1.8rem, 3vw, 2.8rem);
	--text-h1: clamp(2.4rem, 5vw, 4.5rem);
	--text-tagline: clamp(1.6rem, 3.2vw, 2.6rem);

	--leading-body: 1.6;
	--leading-heading: 1.12;
	--leading-tight: 1.05;

	--weight-body: 400;
	--weight-ui: 500;
	--weight-heading: 400;
	--weight-heading-strong: 500;

	--tracking-heading: -0.01em;
	--tracking-caps: 0.08em;

	/* Form */
	--radius: 24px;
	--radius-sm: 16px;
	--radius-pill: 999px;

	/* Avstånd */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;
	--space-7: 6rem;

	--gutter: 24px;
	--section-gap: 96px;
	--content-max: 1280px;
	--prose-max: 42rem;

	/* Header – mått från referensen (mobil 40/56/10, desktop 32/44/20) */
	--topbar-h: 40px;
	--header-h: 56px;
	--header-inset: 10px;

	/* Rörelse och djup */
	--ease: 250ms ease;
	--lift: translateY(-2px);
	--shadow-soft: 0 12px 32px rgba(43, 38, 34, 0.08);
	--shadow-lift: 0 18px 40px rgba(43, 38, 34, 0.12);

	/* Fokus */
	--focus-ring: 0 0 0 3px var(--cream), 0 0 0 5px var(--clay);
}
@media (min-width: 768px)  { :root { --gutter: 48px; } }
@media (min-width: 1100px) { :root { --gutter: 80px; --section-gap: 160px; --topbar-h: 32px; --header-h: 44px; --header-inset: 20px; } }