/* Design tokens — mirror content/design-tokens.md exactly when editing */

@import url("cursor.css");

:root {
	/* Colors — light editorial theme */
	--bg: #FFFFFF;        /* page background */
	--surface: #F2F2F2;   /* project card fill and media placeholder */
	--ink: #0A0A0A;       /* primary text */
	--ink-muted: #666666; /* descriptions, inactive nav */
	--rule: #E5E5E5;      /* vertical divider, hairlines */
	--chip-bg: #FFFFFF;   /* tag chip background */
	--chip-ink: #0A0A0A;  /* tag chip text */
	--chip-rule: #D8D8D8; /* tag chip border — decorative; chip text carries the label */
	--accent: #0A0A0A;    /* links resolve to ink in this design */
	--thumb-bg: #F2F2F2;  /* card frame behind gallery media */

	/* Fonts — Manrope + Fira Code are the site default; Play overrides in play.css */
	--font-display: "Manrope", system-ui, sans-serif;
	--font-body: "Manrope", system-ui, sans-serif;
	--font-mono: "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
	--font-sans: "Manrope", system-ui, sans-serif;

	/* Type scale — 16px base on a ~1.2–1.25 modular ratio; larger steps scale
	   fluidly via clamp(). Tracking tightens and leading shrinks as size grows
	   — see the role map in content/design-tokens.md. */
	--text-2xs: 0.6875rem; /* 11px — micro labels, chips */
	--text-xs: 0.75rem;    /* 12px — mono nav / meta labels */
	--text-sm: 0.875rem;   /* 14px — captions, fine print */
	--text-base: 1rem;     /* 16px — UI body */
	--text-md: 1.125rem;   /* 18px — lead, card captions */
	--text-lg: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);  /* 20 → 24 — large body */
	--text-xl: clamp(1.5rem, 1.33rem + 0.85vw, 2rem);     /* 24 → 32 — subheads */
	--text-2xl: clamp(2rem, 1.65rem + 1.75vw, 3rem);      /* 32 → 48 — section titles */
	--text-3xl: clamp(2.5rem, 1.95rem + 2.75vw, 4rem);    /* 40 → 64 — page titles */
	--text-4xl: clamp(3.25rem, 2.3rem + 4.75vw, 5.5rem);  /* 52 → 88 — hero */
	--text-display: clamp(3.5rem, 1rem + 12vw, 11rem);    /* 56 → 176 — oversized editorial titles */

	/* Line height — tighter as type grows */
	--leading-none: 1;
	--leading-tight: 0.92;    /* display / stacked wordmark */
	--leading-heading: 1.05;  /* headings */
	--leading-snug: 1.25;     /* subheads, lead paragraphs */
	--leading-body: 1.55;     /* body copy */

	/* Letter spacing — tighter as type grows, wide for mono labels */
	--tracking-tighter: -0.04em;  /* display / giant titles */
	--tracking-tight: -0.03em;    /* headings */
	--tracking-snug: -0.015em;    /* large body, lead, UI */
	--tracking-normal: 0;
	--tracking-wide: 0.08em;      /* mono labels, chips */

	/* Spacing */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
	--space-md: clamp(1rem, 0.85rem + 0.75vw, 1.5rem);
	--space-lg: clamp(1.5rem, 1rem + 2vw, 3rem);
	--space-xl: clamp(2rem, 1.25rem + 4vw, 5rem);
	--space-2xl: clamp(4rem, 2rem + 8vw, 8rem);
	--space-3xl: clamp(6rem, 3rem + 12vw, 12rem);

	/* Layout */
	--frame-width: 87.5rem; /* 1400px — shared content frame; header and page content align to this */
	--card-aspect-ratio: 858 / 555; /* work feed project card media */
	--text-width: 720px;
	--bp-sm: 640px;
	--bp-md: 768px;
	--bp-lg: 1024px;

	/* Radius */
	--radius-sm: 0.375rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
	--radius-full: 999px;

	/* Motion */
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 500ms;
	--ease-base: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
	color-scheme: light;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-tight);
	font-weight: 700;
}

/* Larger headings ride tighter; small headings ease off for legibility */
h1, h2 { letter-spacing: var(--tracking-tighter); }
h5, h6 { letter-spacing: var(--tracking-snug); }

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p {
	max-width: var(--text-width);
}

a {
	color: var(--accent);
	text-decoration: none;
}

/* reset.css runs `all: unset` over every element, which strips the UA focus
   ring site-wide. Restore one here so every focusable element gets an
   indicator by default; components that want a different look override it. */
:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}