/**
 * Design-tokens — "designsystemet bygget ind i siden".
 * Kilde: MS Designguide 2025 (rød #a60d1f, Roboto Slab + Lato).
 * TODO: verificér sekundære gråtoner mod Designguiden ved finpudsning.
 */

:root {
	/* Brand */
	--tc-red: #a60d1f;
	--tc-red-dark: #7d0a17;
	--tc-ink: #1a1b1f;
	--tc-white: #ffffff;

	/* Neutraler */
	--tc-gray-900: #1a1b1f;
	--tc-gray-700: #43464d;
	--tc-gray-500: #6b7280;
	--tc-gray-300: #c7ccd6;
	--tc-gray-200: #e4ebf3;
	--tc-gray-100: #f5f7fa;

	/* Funktionelle */
	--tc-text: var(--tc-ink);
	--tc-text-muted: var(--tc-gray-500);
	--tc-bg: var(--tc-white);
	--tc-border: var(--tc-gray-200);

	/* Overlay til billedkort (mørkner bunden, så hvid tekst kan læses) */
	--tc-card-overlay: linear-gradient(
		to top,
		rgba(26, 27, 31, 0.88) 0%,
		rgba(26, 27, 31, 0.55) 35%,
		rgba(26, 27, 31, 0) 70%
	);

	/* Typografi */
	--tc-font-heading: "Roboto Slab", Georgia, serif;
	--tc-font-body: "Lato", Arial, sans-serif;

	--tc-fs-xs: 0.75rem;    /* 12 */
	--tc-fs-sm: 0.875rem;   /* 14 */
	--tc-fs-base: 1rem;     /* 16 */
	--tc-fs-lg: 1.25rem;    /* 20 */
	--tc-fs-xl: 1.5rem;     /* 24 */
	--tc-fs-2xl: 2rem;      /* 32 */
	--tc-fs-3xl: 2.75rem;   /* 44 */

	--tc-lh-tight: 1.15;
	--tc-lh-base: 1.6;

	/* Spacing-skala (4 px-basis) */
	--tc-space-1: 0.25rem;
	--tc-space-2: 0.5rem;
	--tc-space-3: 0.75rem;
	--tc-space-4: 1rem;
	--tc-space-6: 1.5rem;
	--tc-space-8: 2rem;
	--tc-space-12: 3rem;
	--tc-space-16: 4rem;

	/* Radier — følger MidSpars eget formsprog. midspar.dk kører
	   `#image-with-text img { border-radius: 0 100px }`, altså samme
	   2-hjørne-form som os, men den store radius er en FOTO-behandling:
	   deres egne bokse ligger på 8px og deres video på 50px.
	   Derfor skelner skalaen på indholdstype, ikke på fladestørrelse —
	   billeder får det markante hjørne, bokse og kontroller det rolige. */
	--tc-radius-sm: 5px;      /* bittesmå flader + polaroid-kortene */
	--tc-radius-photo: 0;     /* indholds-billeder i tekst (blog + sider): firkantede, ingen afrunding */
	--tc-radius-ui: 20px;     /* knapper, chips, badges, søgefelt — små kontroller */
	--tc-radius-card: 20px;   /* bokse, paneler, kort — containere */
	--tc-radius-video: 50px;  /* video/embeds — MidSpars egen værdi */
	--tc-radius-media: 100px; /* store hero-fotos (artikel-top + profil-header), MidSpars egen værdi */
	--tc-radius-pill: 999px;

	/* Ingen skygger i dette design (bevidst valg). */

	/* Layout */
	--tc-container: 1200px;
	--tc-gap: 1.5rem;
}

/* Hero-foto-radius skaleres ned på mobil, så den store 2-hjørne-form ikke skærer
   ind i indhold på smalle skærme (profil-header + artikel-hero). Rammer kun de to
   heroes; indholds-billeder bruger --tc-radius-photo og er upåvirket. */
@media (max-width: 767px) {
	:root {
		--tc-radius-media: 40px;
	}
}