/* Shared website tokens and base styles for turningrook.com. */
:root {
	--color-bg: #0A0A0A;
	--color-surface: #131313;
	--color-border: #262626;
	--color-border-strong: #3E484F;
	--color-text: #FFFFFF;
	--color-text-soft: #E5E2E1;
	--color-text-muted: #BDC8D0;
	--color-text-dim: #889299;
	--color-accent-warm: #dc1f05;
	--color-accent-cool: #4FC3F7;
	--color-focus-ring: #75D1FF;

	--hero-overlay-gradient:
		linear-gradient(
			to bottom,
			rgba(10, 10, 10, 0.55) 0%,
			rgba(10, 10, 10, 0.25) 28%,
			rgba(10, 10, 10, 0.55) 62%,
			rgba(10, 10, 10, 0.92) 100%
		);
	--hero-side-vignette:
		linear-gradient(
			to right,
			rgba(10, 10, 10, 0.65) 0%,
			rgba(10, 10, 10, 0.20) 38%,
			transparent 65%
		);

	--font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--type-display: clamp(2rem, 7vw, 6rem);
	--type-headline-md: clamp(1.25rem, 2vw, 1.625rem);
	--type-body-lg: 1.125rem;
	--type-body-md: 1rem;
	--type-body-sm: 0.875rem;
	--type-label-caps: 0.75rem;
	--type-kicker: clamp(0.75rem, 0.9vw, 0.875rem);
	--type-cta-small: 0.6875rem;
	--type-cta-large: 1rem;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	--leading-display: 1.02;
	--leading-tight: 1.2;
	--leading-snug: 1.3;
	--leading-body: 1.6;
	--leading-normal: 1.5;

	--tracking-display: -0.02em;
	--tracking-headline: -0.01em;
	--tracking-normal: 0em;
	--tracking-kicker: 0.12em;
	--tracking-caps: 0.1em;

	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;
	--space-7: 5rem;

	--hero-padding-x: clamp(1.5rem, 5vw, 5rem);
	--hero-padding-y: clamp(1.5rem, 4vw, 3rem);
	--logo-height: clamp(5rem, 9vw, 8.5rem);
	--container-content-max: 56rem;
	--icon-size: 1.125rem;
	--steam-icon-size: clamp(2.25rem, 3.5vw, 2.75rem);

	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-full: 9999px;
	--shadow-cta-hover: 0 0 0 1px rgba(255, 255, 255, 0.15) inset;

	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-emph: cubic-bezier(0.32, 0.72, 0, 1);
	--dur-fast: 180ms;
	--dur-med: 320ms;
	--dur-slow: 640ms;
	--dur-kenburns: 24s;
	--dur-bg-in: 1600ms;
	--dur-word-in: 720ms;
	--word-stagger: 110ms;
	--delay-kicker: 350ms;
	--word-delay-base: 550ms;
	--delay-subline: 1700ms;
	--delay-cta: 2000ms;
	--dur-reveal: 640ms;

	--bp-mobile: 768px;
	--focus-outline-width: 2px;
	--focus-outline-offset: 3px;
}

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

html,
body {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--color-bg);
	color: var(--color-text-soft);
	font-family: var(--font-sans);
	font-weight: var(--weight-regular);
	font-size: var(--type-body-lg);
	line-height: var(--leading-body);
	min-height: 100vh;
	min-height: 100dvh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a {
	color: inherit;
	text-decoration: none;
}

a:focus-visible,
button:focus-visible {
	outline: var(--focus-outline-width) solid var(--color-focus-ring);
	outline-offset: var(--focus-outline-offset);
	border-radius: var(--radius-sm);
}