@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700&display=swap');

/**
 * ClothB2B Child — design tokens (v2 · light theme + vivid accent).
 *
 * Single source of truth for the design system. Loaded first (no deps) so every
 * downstream file (base / components / woocommerce) consumes the custom
 * properties. The Astra palette filter in functions.php mirrors these hex
 * values — keep them in sync (see the @sync-with comment there).
 *
 * Design direction: clean light theme — neutral gray surfaces, near-black ink,
 * and ONE vivid accent (blue, first-pass; hue confirmed/refined via screenshot
 * iteration). Old primitive names (--cb-warm-* / --cb-earth-*) are kept as
 * aliases of the new --cb-gray-* / --cb-blue-* scales so existing component
 * references reskin automatically with zero breakage.
 */

:root {
	/* ===== Primitive palette — ink (charcoal / near-black) ===== */
	--cb-ink-50:  #F7F7F8;
	--cb-ink-100: #ECECEE;
	--cb-ink-200: #D8D8DC;
	--cb-ink-300: #B6B6BD;
	--cb-ink-400: #8C8C94;
	--cb-ink-500: #61616A;
	--cb-ink-600: #43434A;
	--cb-ink-700: #2E2E33;
	--cb-ink-800: #1F1F23;
	--cb-ink-900: #141417;

	/* ===== Primitive palette — neutral gray (surfaces / text-secondary) ===== */
	--cb-gray-50:  #F9FAFB;
	--cb-gray-100: #F3F4F6;
	--cb-gray-200: #E5E7EB;
	--cb-gray-300: #D1D5DB;
	--cb-gray-400: #9CA3AF;
	--cb-gray-500: #6B7280;
	--cb-gray-600: #4B5563;
	--cb-gray-700: #374151;
	--cb-gray-800: #1F2937;
	--cb-gray-900: #111827;

	/* ===== Primitive palette — accent (vivid blue; first-pass candidate) =====
	 * Hue is the single swap point — change this scale to re-accent the whole
	 * site. Confirmed/refined against the reference via screenshot iteration. */
	--cb-blue-50:  #EFF6FF;
	--cb-blue-100: #DBEAFE;
	--cb-blue-200: #BFDBFE;
	--cb-blue-300: #93C5FD;
	--cb-blue-400: #60A5FA;
	--cb-blue-500: #3B82F6;
	--cb-blue-600: #2563EB;  /* primary accent */
	--cb-blue-700: #1D4ED8;  /* hover */
	--cb-blue-800: #1E40AF;
	--cb-blue-900: #1E3A8A;

	/* ===== Backward-compat aliases =====
	 * Old primitive names repointed at the new scales so every existing
	 * var(--cb-warm-*) / var(--cb-earth-*) reference in components.css /
	 * woocommerce.css reskins automatically. (Prefer the --cb-gray-* /
	 * --cb-blue-* names in new code; these aliases remain for zero-breakage.) */
	--cb-warm-50:  var(--cb-gray-50);
	--cb-warm-100: var(--cb-gray-100);
	--cb-warm-200: var(--cb-gray-200);
	--cb-warm-300: var(--cb-gray-300);
	--cb-warm-400: var(--cb-gray-400);

	--cb-earth-50:  #F3F1EC;
	--cb-earth-100: #E7E4DD;
	--cb-earth-200: #D2CEC4;
	--cb-earth-300: #BBB7AE;
	--cb-earth-400: #AAA69E;
	--cb-earth-500: #9A9A94;
	--cb-earth-600: #85857F;
	--cb-earth-700: #70706B;
	--cb-earth-800: #555552;
	--cb-earth-900: #333332;

	/* ===== Semantic tokens (re-skin in one place) ===== */
	--cb-ink:    #111111;  /* primary ink — headings */
	--cb-text:   #666666;  /* body text */
	--cb-muted:  #777772;  /* secondary / technical labels */
	--cb-accent: #9A9A94;  /* restrained metallic accent */
	--cb-accent-hover: #777772;

	--cb-bg:     #F3F1EC;             /* warm paper background */
	--cb-bg-alt: #EAE7E0;  /* alternate warm surface */
	--cb-bg-warm: #F8F6F1;  /* softer warm surface */
	--cb-line:   #D7D3CA;  /* hairline border */
	--cb-line-soft: #E7E4DD;

	/* ===== Typography =====
	 * Offline-safe modern system stack. macOS/iOS → SF Pro, Windows → Segoe UI,
	 * Android → Roboto. CJK (PingFang/YaHei) + Arabic (Tahoma) fall through.
	 * --cb-font-display is the single swap point for a bundled display face. */
	--cb-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
	--cb-font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

	/* Fluid type scale (clamp: min, preferred, max) */
	--cb-fs-display: clamp(2.5rem, 5.6vw, 5rem);   /* hero: 40–80px */
	--cb-fs-h1: clamp(2.375rem, 5vw, 4.5rem); /* 38–72px */
	--cb-fs-h2: clamp(1.875rem, 3.8vw, 3.5rem); /* 30–56px */
	--cb-fs-h3: clamp(1.25rem, 2.4vw, 1.875rem); /* card title */
	--cb-fs-h4:      clamp(1.1rem, 1.8vw, 1.3rem);
	--cb-fs-body:    1rem;
	--cb-fs-sm:      0.875rem;
	--cb-fs-xs:      0.78rem;
	--cb-fs-lead:    clamp(1.05rem, 1.8vw, 1.3rem); /* hero subtitle / lead */

	--cb-lh-tight: 1.02;
	--cb-lh-snug: 1.1;
	--cb-lh-body: 1.65;

	--cb-tracking-tight: -0.02em;
	--cb-tracking-normal: 0;
	--cb-tracking-wide: 0.06em;
	--cb-tracking-wider: 0.1em;

	/* ===== Spacing scale ===== */
	--cb-s-1: 0.25rem;
	--cb-s-2: 0.5rem;
	--cb-s-3: 0.75rem;
	--cb-s-4: 1rem;
	--cb-s-5: 1.5rem;
	--cb-s-6: 2rem;
	--cb-s-7: 3rem;
	--cb-s-8: 4rem;
	--cb-s-9: 5rem;
	--cb-s-10: 6.5rem;

	/* ===== Radii ===== */
	--cb-radius-sm: 2px;
	--cb-radius: 2px;
	--cb-radius-lg: 2px;
	--cb-radius-pill: 999px;

	/* ===== Shadows (soft, neutral — read on light surfaces) ===== */
	--cb-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
	--cb-shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.07);
	--cb-shadow: 0 8px 24px rgba(17, 24, 39, 0.09);
	--cb-shadow-lg: 0 18px 48px rgba(17, 24, 39, 0.14);

	/* ===== Layout ===== */
	--cb-maxw: 1280px;
	--cb-maxw-narrow: 880px;
	--cb-gutter: 1.5rem;

	/* ===== Motion ===== */
	--cb-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--cb-dur-fast: 0.15s;
	--cb-dur: 0.25s;
	--cb-dur-slow: 0.5s;

	/* ===== Z-index ===== */
	--cb-z-header: 200;
	--cb-z-dropdown: 300;
	--cb-z-overlay: 400;
}