/*
 * Design tokens.
 *
 * Light values live on :root. The dark strips of the site, header, hero,
 * figures band, NATO block, call to action and footer, redeclare the same
 * tokens on .band-dark, so every component keeps one set of rules and
 * simply resolves different values inside a dark strip.
 */

:root {
	/* Ground and ink */
	--color-bg: #ffffff;
	--color-surface: #f4f6f4;
	--color-ink: #000000;
	--color-mist: #d0d8d3;
	--color-panel: #f4f6f4;
	--color-text: #071b38;
	--color-muted: #47556a;
	--color-muted-strong: #2b3a4f;
	--color-subtle: #6b7683;

	/* Accents */
	--color-accent: #071b38;
	--color-lime: #e4fe66;
	--color-lime-hover: #d6f23f;

	/* Lines */
	--color-divider: rgba(7, 27, 56, .14);
	--color-control-border: rgba(7, 27, 56, .14);
	--color-outline: #071b38;
	--color-hairline: rgba(7, 27, 56, .08);
	--color-icon-border: rgba(7, 27, 56, .35);

	/* Type */
	--font-heading: "Montserrat", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;
	--weight-heading: 500;

	/* Measure. The layout is drawn on 1440 with 80 side margins, which
	   leaves 1280 of content. The page itself stretches edge to edge. */
	--content-width: 1280px;
	--gutter: 80px;
	/* Height of the header bar at rest. The bar itself is taken out of the
	   flow, so this is what holds its place. */
	--header-height: 75px;

	/* Shape and depth */
	--radius-sm: 0;
	--radius-md: 2px;
	--shadow-sm: 0 0 0 1px rgba(7, 27, 56, .10);
	--shadow-md: 0 1px 3px rgba(7, 27, 56, .12), 0 8px 24px rgba(7, 27, 56, .10);
	--shadow-lg: 0 2px 6px rgba(7, 27, 56, .14), 0 18px 44px rgba(7, 27, 56, .16);
}

.band-dark {
	--color-bg: #000000;
	--color-surface: #14161a;
	--color-text: #eceee9;
	--color-muted: #eceee9;
	--color-muted-strong: #eceee9;
	--color-subtle: #eceee9;
	--color-accent: #e4fe66;
	--color-control-border: #4b5560;
	--color-outline: #8a938d;
	--color-hairline: rgba(255, 255, 255, .12);

	background-color: var(--color-bg);
	color: var(--color-text);
}

.band-mist {
	background-color: var(--color-mist);
}

@media (max-width: 1100px) {
	:root {
		--gutter: 40px;
		--header-height: 69px;
	}
}

@media (max-width: 680px) {
	:root {
		--gutter: 20px;
	}
}