/* Tokens från Figma (get_variable_defs på 1:2). Ändra inte värden utan Figma-källa. */

:root {
	/* Brand */
	--color-brand-1000: #1b2e4f;
	--color-brand-900: #455570;
	--color-brand-800: #637797;
	--color-brand-700: #7b91b7;
	--color-brand-500: #bfcce4;
	--color-brand-400: #d1dff7;
	--color-brand-200: #f2f7ff;

	/* Neutral */
	--color-neutral-900: #232328;
	--color-neutral-800: #37373d;
	--color-neutral-200: #d9d9d9;
	--color-neutral-100: #f1f1f1;

	/* Accent */
	--color-accent-1000: #4f3c1b;
	--color-accent-900: #61523a;
	--color-accent-800: #857357;
	--color-accent-600: #c2b094;
	--color-accent-500: #d6cab6;
	--color-accent-400: #e9dcc8;
	--color-accent-100: #fffcf5;

	/* BG */
	--color-bg-white: #fcfcfc;

	/* Font families */
	--font-family-heading: "Gloock", Georgia, serif;
	--font-family-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Font sizes — desktop */
	--font-size-h1: 4.3125rem;   /* 69px */
	--font-size-h2: 3.4375rem;   /* 55px */
	--font-size-h3: 2.75rem;     /* 44px */
	--font-size-h4: 2.1875rem;   /* 35px */
	--font-size-h5: 1.75rem;     /* 28px */
	--font-size-h6: 1.4375rem;   /* 23px */
	--font-size-body-l: 1.125rem; /* 18px */
	--font-size-body-m: 0.875rem; /* 14px */
	--font-size-body-s: 0.75rem;  /* 12px */

	/* Line heights */
	--line-height-h1: 1.25;
	--line-height-h2: 1.2;
	--line-height-heading: 1.2;
	--line-height-body: 1.5;

	/* Layout — innehåll max 1760 (beslut). Marginal 20 @390 (Figma mobil) → 80 @≥1440 (Figma x=80), linjärt däremellan.
	   Ger 1280 innehåll vid 1440 och 1760 vid 1920. */
	--container-max-width: 110rem; /* 1760px */
	--container-padding-x: clamp(1.25rem, 5.7143vw - 0.1429rem, 5rem);

	/* Sektions-padding (Padding-klonen). Två grannsektioner med medium = 144px (Figma). */
	--space-section-none: 0;
	--space-section-small: 2.25rem; /* 36px */
	--space-section-medium: 4.5rem; /* 72px */
	--space-section-medium-large: 5rem; /* 80px — Figma 102:8140 (FAQ-sektioner, Vanliga frågor) */
	--space-section-large: 9rem;    /* 144px */
}

/* Mobil (<768). Rubrikskala från Figma "H* - mobile"; H3/H4 saknas i Figma → 28/25 (beslut, interpolerat). */
@media (max-width: 767px) {
	:root {
		--font-size-h1: 2.25rem;     /* 36px */
		--font-size-h2: 2rem;        /* 32px */
		--font-size-h3: 1.75rem;     /* 28px */
		--font-size-h4: 1.5625rem;   /* 25px */
		--font-size-h5: 1.4375rem;   /* 23px */
		--font-size-h6: 1.25rem;     /* 20px */
		--line-height-h2: 1.25;

		/* Sektions-padding medium = 48px (Figma 184:829 WhyUs py-48). */
		--space-section-medium: 3rem;
		--space-section-medium-large: 3rem; /* 48px (härledd, som medium) */
	}
}