/*
 * Universo Reverso responsive system - Phase 1
 *
 * This file intentionally introduces only semantic tokens and canonical
 * responsive bands. No existing layout selectors are overridden here yet.
 * Visual refactors will consume these tokens in later phases.
 */

:root {
	--ur-shell-gutter-mobile: 16px;
	--ur-shell-gutter-tablet: 24px;
	--ur-shell-gutter-tablet-wide: 32px;
	--ur-shell-gutter-desktop: 24px;
	--ur-shell-gutter-desktop-wide: 32px;
	--ur-shell-gutter-fluid: var(--ur-shell-gutter-mobile);
	--ur-shell-max-fluid: var(--ur-shell-max);

	--ur-grid-gap-mobile: 14px;
	--ur-grid-gap-tablet: 18px;
	--ur-grid-gap-tablet-wide: 20px;
	--ur-grid-gap-desktop: 22px;
	--ur-grid-gap-fluid: var(--ur-grid-gap-mobile);

	--ur-section-gap-mobile: 22px;
	--ur-section-gap-tablet: 28px;
	--ur-section-gap-tablet-wide: 32px;
	--ur-section-gap-desktop: 36px;
	--ur-section-gap-fluid: var(--ur-section-gap-mobile);

	--ur-card-min-mobile: 100%;
	--ur-card-min-tablet-portrait: 240px;
	--ur-card-min-tablet-landscape: 260px;
	--ur-card-min-desktop-compact: 280px;
	--ur-card-min-fluid: var(--ur-card-min-mobile);

	--ur-rail-width-tablet: 300px;
	--ur-rail-width-desktop: var(--ur-rail-width);
	--ur-rail-width-fluid: var(--ur-rail-width-tablet);
}

@media (min-width: 768px) {
	:root {
		--ur-shell-gutter-fluid: var(--ur-shell-gutter-tablet);
		--ur-grid-gap-fluid: var(--ur-grid-gap-tablet);
		--ur-section-gap-fluid: var(--ur-section-gap-tablet);
		--ur-card-min-fluid: var(--ur-card-min-tablet-portrait);
		--ur-rail-width-fluid: var(--ur-rail-width-tablet);
	}
}

@media (min-width: 960px) {
	:root {
		--ur-shell-gutter-fluid: var(--ur-shell-gutter-tablet-wide);
		--ur-grid-gap-fluid: var(--ur-grid-gap-tablet-wide);
		--ur-section-gap-fluid: var(--ur-section-gap-tablet-wide);
		--ur-card-min-fluid: var(--ur-card-min-tablet-landscape);
		--ur-rail-width-fluid: var(--ur-rail-width-tablet);
	}
}

@media (min-width: 1200px) {
	:root {
		--ur-shell-gutter-fluid: var(--ur-shell-gutter-desktop);
		--ur-grid-gap-fluid: var(--ur-grid-gap-desktop);
		--ur-section-gap-fluid: var(--ur-section-gap-desktop);
		--ur-card-min-fluid: var(--ur-card-min-desktop-compact);
		--ur-rail-width-fluid: var(--ur-rail-width-desktop);
	}
}

@media (min-width: 1440px) {
	:root {
		--ur-shell-max-fluid: var(--ur-shell-max-wide);
	}
}