/* ColaBox Stage 1 design-token and document foundation. */

:root {
	/* Primitive tokens: approved static source values. */
	--cb-color-graphite-950: #08090c;
	--cb-color-graphite-900: #0d0f13;
	--cb-color-graphite-850: #101217;
	--cb-color-graphite-800: #151820;
	--cb-color-graphite-750: #1b1e26;
	--cb-color-white: #ffffff;
	--cb-color-gray-400: #a6acb8;
	--cb-color-accent-500: #f4a51c;
	--cb-color-accent-400: #ffbd48;
	--cb-color-border: rgb(255 255 255 / 10%);
	--cb-color-border-strong: rgb(255 255 255 / 18%);
	--cb-space-1: 0.25rem;
	--cb-space-2: 0.5rem;
	--cb-space-3: 0.75rem;
	--cb-space-4: 1rem;
	--cb-space-6: 1.5rem;
	--cb-space-8: 2rem;
	--cb-space-12: 3rem;
	--cb-radius-sm: 0.625rem;
	--cb-radius-md: 1.125rem;
	--cb-radius-lg: 1.75rem;
	--cb-shadow-raised: 0 1.5rem 5rem rgb(0 0 0 / 42%);
	--cb-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--cb-font-display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
	--cb-container-content: 75rem;
	--cb-container-wide: 90rem;

	/* Semantic tokens. */
	--cb-bg: var(--cb-color-graphite-950);
	--cb-bg-secondary: var(--cb-color-graphite-900);
	--cb-surface: var(--cb-color-graphite-850);
	--cb-surface-alt: var(--cb-color-graphite-800);
	--cb-text: var(--cb-color-white);
	--cb-text-muted: var(--cb-color-gray-400);
	--cb-accent: var(--cb-color-accent-500);
	--cb-accent-hover: var(--cb-color-accent-400);
	--cb-border: var(--cb-color-border);
	--cb-border-strong: var(--cb-color-border-strong);
	--cb-container: var(--cb-container-wide);
	--cb-content: var(--cb-container-content);
	--cb-radius: var(--cb-radius-sm);
	--cb-focus-ring: var(--cb-accent);

	/* Component-level foundation; detailed components begin in Stage 2. */
	--cb-control-radius: var(--cb-radius-sm);
	--cb-card-bg: var(--cb-surface);
	--cb-card-border: var(--cb-border);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
}

body {
	margin: 0;
	background: var(--cb-bg);
	color: var(--cb-text);
	font-family: var(--cb-font-body);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 0.1875rem solid var(--cb-focus-ring);
	outline-offset: 0.1875rem;
}

.site-main {
	width: min(calc(100% - 3rem), var(--cb-content));
	margin-inline: auto;
	padding-block: var(--cb-space-12);
}

.alignwide {
	width: min(calc(100vw - 3rem), var(--cb-container));
	max-width: none;
	margin-inline: auto;
}

.alignfull {
	width: 100%;
	max-width: none;
}

.screen-reader-text {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	padding: 0;
	margin: -0.0625rem;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 0.3125rem;
	left: 0.3125rem;
	display: block;
	width: auto;
	height: auto;
	padding: var(--cb-space-3) var(--cb-space-4);
	clip: auto;
	background: var(--cb-surface-alt);
	color: var(--cb-text);
}

@media (max-width: 47.9375rem) {
	.site-main,
	.alignwide {
		width: min(calc(100% - 2rem), var(--cb-content));
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}