/*
 * Semantic token aliases.
 *
 * This file maps intent-based token names to primitive tokens declared in
 * assets/css/primitive-tokens.css.
 */
:root {
	/* === color semantics === */
	--color-text-strong: var(--neutral-darkest);
	--color-text-default: var(--neutral-darker);
	--color-text-muted: var(--neutral-dark);
	--color-text-soft: var(--neutral);

	--color-bg: var(--white);
	--color-bg-surface: var(--neutral-white);
	--color-bg-inverse: var(--neutral-darkest);
	--color-bg-muted: var(--neutral-lightest);

	--color-border: var(--neutral-lighter);
	--color-border-muted: var(--neutral-lightest);
	--color-border-strong: var(--neutral-dark);
	--color-selection-bg: var(--neutral-lighter);
	--color-selection-text: var(--neutral-darker);

	--color-text-on-inverse: var(--neutral-lightest);
	--color-bg-blue: var(--blue-light);
	--color-text-on-blue: var(--blue-dark);
	--color-bg-orange: var(--orange-light);
	--color-text-on-orange: var(--orange-dark);
	--color-bg-pink: var(--pink-light);
	--color-text-on-pink: var(--pink-dark);
	--color-bg-purple: var(--purple-light);
	--color-text-on-purple: var(--purple-dark);

	--color-danger-bg: var(--orange-light);
	--color-danger-text: var(--orange-dark);
	--color-success-bg: var(--primary-light);
	--color-success-text: var(--primary-dark);
	--color-info-bg: var(--blue-light);
	--color-info-text: var(--blue-dark);
	--color-warning-bg: var(--orange-light);
	--color-warning-text: var(--orange-dark);

	/* === spacing semantics === */
	--space-section-gutter: var(--space-32);
	--space-section-gap: var(--space-48);
	--space-card-inset: var(--space-24);
	--space-card-gap: var(--space-16);
	--space-stack-tight: var(--space-8);
	--space-stack-default: var(--space-16);
	--space-stack-loose: var(--space-24);
	--space-inline-control-x: var(--space-24);
	--space-inline-control-y: var(--space-12);

	/* === radius semantics === */
	--radius-button: var(--radius-8);
	--radius-input: var(--radius-8);
	--radius-card: var(--radius-12);
	--radius-pill: var(--radius-full);
	--radius-focus-outline: var(--radius-4);

	/* === typography semantics === */
	--font-body: var(--font-sans);
	--font-code: var(--font-mono);
	--font-eyebrow: var(--font-sans);

	--text-body-tiny: var(--text-12);
	--text-body-sm: var(--text-14);
	--text-body-md: var(--text-16);
	--text-body-lg: var(--text-18);
	--text-body-xl: var(--text-20);

	--text-body-line-height: var(--leading-150);

	--heading-h1-desktop-size: var(--text-56);
	--heading-h1-mobile-size: var(--text-40);
	--heading-h1-line-height: var(--leading-tight);
	--heading-h2-desktop-size: var(--text-48);
	--heading-h2-mobile-size: var(--text-36);
	--heading-h2-line-height: var(--leading-tight);
	--heading-h3-desktop-size: var(--text-40);
	--heading-h3-mobile-size: var(--text-32);
	--heading-h3-line-height: var(--leading-tight);
	--heading-h4-desktop-size: var(--text-32);
	--heading-h4-mobile-size: var(--text-24);
	--heading-h4-line-height: var(--leading-snug);
	--heading-h5-desktop-size: var(--text-24);
	--heading-h5-mobile-size: var(--text-20);
	--heading-h5-line-height: var(--leading-normal);
	--heading-h6-desktop-size: var(--text-20);
	--heading-h6-mobile-size: var(--text-18);
	--heading-h6-line-height: var(--leading-normal);

	--eyebrow-size: var(--text-14);
	--eyebrow-line-height: 20px;
	--eyebrow-weight: var(--weight-medium);
	--eyebrow-tracking: var(--tracking-eyebrow);
	--eyebrow-transform: var(--text-transform-eyebrow);

	/* === breakpoint semantics === */
	--bp-nav-collapse: var(--bp-menu-change);
	--bp-content-mobile-max: var(--bp-mobile-max);
	--bp-content-tablet-max: var(--bp-tablet-max);
	--bp-content-desktop-min: var(--bp-desktop-min);

	/* === layout semantics === */
	--container-max-width: var(--site-max-width);
	--container-gutter: var(--site-padding-large);
	--container-gutter-compact: var(--site-padding-small);
	--section-padding-block-desktop: var(--section-padding-desktop);
	--section-padding-block-tablet: var(--section-padding-tablet);
	--section-padding-block-mobile: var(--section-padding-mobile);

	/* === focus semantics === */
	--focus-ring-strong: var(--focus-ring-color);
	--focus-ring-subtle: var(--neutral-dark);
	--focus-ring-width-strong: var(--focus-ring-width);
	--focus-ring-separator: var(--focus-ring-separator-width);
}

/*
 * Universal focus-visible contract.
 *
 * Applies a 2px outline with a 2px offset to every keyboard-focusable element
 * by default, using the --focus-ring-* tokens defined in primitive-tokens.css.
 * Buttons (.btn) achieve the same visual via a box-shadow ring stack so the
 * inset hover overlay can co-exist with the focus ring; that contract is owned
 * by .btn:focus-visible in style.css. The :where() wrapper keeps this rule at
 * zero specificity so component-specific :focus-visible rules always win.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}