/**
 * VTS design tokens
 *
 * Eneste kilde til farver, typografi, spacing m.m.
 * GeneratePress' globale farver og GenerateBlocks' Global Styles
 * skal pege på disse variabler – ikke på hex-værdier.
 *
 * Kontrastkrav (WCAG 2.2 AA) er noteret ved de farver, der bruges til tekst.
 */

:root {
	/* ---------------------------------------------------------------
	 * Farver – rå palette
	 * ------------------------------------------------------------- */

	/* Brand-rød fra logoet. #E31E25 = 4.69:1 mod hvid (kun lige AA),
	   fejler på grå baggrunde – brug --vts-red-700 til tekst og knapper. */
	--vts-red-500: #e31e25;
	--vts-red-700: #c8161d; /* 5.85:1 mod hvid */
	--vts-red-800: #b5121a; /* 6.85:1 mod hvid – hover */
	--vts-red-300: #ff5a5f; /* 5.91:1 mod ink – rød på mørk baggrund */
	--vts-red-50: #fdeced;

	/* Ink/neutral – kølig grå med et strejf af blå for et professionelt udtryk */
	--vts-ink-950: #0f1720; /* 18:1 mod hvid */
	--vts-ink-800: #1f2a36;
	--vts-ink-600: #4a5563; /* 7.58:1 mod hvid – sekundær tekst */
	--vts-ink-400: #aeb6c1; /* 8.82:1 mod ink-950 – sekundær tekst på mørk */
	--vts-ink-200: #dde1e6;
	--vts-ink-100: #eceef1;
	--vts-ink-50: #f5f6f7;
	--vts-white: #ffffff;

	/* Grøn – forbeholdt el/grøn profil. Bruges sparsomt. */
	--vts-green-700: #0b7a4b; /* 5.39:1 mod hvid */
	--vts-green-800: #086b41;
	--vts-green-300: #3fd08a; /* 9.11:1 mod ink-950 */
	--vts-green-50: #e8f5ee;

	/* ---------------------------------------------------------------
	 * Farver – semantiske roller (brug disse i komponenter)
	 * ------------------------------------------------------------- */
	--vts-color-bg: var(--vts-white);
	--vts-color-bg-subtle: var(--vts-ink-50);
	--vts-color-bg-inverse: var(--vts-ink-950);
	--vts-color-text: var(--vts-ink-950);
	--vts-color-text-muted: var(--vts-ink-600);
	--vts-color-text-inverse: var(--vts-white);
	--vts-color-text-inverse-muted: var(--vts-ink-400);
	--vts-color-border: var(--vts-ink-200);
	--vts-color-link: var(--vts-red-700);
	--vts-color-link-hover: var(--vts-red-800);
	--vts-color-primary: var(--vts-red-700);
	--vts-color-primary-hover: var(--vts-red-800);
	--vts-color-brand: var(--vts-red-500); /* kun dekorativt/stor grafik */
	--vts-color-el: var(--vts-green-700);
	--vts-color-el-bg: var(--vts-green-50);
	--vts-color-focus: var(--vts-red-700);

	/* ---------------------------------------------------------------
	 * Typografi
	 * Én variabel font (selvhostet woff2, latin-subset inkl. æøå).
	 * Vægte i brug: 400, 600, 800. Ingen kursiv-fil.
	 * ------------------------------------------------------------- */
	--vts-font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--vts-weight-regular: 400;
	--vts-weight-semibold: 600;
	--vts-weight-bold: 800;

	/* Flydende typeskala (360px → 1280px viewport) */
	--vts-text-sm: 0.875rem;                                    /* 14 */
	--vts-text-base: 1.0625rem;                                 /* 17 */
	--vts-text-lg: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);  /* 18–20 */
	--vts-text-xl: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);    /* 20–24 */
	--vts-text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);        /* 24–32 */
	--vts-text-3xl: clamp(1.875rem, 1.55rem + 1.45vw, 2.75rem); /* 30–44 */
	--vts-text-4xl: clamp(2rem, 1.55rem + 2.4vw, 3.5rem);       /* 32–56 – 32 så lange danske ord kan stå på én linje ved 360px */

	--vts-leading-tight: 1.15;
	--vts-leading-snug: 1.3;
	--vts-leading-normal: 1.6;
	--vts-tracking-tight: -0.02em;
	--vts-tracking-caps: 0.08em;

	--vts-measure: 68ch; /* maks. linjelængde for brødtekst */

	/* ---------------------------------------------------------------
	 * Spacing – 4px-base. Kun disse trin bruges.
	 * ------------------------------------------------------------- */
	--vts-space-1: 0.25rem;  /*  4 */
	--vts-space-2: 0.5rem;   /*  8 */
	--vts-space-3: 0.75rem;  /* 12 */
	--vts-space-4: 1rem;     /* 16 */
	--vts-space-5: 1.5rem;   /* 24 */
	--vts-space-6: 2rem;     /* 32 */
	--vts-space-7: 3rem;     /* 48 */
	--vts-space-8: 4rem;     /* 64 */
	--vts-space-9: 6rem;     /* 96 */

	/* Sektionsafstand – vokser med viewport */
	--vts-section-y: clamp(var(--vts-space-7), 6vw, var(--vts-space-9));
	--vts-gutter: var(--vts-space-4); /* mobil sidemargin 16px */

	/* ---------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------- */
	--vts-container: 1200px;
	--vts-container-wide: 1440px;
	--vts-container-narrow: 760px;

	/* Breakpoints – kun til reference; CSS custom properties kan ikke bruges
	   i @media. Matcher GeneratePress (mobil ≤768, tablet ≤1024).
	   sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */

	/* ---------------------------------------------------------------
	 * Form
	 * ------------------------------------------------------------- */
	/* Skarpe hjørner: transport/skilte frem for bløde app-kort. */
	--vts-radius-sm: 0;
	--vts-radius-md: 0;
	--vts-radius-lg: 0;
	--vts-radius-pill: 0;

	/* Skråt snit – brand-motiv fra logoets kursiv */
	--vts-slant: 0.75rem;
	--vts-skew: -20deg;

	--vts-shadow-sm: 0 1px 2px rgb(15 23 32 / 0.06), 0 1px 3px rgb(15 23 32 / 0.08);
	--vts-shadow-md: 0 4px 12px rgb(15 23 32 / 0.08), 0 12px 32px rgb(15 23 32 / 0.08);

	--vts-border-width: 1px;
	--vts-focus-ring: 0 0 0 3px var(--vts-white), 0 0 0 5px var(--vts-color-focus);

	/* Touch targets – WCAG 2.2 (2.5.8) kræver 24px; vi bruger 44px */
	--vts-target-min: 44px;

	/* ---------------------------------------------------------------
	 * Bevægelse – minimal
	 * ------------------------------------------------------------- */
	--vts-duration: 150ms;
	--vts-ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--vts-duration: 0ms;
	}
}