/* ElevenCode brand layer: the ElevenLabs-like monochrome look, on top of the design
   standard tokens. Load after /design/tokens.css. Light is the default; a stored choice pins one
   with data-theme, and "system" removes it so the page follows the visitor's OS. Flat surfaces,
   hairline borders, no shadows and no gradients; one ink accent. The light page is pure white;
   a very light neutral grey appears only where a surface needs separation. */

:root {
	/* Light is the brand's look and the default; a stored choice pins one with
	   data-theme="light" or data-theme="dark", and "system" leaves it off (Settings, S4). */
	color-scheme: light dark;

	/* White paper, near-black ink, neutral grey for labels and separated surfaces. */
	--bg: #ffffff;
	--bg-subtle: #f6f6f6;
	--surface: #ffffff;
	--surface-hover: #f6f6f6;
	--border: #e7e7ea;
	--control-border: #8f8a80;
	--text: #0b0b0b;
	--text-secondary: #625f59;
	--ink: #0b0b0b;
	--on-ink: #ffffff;
	--accent: var(--ink);
	--danger: #b42318;
	--danger-bg: #fdecea;
	--success: #067647;
	--success-bg: #eaf6ef;
	--warning: #b54708;
	--warning-bg: #fdf3e7;

	/* Large, confident headings with tight letter-spacing. */
	--display: clamp(2.5rem, 6.4vw, 4.5rem);
	--heading: clamp(1.625rem, 3vw, 2.5rem);
	--lead: clamp(1.0625rem, 1.4vw, 1.25rem);
	/* Tight, confident headings whose line box still holds the font's ascenders and descenders. */
	--leading-tight: 1.22;
	--tracking-tight: -0.035em;

	/* Soft card radius (brief: 12-16 px) and generous vertical rhythm. */
	--radius-card: 16px;
	--band: clamp(56px, 8vw, 104px);
}

:root[data-theme="light"] {
	color-scheme: light;
}

/* Dark palette, written twice on purpose: once for whoever's system asks for dark, once for a
   pinned choice. These are the design kit's own selectors, so both land on the same values. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #0b0a09;
		--bg-subtle: #121110;
		--surface: #161514;
		--surface-hover: #1d1b19;
		--border: #2a2724;
		--control-border: #7a756c;
		--text: #f5f2ec;
		--text-secondary: #a8a29a;
		--ink: #f5f2ec;
		--on-ink: #0b0a09;
		--danger: #ff8a8a;
		--danger-bg: #3a1d1f;
		--success: #6fd19b;
		--success-bg: #16261c;
		--warning: #f5b454;
		--warning-bg: #33260f;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0b0a09;
	--bg-subtle: #121110;
	--surface: #161514;
	--surface-hover: #1d1b19;
	--border: #2a2724;
	--control-border: #7a756c;
	--text: #f5f2ec;
	--text-secondary: #a8a29a;
	--ink: #f5f2ec;
	--on-ink: #0b0a09;
	--danger: #ff8a8a;
	--danger-bg: #3a1d1f;
	--success: #6fd19b;
	--success-bg: #16261c;
	--warning: #f5b454;
	--warning-bg: #33260f;
}

/* Primary buttons are pill-shaped and monochrome: near-black in light, near-white in dark.
   The .btn base already sets background/colour from --ink/--on-ink; this only makes the pill. */
.btn-primary,
.btn-secondary {
	border-radius: var(--radius-full);
	padding-inline: var(--space-5);
}

/* Outlined secondary button: a clearly visible hairline edge, transparent fill. */
.btn-secondary {
	background: transparent;
	border-color: var(--control-border);
}

.btn-secondary:hover {
	background: var(--surface-hover);
	border-color: var(--control-border);
}

/* Display and section headings for marketing pages: large, semibold, tight tracking. */
.display {
	font-size: var(--display);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}

.heading {
	font-size: var(--heading);
	font-weight: var(--weight-semibold);
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-tight);
	text-wrap: balance;
}

/* Grey lead paragraph under a heading. */
.lead {
	max-inline-size: 60ch;
	color: var(--text-secondary);
	font-size: var(--lead);
	line-height: 1.6;
}

/* Small uppercase label above a heading. Numerals stay Latin. */
.eyebrow {
	color: var(--text-secondary);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Large pill button for a page's main action. */
.btn-lg {
	min-block-size: 48px;
	padding-inline: var(--space-6);
	font-size: var(--text-lg);
}

/* Soft cards: hairline border, 16 px radius, flat fill, no shadow. */
.card {
	border-radius: var(--radius-card);
}

/* A band is a page section with generous vertical spacing. */
.band {
	padding-block: var(--band);
}

.band--tight {
	padding-block: calc(var(--band) / 2);
}

.container--wide {
	max-inline-size: calc(var(--content) + 96px);
}