/* ==========================================================================
   Down Detailers — base.css
   Reset, design tokens, typography, layout primitives.
   Tokens derived from the live site (see reference/design-tokens.md).
   ========================================================================== */

:root {
	/* Palette (dark, default) */
	--dd-background: #0d0d0d;
	--dd-foreground: #f8f8f8;
	--dd-surface: #1b1b1b;
	--dd-card: #181818;
	--dd-popover: #141414;
	--dd-primary: #c7e02b;
	--dd-primary-600: #b3ca22;
	--dd-primary-foreground: #0d0d0d;
	--dd-secondary: #262626;
	--dd-muted: #242424;
	--dd-muted-foreground: #a5a5a1;
	--dd-destructive: #e62c2c;

	/* Borders / overlays */
	--dd-border: rgba(255, 255, 255, 0.12);
	--dd-border-strong: rgba(255, 255, 255, 0.2);
	--dd-input: rgba(255, 255, 255, 0.16);
	--dd-ring: #c7e02b;
	--dd-overlay: rgba(0, 0, 0, 0.55);

	/* Type */
	--dd-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--dd-fs-xs: 0.75rem;
	--dd-fs-sm: 0.875rem;
	--dd-fs-base: 1rem;
	--dd-fs-lg: 1.125rem;
	--dd-fs-xl: 1.25rem;
	--dd-fs-2xl: 1.5rem;
	--dd-fs-3xl: 1.875rem;
	--dd-fs-4xl: 2.25rem;
	--dd-fs-5xl: 3rem;
	--dd-fs-7xl: 4.5rem;
	--dd-leading-tight: 1.1;
	--dd-leading-snug: 1.25;
	--dd-leading-normal: 1.5;
	--dd-leading-relaxed: 1.625;

	/* Space */
	--dd-space: 0.25rem;
	--dd-container: 72rem; /* 1152px */
	--dd-gutter: 1.25rem;
	--dd-section-y: 5rem;
	--dd-radius-sm: 0.5rem;
	--dd-radius: 0.75rem;
	--dd-radius-lg: 1rem;
	--dd-radius-xl: 1.5rem;
	--dd-radius-pill: 999px;

	/* Effects */
	--dd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--dd-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
	--dd-shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
	--dd-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dd-ease-out: cubic-bezier(0.16, 1, 0.32, 1);
	--dd-transition: 0.2s var(--dd-ease);

	/* Header height is set by JS token if needed */
	--dd-header-h: 4.5rem;
}

@media (min-width: 768px) {
	:root {
		--dd-gutter: 2rem;
		--dd-section-y: 7rem;
	}
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--dd-header-h) + 1rem);
}

body {
	min-height: 100dvh;
	background-color: var(--dd-background);
	color: var(--dd-foreground);
	font-family: var(--dd-font-sans);
	font-size: var(--dd-fs-base);
	line-height: var(--dd-leading-normal);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
}

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

ul,
ol {
	list-style: none;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: var(--dd-leading-snug);
	letter-spacing: -0.025em;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.dd-container {
	width: 100%;
	max-width: var(--dd-container);
	margin-inline: auto;
	padding-inline: var(--dd-gutter);
}

.dd-section {
	padding-block: var(--dd-section-y);
}

.dd-section--tight {
	padding-block: calc(var(--dd-section-y) * 0.6);
}

.dd-sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dd-skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 200;
	background: var(--dd-primary);
	color: var(--dd-primary-foreground);
	padding: 0.75rem 1.25rem;
	border-radius: var(--dd-radius-sm);
	font-weight: 600;
	transition: top var(--dd-transition);
}

.dd-skip-link:focus {
	top: 1rem;
}

/* --------------------------------------------------------------------------
   Focus
   -------------------------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--dd-ring);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Scroll reveal (progressive enhancement; visible without JS)
   -------------------------------------------------------------------------- */

[data-reveal] {
	opacity: 1;
}

.js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s var(--dd-ease-out), transform 0.6s var(--dd-ease-out);
	will-change: opacity, transform;
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Typography helpers
   -------------------------------------------------------------------------- */

.dd-lead {
	font-size: var(--dd-fs-lg);
	color: var(--dd-muted-foreground);
	line-height: var(--dd-leading-relaxed);
	max-width: 60ch;
}