/*
 * Creative Cockpit design tokens.
 * Kilde: Figma "CC hjemmeside" → Design system → Foundations.
 * Ret farver HER (og kun her). Komponenterne læser alle værdier via variabler.
 */

@font-face {
	font-family: "Archivo Black";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/archivo-black-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Archivo Black";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/archivo-black-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Base */
	--cc-bg-base: #b5d6db;
	--cc-bg-section: #dceff2;
	--cc-bg-deep: #9dc4cb;
	--cc-ink: #0d2a33;
	--cc-ink-soft: rgba(13, 42, 51, 0.62);
	--cc-line: rgba(13, 42, 51, 0.16);
	--cc-on-color: #ffffff;
	--cc-accent-pop: #5ff986;

	/* Roller (role/primary, role/secondary, role/deep) */
	--cc-creator-primary: #ff4d8f;
	--cc-creator-secondary: #ff8a3d;
	--cc-creator-deep: #5a1a3a;
	--cc-brand-primary: #0a7a90;
	--cc-brand-secondary: #5ff986;
	--cc-brand-deep: #042508;
	--cc-internal-primary: #22d3ee;
	--cc-internal-secondary: #fca2e5;
	--cc-internal-deep: #242531;

	/* System (reserveret, aldrig til roller) */
	--cc-error: #ef4444;
	--cc-success: #22c55e;
	--cc-warning: #f59e0b;
	--cc-info: #3b82f6;

	/* Typografi */
	--cc-font-display: "Archivo Black", "Arial Black", sans-serif;
	--cc-font-sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	--cc-fs-hero: 42px;
	--cc-fs-band: 28px;
	--cc-fs-section: 26px;
	--cc-fs-card: 20px;
	--cc-fs-body: 15px;
	--cc-fs-small: 14px;
	--cc-fs-button: 14px;
	--cc-fs-meta: 13px;
	--cc-fs-caption: 12px;

	/* Spacing (mobil) */
	--cc-gutter: 22px;
	--cc-section: 56px;
	--cc-section-tone: 48px;
	--cc-block: 24px;
	--cc-stack: 14px;
	--cc-gap: 14px;
	--cc-grid-gap: 10px;
	--cc-nav: 22px;
	--cc-max: 1440px;

	/* Form */
	--cc-radius-band: 28px;
	--cc-radius-card: 18px;
	--cc-card-w: 176px;

	/* Bevægelse */
	--cc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 768px) {
	:root {
		--cc-gutter: 40px;
		--cc-section: 88px;
		--cc-section-tone: 80px;
		--cc-block: 36px;
		--cc-stack: 20px;
		--cc-gap: 18px;
		--cc-grid-gap: 14px;
		--cc-nav: 26px;
		--cc-card-w: 200px;
	}
}

@media (min-width: 1024px) {
	:root {
		--cc-fs-hero: 52px;
		--cc-fs-band: 32px;
		--cc-fs-section: 30px;
		--cc-fs-card: 20px;
		--cc-fs-body: 16px;
		--cc-fs-small: 15px;

		--cc-gutter: 80px;
		--cc-section: 120px;
		--cc-section-tone: 120px;
		--cc-block: 48px;
		--cc-stack: 24px;
		--cc-gap: 24px;
		--cc-grid-gap: 16px;
		--cc-nav: 28px;
		--cc-card-w: 220px;
	}
}

/* Rolle-modes: sæt klassen på en komponent, så følger alle farver med. */
.cc-role--creator {
	--r-primary: var(--cc-creator-primary);
	--r-secondary: var(--cc-creator-secondary);
	--r-deep: var(--cc-creator-deep);
}
.cc-role--brand,
.cc-role--brand-self {
	--r-primary: var(--cc-brand-primary);
	--r-secondary: var(--cc-brand-secondary);
	--r-deep: var(--cc-brand-deep);
}
.cc-role--internal {
	--r-primary: var(--cc-internal-primary);
	--r-secondary: var(--cc-internal-secondary);
	--r-deep: var(--cc-internal-deep);
}