@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url(../fonts/inter-latin-variable.woff2) format("woff2");
}

@font-face {
	font-family: Orbitron;
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url(../fonts/orbitron-latin-variable.woff2) format("woff2");
}

.cs-site {
	--cs-brand-tactical-roof: #edf2f4;
	--cs-brand-tactical-dot: #ed7a2b;
	--cs-brand-tactical-area: color-mix(in srgb, #edf2f4 62%, #9ba7ae);
	--cs-brand-competition-roof: #f4f7fa;
	--cs-brand-competition-dot: #56b5ff;
	--cs-brand-competition-area: #aab3b8;
	--cs-brand-resilience-roof: #e3e5e3;
	--cs-brand-resilience-dot: #b4c0b5;
	--cs-brand-resilience-area: color-mix(in srgb, #e3e5e3 62%, #b4bbb7);
	--cs-brand-area: var(--cs-brand-tactical-area);
	--cs-color-canvas: #080b0e;
	--cs-color-surface: #0e1419;
	--cs-color-surface-raised: #121a20;
	--cs-color-text: #edf2f4;
	--cs-color-muted: #9ba7ae;
	--cs-color-line: rgb(231 238 242 / 14%);
	--cs-color-accent: #ed7a2b;
	--cs-color-focus: var(--cs-area-accent);
	--cs-color-success: #72c49a;
	--cs-color-warning: #f2b84b;
	--cs-color-danger: #ef6a6a;
	--cs-font-body: inter, system-ui, sans-serif;
	--cs-font-display: orbitron, inter, system-ui, sans-serif;
	--cs-reading-width: 46rem;
	--cs-content-width: 64rem;
	--cs-layout-width: 60rem;
	--cs-space-2xs: 0.25rem;
	--cs-space-xs: 0.5rem;
	--cs-space-s: 0.75rem;
	--cs-space-m: 1rem;
	--cs-space-l: 1.5rem;
	--cs-space-xl: 2.25rem;
	--cs-space-2xl: 3.5rem;
	--cs-space-3xl: 5rem;
	--cs-object-text-gap: 25px;
	--cs-heading-section-gap: clamp(2.5rem, 4vw, 4rem);
	--cs-radius-s: 0.125rem;
	--cs-radius-m: 0.25rem;
	--cs-shadow-raised: 0 1rem 3rem rgb(0 0 0 / 30%);
	--cs-focus-ring: 0 0 0 0.125rem var(--cs-color-focus);
	--cs-duration-fast: 120ms;
	--cs-duration-medium: 240ms;
	--cs-easing-standard: cubic-bezier(0.2, 0, 0, 1);
	--cs-z-base: 0;
	--cs-z-header: 20;
	--cs-z-overlay: 40;
	--cs-area-accent: var(--cs-color-accent);
	--cs-area-motif: none;
}

/* stylelint-disable selector-class-pattern -- BEM-like area scopes are a public theme contract. */
.cs-area--tactical {
	--cs-area-accent: var(--cs-color-accent);
	--cs-area-motif: none;
}

.cs-area--competition {
	--cs-brand-area: var(--cs-brand-competition-area);
	--cs-color-canvas: #101922;
	--cs-color-surface: #1b2937;
	--cs-color-surface-raised: #243544;
	--cs-color-text: #f4f7fa;
	--cs-color-muted: #adb3b5;
	--cs-color-line: rgb(86 181 255 / 38%);
	--cs-area-accent: #56b5ff;
	--cs-area-motif:
		linear-gradient(
			118deg,
			transparent 0 31%,
			rgb(86 181 255 / 7%) 31.2% 49%,
			transparent 49.2%
		),
		repeating-linear-gradient(
			105deg,
			transparent 0 5.9rem,
			rgb(86 181 255 / 5%) 6rem 6.05rem
		);
}

.cs-area--competition .cs-brand-title__area {
	color: var(--cs-brand-area);
	font-weight: 500;
}

.cs-area--resilience {
	--cs-brand-area: var(--cs-brand-resilience-area);
	--cs-color-canvas: #242729;
	--cs-color-surface: #303538;
	--cs-color-surface-raised: #3a4143;
	--cs-color-text: #e3e5e3;
	--cs-color-muted: #b4bbb7;
	--cs-color-line: rgb(180 192 181 / 22%);
	--cs-area-accent: #b4c0b5;
	--cs-area-motif:
		linear-gradient(
			118deg,
			transparent 0 31%,
			rgb(180 192 181 / 7%) 31.2% 49%,
			transparent 49.2%
		),
		repeating-linear-gradient(
			105deg,
			transparent 0 5.9rem,
			rgb(180 192 181 / 5%) 6rem 6.05rem
		);
}

/* stylelint-enable selector-class-pattern */

/* Desktop reading scale; compact navigation and mobile/tablet remain unchanged. */
@media (min-width: 75rem) {

	.cs-site {
		--cs-desktop-body-size: 0.9375rem;
		--cs-desktop-title-size: clamp(2rem, 4vw, 3.5rem);
		--cs-desktop-page-title-size: clamp(1.75rem, 3.5vw, 2.5rem);
		--cs-desktop-h2-size: clamp(1.5rem, 2.3vw, 1.75rem);
		--cs-desktop-h3-size: 1.25rem;
		--wp--preset--font-size--m: 0.9375rem;
		--wp--preset--font-size--l: 1.125rem;
		--wp--preset--font-size--xl: clamp(1.5rem, 2.3vw, 2rem);
		--wp--preset--font-size--hero: clamp(2rem, 4vw, 3.5rem);
	}
}