/*
 * Urban Swimwear 2.0 — Design tokens.
 * Documented in docs/design-tokens.md. Do not hand-edit values here without
 * updating that doc to match.
 */

:root {
	/* Color */
	--urban-black: #111111;
	--urban-white: #ffffff;
	--urban-gold: #c9a34b;
	--urban-text: #1a1a1a;
	--urban-text-muted: #6b6b6b;
	--urban-border: #e3e3e3;
	--urban-surface: #ffffff;
	--urban-surface-alt: #f6f5f3;
	--urban-success: #2e7d4f;
	--urban-warning: #b8860b;
	--urban-error: #c0392b;

	/* Typography */
	--urban-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
		Arial, sans-serif;

	--urban-text-hero-size: clamp(2.5rem, 6vw, 5rem);
	--urban-text-hero-weight: 800;
	--urban-text-hero-tracking: -0.01em;
	--urban-text-hero-leading: 1.05;

	--urban-text-h1-size: clamp(2rem, 4vw, 3rem);
	--urban-text-h1-weight: 800;
	--urban-text-h1-tracking: -0.01em;
	--urban-text-h1-leading: 1.1;

	--urban-text-h2-size: clamp(1.5rem, 3vw, 2.25rem);
	--urban-text-h2-weight: 700;
	--urban-text-h2-tracking: -0.005em;
	--urban-text-h2-leading: 1.15;

	--urban-text-h3-size: 1.375rem;
	--urban-text-h3-weight: 700;
	--urban-text-h3-tracking: 0;
	--urban-text-h3-leading: 1.25;

	--urban-text-body-size: 1rem;
	--urban-text-body-weight: 400;
	--urban-text-body-leading: 1.6;

	--urban-text-small-size: 0.8125rem;
	--urban-text-small-weight: 400;
	--urban-text-small-leading: 1.5;

	--urban-text-nav-size: 0.75rem;
	--urban-text-nav-weight: 600;
	--urban-text-nav-tracking: 0.08em;

	--urban-text-button-size: 0.75rem;
	--urban-text-button-weight: 700;
	--urban-text-button-tracking: 0.12em;

	--urban-text-product-name-size: 0.9375rem;
	--urban-text-product-name-weight: 600;
	--urban-text-product-name-leading: 1.35;

	--urban-text-price-size: 1rem;
	--urban-text-price-weight: 700;

	--urban-text-meta-size: 0.8125rem;
	--urban-text-meta-weight: 400;

	--urban-text-label-size: 0.8125rem;
	--urban-text-label-weight: 600;
	--urban-text-label-tracking: 0.02em;

	/* Spacing (8px base scale) */
	--urban-space-1: 0.25rem;
	--urban-space-2: 0.5rem;
	--urban-space-3: 0.75rem;
	--urban-space-4: 1rem;
	--urban-space-5: 1.5rem;
	--urban-space-6: 2rem;
	--urban-space-7: 3rem;
	--urban-space-8: 4rem;
	--urban-space-9: 6rem;
	--urban-space-10: 8rem;

	/* Layout */
	--urban-container-max: 1320px;
	--urban-container-wide: 1600px;
	--urban-pad-mobile: 1.25rem;
	--urban-pad-desktop: 2.5rem;

	/* Radius */
	--urban-radius-none: 0;
	--urban-radius-sm: 2px;
	--urban-radius-pill: 999px;

	/* Shadow */
	--urban-shadow-header: 0 2px 32px rgba(0, 0, 0, 0.12);
	--urban-shadow-panel: 0 8px 40px rgba(0, 0, 0, 0.18);

	/* Breakpoints (reference only — not usable inside var() in media queries,
	   kept here so JS and documentation share one source of truth) */
	--urban-bp-sm: 480px;
	--urban-bp-md: 768px;
	--urban-bp-lg: 1024px;
	--urban-bp-xl: 1280px;

	/* Component sizing */
	--urban-btn-height: 3rem;
	--urban-input-height: 3rem;
	--urban-tap-target-min: 2.75rem;

	--urban-ratio-product: 3 / 4;
	--urban-ratio-hero: 16 / 9;
	--urban-ratio-gallery: 1 / 1;

	--urban-header-height: 4.5rem;
	--urban-header-height-mobile: 3.75rem;
}