/**
 * Token bridge.
 *
 * Every visual value now comes from the ALTCER Design System handoff in `assets/css/ds/`. This
 * file only maps the theme's existing `--alt-*` names onto those tokens, so there is exactly one
 * definition per value and a future handoff can replace the token files without touching a
 * single component.
 *
 * Colors need no bridge: the design system already publishes them as `--alt-ink`, `--alt-signal`
 * and so on, and they match the Web Brand System palette exactly.
 */

:root {
	/* Typefaces. */
	--alt-font-display: var(--font-display);
	--alt-font-body: var(--font-body);
	--alt-font-mono: var(--font-mono);

	/* Width axis of the display face. */
	--alt-width-display-xl: var(--display-xl-stretch);
	--alt-width-display-l: var(--display-l-stretch);
	--alt-width-h2: var(--h2-stretch);

	/* Spacing, 8 px base. */
	--alt-grid: var(--space-unit);
	--alt-space-1: var(--space-1);
	--alt-space-2: var(--space-2);
	--alt-space-3: var(--space-3);
	--alt-space-4: var(--space-4);
	--alt-space-5: var(--space-6);
	--alt-space-6: var(--space-8);
	--alt-space-7: var(--space-12);
	--alt-space-8: var(--space-16);
	--alt-space-9: var(--space-20);

	/* Layout. */
	--alt-container: var(--container-max);
	--alt-content-text: var(--container-text-max);
	--alt-gutter: var(--grid-gutter);
	--alt-columns: var(--grid-columns);
	--alt-nav-height: var(--nav-height);

	/*
	 * Page padding is fluid rather than stepped, per the design system's Section: one clamp
	 * between the mobile and desktop values instead of three breakpoints.
	 */
	--alt-page-padding: clamp(var(--pad-mobile), 5vw, var(--pad-desktop));

	/* Section rhythm. */
	--alt-section-space: var(--section-y-mobile);

	/* Shape. */
	--alt-radius: var(--radius-none);
	--alt-radius-control: var(--radius-control);
	--alt-radius-chip: var(--radius-chip);
	--alt-hairline: var(--border-hairline);
	--alt-datum: var(--border-datum);
	--alt-datum-line: var(--border-datum-strong);

	/* Measure. */
	--alt-measure: var(--measure-body);
	--alt-measure-max: var(--measure-body-max);
	--alt-measure-technical: var(--measure-technical);

	/* Surface-aware semantics, so a component asks for a role rather than a colour. */
	--alt-surface: var(--surface-dark);
	--alt-text: var(--text-on-dark);
	--alt-text-muted: var(--text-on-dark-muted);
	--alt-accent: var(--accent-on-dark);
	--alt-hairline-color: var(--hairline-on-dark);
	--alt-datum-color: var(--datum-on-dark);
	--alt-focus-color: var(--focus-ring);
}

@media (min-width: 768px) {
	:root {
		--alt-section-space: var(--section-y-tablet);
	}
}

@media (min-width: 1024px) {
	:root {
		--alt-section-space: var(--section-y-desktop);
	}
}

/**
 * Light regions flip the semantic roles rather than restating colours. Both the section modifier
 * and the design system's own `.alt-on-light` class work, so markup from either source behaves
 * the same.
 */
.alt-section--light,
.alt-on-light {
	--alt-surface: var(--surface-light);
	--alt-text: var(--text-on-light);
	--alt-text-muted: var(--text-on-light-muted);
	--alt-accent: var(--accent-on-light);
	--alt-hairline-color: var(--hairline-on-light);
	--alt-datum-color: var(--datum-on-light);
	--alt-focus-color: var(--focus-ring-on-light);
}

.alt-section--dark-2 {
	--alt-surface: var(--surface-dark-raised);
}