/**
 * wwwoo Design System — 2026 premium e-commerce
 * Spacing: 8 · 16 · 24 · 32 · 48 · 64 · 96 only
 */

:root {
	--ds-max: 1440px;
	--ds-content: 1280px;
	--ds-pad-mobile: 16px;
	--ds-pad-tablet: 24px;
	--ds-pad-desktop: 32px;

	--ds-space-1: 8px;
	--ds-space-2: 16px;
	--ds-space-3: 24px;
	--ds-space-4: 32px;
	--ds-space-5: 48px;
	--ds-space-6: 64px;
	--ds-space-7: 96px;

	--ds-radius: 12px;
	--ds-radius-lg: 16px;
	--ds-radius-pill: 999px;

	--ds-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06);
	--ds-shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
	--ds-shadow-lg: 0 16px 48px rgba(17, 24, 39, 0.1);
	--ds-shadow-lift: 0 20px 40px rgba(17, 24, 39, 0.12);

	--ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ds-duration: 0.3s;

	--ds-text: #111827;
	--ds-text-secondary: #6b7280;
	--ds-surface: #ffffff;
	--ds-border: #e5e7eb;
	--ds-hover: #f3f4f6;

	--ds-h1: 30px;
	--ds-h2: 24px;
	--ds-h3: 20px;
}

@media (min-width: 768px) {
	:root {
		--ds-h1: 36px;
		--ds-h2: 30px;
		--ds-h3: 22px;
	}
}

@media (min-width: 1024px) {
	:root {
		--ds-h1: 48px;
		--ds-h2: 36px;
		--ds-h3: 24px;
	}
}

/* Container */
.sh-container {
	width: 100%;
	max-width: var(--ds-max);
	margin-inline: auto;
	padding-inline: var(--ds-pad-mobile);
}

@media (min-width: 768px) {
	.sh-container {
		padding-inline: var(--ds-pad-tablet);
	}
}

@media (min-width: 1024px) {
	.sh-container {
		max-width: var(--ds-content);
		padding-inline: var(--ds-pad-desktop);
	}
}

.sh-container--wide {
	max-width: var(--ds-max);
}

/* Typography */
h1, .h1 {
	font-size: var(--ds-h1);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

h2, .h2 {
	font-size: var(--ds-h2);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

h3, .h3 {
	font-size: var(--ds-h3);
	line-height: 1.3;
}

/* Section rhythm */
.sh-section {
	padding-block: var(--ds-space-6);
}

@media (min-width: 1024px) {
	.sh-section {
		padding-block: var(--ds-space-7);
	}
}

/* Reveal animation — visible by default; hidden only when JS is active */
.sh-reveal {
	opacity: 1;
	transform: none;
}

html.js .sh-reveal:not(.is-visible) {
	opacity: 0;
	transform: translateY(var(--ds-space-3));
	transition:
		opacity var(--ds-duration) var(--ds-ease),
		transform var(--ds-duration) var(--ds-ease);
}

html.js .sh-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html.js .sh-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}