/**
 * 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:  var(--cb-blue-50);
	--cb-earth-100: var(--cb-blue-100);
	--cb-earth-200: var(--cb-blue-200);
	--cb-earth-300: var(--cb-blue-300);
	--cb-earth-400: var(--cb-blue-400);
	--cb-earth-500: var(--cb-blue-500);
	--cb-earth-600: var(--cb-blue-600);
	--cb-earth-700: var(--cb-blue-700);
	--cb-earth-800: var(--cb-blue-800);
	--cb-earth-900: var(--cb-blue-900);

	/* ===== Semantic tokens (re-skin in one place) ===== */
	--cb-ink:    var(--cb-gray-900);  /* primary ink — headings */
	--cb-text:   var(--cb-gray-700);  /* body text */
	--cb-muted:  var(--cb-gray-500);  /* secondary / captions */
	--cb-accent: var(--cb-blue-600);  /* links, CTAs, highlights, focus */
	--cb-accent-hover: var(--cb-blue-700);

	--cb-bg:     #FFFFFF;             /* page background */
	--cb-bg-alt: var(--cb-gray-100);  /* light gray section bg */
	--cb-bg-warm: var(--cb-gray-50);  /* even softer section bg */
	--cb-line:   var(--cb-gray-200);  /* hairline border */
	--cb-line-soft: var(--cb-gray-100);

	/* ===== 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Tahoma", "PingFang SC", "Microsoft YaHei", sans-serif;
	--cb-font-display: var(--cb-font-sans);

	/* Fluid type scale (clamp: min, preferred, max) */
	--cb-fs-display: clamp(2.4rem, 5.5vw, 4rem);   /* hero */
	--cb-fs-h1:      clamp(2rem, 4.5vw, 3rem);
	--cb-fs-h2:      clamp(1.6rem, 3.2vw, 2.25rem); /* section title */
	--cb-fs-h3:      clamp(1.25rem, 2.2vw, 1.6rem); /* 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.15;
	--cb-lh-snug: 1.35;
	--cb-lh-body: 1.7;

	--cb-tracking-tight: -0.02em;
	--cb-tracking-normal: 0;
	--cb-tracking-wide: 0.04em;
	--cb-tracking-wider: 0.12em;

	/* ===== 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: 4px;
	--cb-radius: 8px;
	--cb-radius-lg: 14px;
	--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;
}