/**
 * Spacing, typography and layout scale.
 *
 * Deliberately separate from css/veatal-tokens.css. That file is the brand
 * palette and is kept byte-identical with veatal.com_coming-soon; this one is
 * theme-specific and would have nothing to synchronise with.
 *
 * Everything here is prefixed --veatal-* because these are not daisyUI tokens.
 * The palette tokens (--color-*, --font-*, --radius-*) keep their unprefixed
 * names so the two projects stay comparable.
 */

:root {
	/*
	 * Spacing scale. Roughly a 1.5 ratio, snapped to values that land on whole
	 * pixels at a 16px root: 4, 8, 12, 16, 24, 32, 48, 64, 96.
	 */
	--veatal-space-3xs: 0.25rem;
	--veatal-space-2xs: 0.5rem;
	--veatal-space-xs: 0.75rem;
	--veatal-space-sm: 1rem;
	--veatal-space-md: 1.5rem;
	--veatal-space-lg: 2rem;
	--veatal-space-xl: 3rem;
	--veatal-space-2xl: 4rem;
	--veatal-space-3xl: 6rem;

	/*
	 * Type scale. The three smallest steps are fixed because shrinking body
	 * copy below 16px on a phone costs more than it gains; everything above
	 * interpolates between a 375px and a 1440px viewport.
	 */
	--veatal-text-xs: 0.8125rem;
	--veatal-text-sm: 0.875rem;
	--veatal-text-base: 1rem;
	--veatal-text-lg: clamp(1.0625rem, 0.9965rem + 0.282vw, 1.25rem);
	--veatal-text-xl: clamp(1.25rem, 1.162rem + 0.376vw, 1.5rem);
	--veatal-text-2xl: clamp(1.5rem, 1.324rem + 0.751vw, 2rem);
	--veatal-text-3xl: clamp(1.875rem, 1.567rem + 1.31vw, 2.75rem);
	--veatal-text-4xl: clamp(2.25rem, 1.81rem + 1.88vw, 3.5rem);

	--veatal-leading-tight: 1.2;
	--veatal-leading-snug: 1.4;
	--veatal-leading-normal: 1.65;

	--veatal-measure: 68ch;

	/* Layout. */
	--veatal-content-max: 1160px;
	--veatal-content-narrow: 46rem;
	--veatal-sidebar-width: 270px;
	--veatal-gutter: var(--veatal-space-md);
	--veatal-layout-gap: var(--veatal-space-xl);
	--veatal-section-gap: var(--veatal-space-2xl);

	/*
	 * Elevation. Wide and very soft rather than tight and dark — a spa surface
	 * should look lifted, not cut out.
	 */
	--veatal-shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-base-content) 6%, transparent);
	--veatal-shadow-md: 0 6px 20px -6px color-mix(in srgb, var(--color-base-content) 14%, transparent);
	--veatal-shadow-lg: 0 18px 40px -12px color-mix(in srgb, var(--color-base-content) 18%, transparent);

	/* Shared motion, so nothing invents its own timing. */
	--veatal-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--veatal-duration: 0.24s;

	/* Focus ring, applied in css/veatal-theme.css. */
	--veatal-focus-width: 2px;
	--veatal-focus-offset: 2px;
	--veatal-focus-color: var(--color-primary);
}

@media screen and (max-width: 999px) {
	:root {
		--veatal-layout-gap: var(--veatal-space-lg);
		--veatal-section-gap: var(--veatal-space-xl);
		--veatal-gutter: var(--veatal-space-sm);
	}
}