/* ==========================================================================
   Otherwise — design tokens
   The single place colours, type, spacing, borders and motion are defined.
   Nothing downstream should hardcode a hex value or a raw pixel rhythm.
   ========================================================================== */

:root {
	/* ---- Colour ---- */
	--ow-bg: #0B0B0B;
	--ow-surface: #151515;
	--ow-surface-2: #1C1C1C;
	--ow-text: #F3F0E8;
	--ow-muted: #9B9B9B;
	--ow-border: #2A2A2A;
	--ow-border-strong: #3A3A3A;
	--ow-accent: #D8FF3E;
	--ow-accent-dim: #B4D62F;
	--ow-on-accent: #0B0B0B;

	--ow-danger: #FF5C5C;
	--ow-success: #7BD88F;

	/* Translucent layers for sticky chrome and overlays. */
	--ow-bg-blur: rgba(11, 11, 11, 0.82);
	--ow-scrim: rgba(11, 11, 11, 0.55);
	--ow-scrim-strong: rgba(11, 11, 11, 0.78);

	/* ---- Type ---- */
	--ow-font-display: "Archivo Black", "Arial Black", "Helvetica Neue", sans-serif;
	--ow-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Fluid editorial scale. Upper bounds are capped so oversized headings stay
	   controlled on very wide screens rather than running off the grid. */
	--ow-fs-display: clamp(2.75rem, 9vw, 8rem);
	--ow-fs-h1: clamp(2.25rem, 6.2vw, 5rem);
	--ow-fs-h2: clamp(1.75rem, 4.2vw, 3.25rem);
	--ow-fs-h3: clamp(1.25rem, 2.4vw, 1.875rem);
	--ow-fs-h4: clamp(1.05rem, 1.6vw, 1.25rem);
	--ow-fs-body: clamp(0.95rem, 1.05vw, 1.0625rem);
	--ow-fs-sm: 0.875rem;
	--ow-fs-xs: 0.75rem;

	--ow-lh-tight: 0.92;
	--ow-lh-heading: 1.04;
	--ow-lh-body: 1.65;

	--ow-track-display: -0.02em;
	--ow-track-label: 0.16em;

	/* ---- Spacing ---- */
	--ow-space-1: 0.25rem;
	--ow-space-2: 0.5rem;
	--ow-space-3: 0.75rem;
	--ow-space-4: 1rem;
	--ow-space-5: 1.5rem;
	--ow-space-6: 2rem;
	--ow-space-7: 3rem;
	--ow-space-8: 4rem;
	--ow-space-9: 6rem;

	/* Vertical rhythm between full-width sections. */
	--ow-section: clamp(3.5rem, 7vw, 7.5rem);
	--ow-section-tight: clamp(2.5rem, 4.5vw, 4.5rem);

	/* ---- Layout ---- */
	--ow-container: 1440px;
	--ow-container-narrow: 960px;
	--ow-container-text: 720px;
	--ow-gutter: clamp(1.15rem, 4vw, 3.5rem);
	--ow-header-h: 74px;

	/* ---- Borders ---- */
	--ow-radius: 3px;
	--ow-radius-sm: 2px;
	--ow-radius-lg: 4px;
	--ow-hairline: 1px solid var(--ow-border);

	/* ---- Motion ---- */
	--ow-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ow-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ow-dur-fast: 160ms;
	--ow-dur: 260ms;
	--ow-dur-slow: 620ms;

	/* ---- Elevation ---- */
	--ow-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);

	--ow-z-header: 700;
	--ow-z-overlay: 800;
	--ow-z-float: 600;
}

@media (max-width: 782px) {
	:root {
		--ow-header-h: 62px;
	}
}

/* Motion is decorative throughout; honour the OS preference completely. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ow-dur-fast: 1ms;
		--ow-dur: 1ms;
		--ow-dur-slow: 1ms;
	}
}