/* Design tokens: colours, type scale, spacing, shape and motion. */

:root {
	/* Graphite neutrals (bg + surface kept from today's base.css) */
	--c-bg-deep: #0A0B0D;
	--c-bg: #0F1113;
	--c-surface: #1A1D21;
	--c-surface-2: #22262B;
	--c-line: #2B3035;
	--c-line-strong: #6E757D;     /* >= 3:1 on bg, surface and surface-2: form borders */

	/* Text */
	--c-heading: #F2F4F6;
	--c-text: #D4D8DC;
	--c-text-muted: #9BA1A8;
	--c-placeholder: #80868D;     /* input placeholder, 5.1:1 on bg */

	/* The four forces — base (decorative only, never text) */
	--c-fire: #8F4740;
	--c-earth: #487D48;
	--c-water: #4E87A9;
	--c-air: #375D87;

	/* The four forces — lit (text-safe on every graphite surface, >= 6:1) */
	--c-fire-lit: #E8907F;
	--c-earth-lit: #8FC98C;
	--c-water-lit: #8CC6E8;
	--c-air-lit: #A3B9E0;

	/* Semantic */
	--c-link: var(--c-water-lit);
	--c-focus: var(--c-water-lit);
	--c-error: #F29385;
	--c-success: var(--c-earth-lit);

	/* Stand-in chips (PLACEHOLDER markers, dev branches only) */
	--c-standin: #FFD166;

	/* Signature gradients */
	--grad-elements: linear-gradient(90deg, #B35A50 0%, #5E9E5E 33%, #5FA2C9 66%, #4A77AD 100%);
	--glow-elements:
		radial-gradient(40% 60% at 0% 0%, rgba(143, 71, 64, 0.16), transparent 70%),
		radial-gradient(40% 60% at 100% 0%, rgba(78, 135, 169, 0.14), transparent 70%),
		radial-gradient(40% 60% at 0% 100%, rgba(72, 125, 72, 0.12), transparent 70%),
		radial-gradient(40% 60% at 100% 100%, rgba(55, 93, 135, 0.14), transparent 70%);

	/* Type */
	--font-head: 'Montserrat', 'Montserrat Fallback', system-ui, sans-serif;
	--font-body: 'Open Sans', 'Open Sans Fallback', system-ui, sans-serif;
	--fs-3xs: 0.625rem;   /* 10: Steam button kicker */
	--fs-2xs: 0.6875rem;  /* 11: tags, stand-in chips */
	--fs-xs: 0.75rem;     /* 12 */
	--fs-sm: 0.875rem;    /* 14 */
	--fs-card: 0.9375rem; /* 15: card text, fact sheet values */
	--fs-base: 1rem;      /* 16 */
	--fs-md: 1.125rem;    /* 18 */
	--fs-lg: 1.25rem;     /* 20 */
	--fs-xl: 1.5rem;      /* 24 */
	--fs-2xl: 2rem;       /* 32 */
	--fs-3xl: 2.75rem;    /* 44 */
	--fs-4xl: 3.5rem;     /* 56 */

	/* Space (4px base) */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;

	/* The solid header: its padding, the 44 px logo row and the 1 px border.
	   Sticky offsets and anchor targets hang off this one value. */
	--header-h: calc(2 * var(--s-4) + 44px + 1px);

	/* Section padding. The tight step joins related blocks: a page head to
	   its body, the trailer to the gallery. */
	--section-y: var(--s-9);
	--section-y-tight: var(--s-8);
	--gutter: var(--s-6);
	--container: 1200px;

	/* Shape + depth */
	--r-sm: 6px;
	--r-md: 10px;
	--r-icon: 12px;
	--r-lg: 16px;
	--r-pill: 999px;
	--shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -20px rgba(0, 0, 0, 0.7);
	--shadow-media: 0 30px 60px -25px rgba(0, 0, 0, 0.8);

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--t-fast: 150ms var(--ease);
	--t-med: 280ms var(--ease);
}

/* Breakpoints (max-width unless noted), the same everywhere:
   480   phones: buttons stack and may wrap, single-column grids
   768   small tablets: phone type scale and gutter, phone hero crop
   960   tablets: mobile menu (nav.js reads it from the toggle), two-column grids
         collapse, press aside moves above the content
   1100  small laptops: hero logo cap
   Keep image `sizes` in the templates in step when one moves. */
@media (max-width: 768px) {
	:root {
		--fs-3xl: 2rem;
		--fs-4xl: 2.375rem;
		--section-y: var(--s-8);
		--section-y-tight: var(--s-7);
		--gutter: 1.25rem;
	}
}