/* Shared foundations and semantic aliases. */
:root {
	/* Fonts. */
	--font-display: "forma-djr-display", sans-serif;
	--font-body: var(--font-display);
	--font-ui: "Inter", sans-serif;
	--font-weight-regular: 400;
	--font-weight-medium: 500;

	/* Brand palette. */
	--ov-red: #FF4040;
	--ov-pink: #FF809E;
	--ov-cream: #F6F1E8;
	--ov-ink: #0C1013;
	--ov-gray: #EFEFEF;
	--ov-white: #FFFFFF;

	/* Interface roles. */
	--color-bg-page: var(--ov-cream);
	--color-bg-surface: var(--ov-white);
	--color-bg-subtle: var(--ov-gray);
	--color-bg-brand: var(--ov-red);
	--color-bg-accent: var(--ov-pink);
	--color-bg-action-primary: var(--ov-pink);
	--color-bg-overlay: rgba(0, 0, 0, 0.48);
	--color-text-primary: var(--ov-ink);
	--color-text-inverse: var(--ov-cream);
	--color-text-link: var(--ov-pink);
	--color-border-focus: var(--ov-pink);
	--color-border-control: color-mix(in srgb, var(--ov-ink) 50%, var(--ov-cream));
	--color-text-muted: color-mix(in srgb, var(--ov-ink) 68%, var(--ov-cream));

	/* Feedback backgrounds and text/icons. */
	--color-feedback-success-bg: #DEF0E3;
	--color-feedback-success-ink: #174E37;
	--color-feedback-warning-bg: #FFE7BE;
	--color-feedback-warning-ink: #70410D;
	--color-feedback-error-bg: #FFE1E5;
	--color-feedback-error-ink: #8A2337;
	--color-feedback-info-bg: #E2E9FB;
	--color-feedback-info-ink: #254A85;

	/* Spacing scale. */
	--spacing-4: 4px;
	--spacing-8: 8px;
	--spacing-12: 12px;
	--spacing-16: 16px;
	--spacing-20: 20px;
	--spacing-24: 24px;
	--spacing-32: 32px;
	--spacing-40: 40px;
	--spacing-48: 48px;
	--spacing-64: 64px;

	/* Shared page frame and sticky navigation. */
	--layout-content-max: 1440px;
	--layout-gutter: var(--spacing-48);
	--layout-sticky-gap: var(--spacing-16);
	--layout-header-height: 112px;
	--layout-admin-bar-height: 0px;

	/* Full rounding is reserved for avatars, color swatches and indicators. */
	--radius-8: 8px;
	--radius-16: 16px;
	--radius-24: 24px;
	--radius-32: 32px;
	--radius-full: 9999px;

	/* Action dimensions: direction B. */
	--height-56: 56px;
	--height-64: 64px;
	--action-font-24: 24px;
	--action-font-28: 28px;
	--action-line-32: 32px;
	--action-line-36: 36px;
	--action-padding-inline: var(--spacing-24);
	--action-target-min: 44px;

	/* Focus specification for future components; the reset keeps its current rule. */
	--focus-width: 2px;
	--focus-offset: 0px;

	/* Shared timing for interactive state changes. */
	--transition-interactive: 0.2s ease-out;
	--transition-arrow: 0.4s ease-out;

	/* Semantic typography: desktop defaults, paired size and line height. */
	--font-size-h1: 3rem;
	--line-height-h1: 3.25rem;
	--font-size-h2: 2.5rem;
	--line-height-h2: 3rem;
	--font-size-h3: 2rem;
	--line-height-h3: 2.5rem;
	--font-size-h4: 1.5rem;
	--line-height-h4: 2rem;
	--font-size-body: 1rem;
	--line-height-body: 1.5rem;
	--font-size-small: 0.875rem;
	--line-height-small: 1.25rem;
	--font-size-caption: 0.75rem;
	--line-height-caption: 1rem;
	--font-size-body-lg: 1.25rem;
	--line-height-body-lg: 1.75rem;
	--font-size-body-md: 1.125rem;
	--line-height-body-md: 1.5rem;
	--font-size-label: 1rem;
	--line-height-label: 1.5rem;
	--font-size-field: 1.25rem;
	--line-height-field: var(--line-height-body-lg);
	--font-size-button: 1.5rem;
	--line-height-button: 2rem;
	--font-size-button-lg: 1.75rem;
	--line-height-button-lg: 2.25rem;

	/* Current reset defaults; component styles use the semantic tokens above. */
	--ov-font-size-base: var(--font-size-body);
	--ov-line-height-base: var(--line-height-body);
}

@media (max-width: 767px) {
	:root {
		--font-size-h1: 2.5rem;
		--line-height-h1: 2.75rem;
		--font-size-h2: 2rem;
		--line-height-h2: 2.5rem;
		--font-size-h3: 1.75rem;
		--line-height-h3: 2.25rem;
		--font-size-h4: 1.25rem;
		--line-height-h4: 1.75rem;
		--font-size-body-lg: 1.125rem;
		--line-height-body-lg: 1.75rem;
		--font-size-button-lg: 1.5rem;
		--line-height-button-lg: 2rem;
	}
}