/* ==========================================================================
   Brick District — design tokens and base styles
   Tokens first: every colour, size and radius used anywhere comes from here.
   ========================================================================== */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 500 800;
	font-display: swap;
	src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Brand — the logo's bricks. Yellow is an accent and a background, never text. */
	--bd-yellow: #ffd23f;
	--bd-yellow-soft: #fff4c7;
	--bd-red: #c8102e;
	--bd-blue: #1f4fd1;
	--bd-green: #137a3e;

	/* Neutrals, warm to sit beside the yellow */
	--bd-ink: #17181c;
	--bd-ink-2: #3d3f46;
	--bd-muted: #6b6d75;     /* 5.3:1 on white — the lightest text allowed */
	--bd-line: #e6e3dc;
	--bd-paper: #faf8f4;
	--bd-white: #ffffff;

	/* Status — each badge colour passes AA with white text */
	--bd-status-retired: #17181c;
	--bd-status-retiring: #c8102e;
	--bd-status-rare: #1f4fd1;
	--bd-status-collectable: #6b3fa0;
	--bd-status-new: #137a3e;

	/* Roles */
	--bd-text: var(--bd-ink);
	--bd-text-soft: var(--bd-ink-2);
	--bd-bg: var(--bd-white);
	--bd-bg-alt: var(--bd-paper);
	--bd-link: var(--bd-blue);
	--bd-focus: #1f4fd1;

	/* Type */
	--bd-font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--bd-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--bd-step--1: clamp(0.83rem, 0.8rem + 0.1vw, 0.88rem);
	--bd-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
	--bd-step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
	--bd-step-2: clamp(1.44rem, 1.25rem + 0.9vw, 1.9rem);
	--bd-step-3: clamp(1.73rem, 1.4rem + 1.6vw, 2.6rem);
	--bd-step-4: clamp(2.07rem, 1.5rem + 2.8vw, 3.6rem);

	/* Space — a 4px grid */
	--bd-space-1: 0.25rem;
	--bd-space-2: 0.5rem;
	--bd-space-3: 0.75rem;
	--bd-space-4: 1rem;
	--bd-space-5: 1.5rem;
	--bd-space-6: 2rem;
	--bd-space-7: 3rem;
	--bd-space-8: 4.5rem;

	--bd-radius-s: 6px;
	--bd-radius: 12px;
	--bd-radius-l: 20px;
	--bd-shadow: 0 1px 2px rgb(23 24 28 / 6%), 0 4px 14px rgb(23 24 28 / 6%);
	--bd-shadow-lift: 0 2px 4px rgb(23 24 28 / 8%), 0 12px 28px rgb(23 24 28 / 12%);

	--bd-wrap: 1240px;
	--bd-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }

/* Base ------------------------------------------------------------------- */
body {
	background: var(--bd-bg);
	color: var(--bd-text);
	font-family: var(--bd-font-body);
	font-size: var(--bd-step-0);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--bd-font-display);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
h1 { font-size: var(--bd-step-4); font-weight: 800; }
h2 { font-size: var(--bd-step-3); }
h3 { font-size: var(--bd-step-1); }
p { text-wrap: pretty; }

a { color: var(--bd-link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--bd-focus); outline-offset: 2px; border-radius: 2px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: var(--bd-space-2); left: var(--bd-space-2); z-index: 100;
	width: auto; height: auto; clip-path: none;
	padding: var(--bd-space-3) var(--bd-space-4);
	background: var(--bd-ink); color: var(--bd-white);
}

/* Layout ----------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--bd-gutter), var(--bd-wrap)); margin-inline: auto; }
.section { padding-block: var(--bd-space-7); }
.section--alt { background: var(--bd-bg-alt); }
.stack > * + * { margin-top: var(--bd-space-4); }
.eyebrow {
	font-size: var(--bd-step--1);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bd-muted);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}