/* ==========================================================================
   TheDrop – design tokens (designmanual v1.0, side 16)
   Den ENESTE fil med farvekoder. Alt andet bruger variablerne herunder.
   ========================================================================== */

/* --- Fonte (self-hosted, ingen Google Fonts – GDPR) ------------------------- */
@font-face {
	font-family: "Archivo";
	src: url("../fonts/archivo-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Urbanist";
	src: url("../fonts/urbanist-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Farver */
	--td-nat: #16161F;        /* base, ca. 60 % */
	--td-floede: #F3EADB;     /* brand, ca. 30 % */
	--td-rav: #D4893F;        /* eneste accent, maks. 10 % */
	--td-rav-hover: #E39A52;
	--td-kul: #1F1F2B;        /* kort, footer, flader på Nat */
	--td-sand: #CFC6B6;       /* brødtekst og eyebrows på mørk */
	--td-etiket-txt: #4A4A55; /* sekundær tekst på Fløde */
	--td-linje: rgba(243, 234, 219, 0.14);
	--td-hvid: #FFFFFF;       /* kun glimtet i dråben */

	/* Afledte (stadig kun fra paletten ovenfor) */
	--td-linje-staerk: color-mix(in srgb, var(--td-floede) 20%, transparent);
	--td-floede-40: color-mix(in srgb, var(--td-floede) 40%, transparent);
	--td-floede-60: color-mix(in srgb, var(--td-floede) 60%, transparent);
	--td-linje-floede: color-mix(in srgb, var(--td-nat) 14%, var(--td-floede)); /* rækker i etiketkort */
	--td-daempet: color-mix(in srgb, var(--td-sand) 62%, var(--td-nat));         /* "+" og "=" i ritualet */
	--td-nat-88: color-mix(in srgb, var(--td-nat) 88%, transparent);
	--td-nat-15: color-mix(in srgb, var(--td-nat) 15%, transparent);
	--td-rav-glow-1: color-mix(in srgb, var(--td-rav) 17%, transparent);
	--td-rav-glow-2: color-mix(in srgb, var(--td-rav) 6%, transparent);
	--td-rav-glow-0: color-mix(in srgb, var(--td-rav) 0%, transparent);

	/* Drikfarver – kun til produktflader og illustrationer, aldrig UI */
	--td-drik-long-island: #9A4A1E;
	--td-flade-long-island: #3A1A0D;
	--td-drik-play-well: #C27A6E;
	--td-flade-play-well: #43221F;
	--td-drik-honey: #D2A23A;
	--td-flade-honey: #3B2F10;
	--td-flaskehals: #2A2A33;

	/* Typografi */
	--td-font-display: "Archivo", "Arial Black", sans-serif; /* altid font-stretch 125 % + versaler */
	--td-font-body: "Urbanist", system-ui, sans-serif;
	--td-stretch: 125%;
	--td-fs-display: 84px;
	--td-fs-h2: 48px;
	--td-fs-h3: 24px;
	--td-fs-lead: 20px;
	--td-fs-body: 17px;
	--td-fs-eyebrow: 13px;
	--td-fs-btn: 15px;
	--td-fs-small: 13px;

	/* Spacing og layout */
	--td-space-1: 4px;
	--td-space-2: 8px;
	--td-space-3: 12px;
	--td-space-4: 16px;
	--td-space-5: 24px;
	--td-space-6: 32px;
	--td-space-7: 48px;
	--td-space-8: 64px;
	--td-space-9: 96px;
	--td-container: 1280px;
	--td-gutter: 32px;
	--td-section: 96px;
	--td-radius: 0;
	--td-tap: 44px;

	/* Linjer */
	--td-line-1: 1px;
	--td-line-2: 1.5px;
	--td-line-active: 2px;

	/* Signaturer */
	--td-drip-1: 0.05em;
	--td-drip-2: 0.13em;
	--td-drip-dot: 0.34em;
	--td-logo-drip: 0.24em;

	--td-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Mobil: Display ca. 44 px, H2 ca. 32 px, sektioner 56 px, margin 16 px */
@media (max-width: 760px) {
	:root {
		--td-fs-display: 44px;
		--td-fs-h2: 32px;
		--td-fs-h3: 22px;
		--td-fs-lead: 18px;
		--td-fs-body: 16px;
		--td-gutter: 16px;
		--td-section: 56px;
	}
}
@media (min-width: 761px) and (max-width: 1100px) {
	:root {
		--td-fs-display: 64px;
		--td-fs-h2: 40px;
		--td-gutter: 24px;
		--td-section: 80px;
	}
}