/* ==========================================================================
   Babam Signature — global design foundation (front-end)
   --------------------------------------------------------------------------
   The design contract as CSS custom properties. theme.json drives the block
   editor / Kadence tokens; this file mirrors them as plain CSS vars so the
   Babam Commerce UI plugin (zero-build) can consume the same system without
   depending on WordPress preset variables.

   Feel: ~60% Apple (calm, minimal, generous space) + ~40% Nike (confident,
   product-forward). Near-black / off-white, strong type, soft motion.
   Milestone 1 = foundation only. No storefront components yet.
   ========================================================================== */

:root {
	/* Color */
	--babam-ink: #0A0A0B;
	--babam-ink-soft: #2A2A2E;
	--babam-graphite: #6B6B72;
	--babam-mist: #C9C9CF;
	--babam-fog: #E8E8EA;
	--babam-paper: #F6F5F2;
	--babam-white: #FFFFFF;
	--babam-accent: var(--babam-ink); /* single accent for now; swappable later */

	/* Typography scale (mirrors theme.json fontSizes) */
	--babam-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--babam-font-display: var(--babam-font-sans);
	--babam-text-xs: 0.8125rem;
	--babam-text-sm: 0.9375rem;
	--babam-text-base: 1.0625rem;
	--babam-text-md: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	--babam-text-lg: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--babam-text-xl: clamp(2rem, 1.5rem + 2vw, 3rem);
	--babam-text-2xl: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
	--babam-text-3xl: clamp(3rem, 2rem + 4vw, 6rem);
	--babam-leading-tight: 1.1;
	--babam-leading-snug: 1.3;
	--babam-leading-normal: 1.6;
	--babam-tracking-tight: -0.02em;
	--babam-tracking-base: -0.01em;

	/* Spacing scale (mirrors theme.json spacingSizes) */
	--babam-space-1: 0.5rem;
	--babam-space-2: 1rem;
	--babam-space-3: 1.5rem;
	--babam-space-4: 2.5rem;
	--babam-space-5: 4rem;
	--babam-space-6: 6rem;
	--babam-space-7: 8rem;

	/* Layout */
	--babam-content: 720px;
	--babam-wide: 1280px;
	--babam-gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);

	/* Radius */
	--babam-radius-sm: 8px;
	--babam-radius-md: 14px;
	--babam-radius-lg: 22px;
	--babam-radius-pill: 999px;

	/* Elevation (kept subtle — premium, not heavy) */
	--babam-shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.04), 0 1px 3px rgba(10, 10, 11, 0.06);
	--babam-shadow-md: 0 4px 16px rgba(10, 10, 11, 0.08);
	--babam-shadow-lg: 0 12px 40px rgba(10, 10, 11, 0.12);

	/* Motion */
	--babam-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--babam-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--babam-dur-fast: 160ms;
	--babam-dur: 240ms;
	--babam-dur-slow: 400ms;

	/* Mobile sticky-action bar height (reserved for M2 product page) */
	--babam-mobile-action-h: 64px;

	/* Z-index scale */
	--babam-z-header: 100;
	--babam-z-overlay: 200;
	--babam-z-menu: 300;
}

/* Respect reduced-motion preferences everywhere. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--babam-dur-fast: 0ms;
		--babam-dur: 0ms;
		--babam-dur-slow: 0ms;
	}
}

/* Foundation typography polish. Scoped lightly; storefront components arrive in M2. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}