:root {
	/* Brand & surface colors */
	--bbco-primary: #c10037;
	--bbco-primary-hover: #b80038;
	--bbco-secondary: #374B5C;
	--bbco-accent: #f4b63f;
	--bbco-ink: #07172f;
	--bbco-text: #1d2a2f;
	--bbco-muted: #66747b;
	--bbco-bg: #ffffff;
	--bbco-surface: #ffffff;
	--bbco-border: #dce3df;
	--bbco-soft: #f9fafc;
	--bbco-soft-alt: #f9faf7;
	--bbco-surface-alt: #f9faf7;
	--bbco-control-bg: #f7f8f5;
	--bbco-product-media-bg: #eef2ee;
	--bbco-category-hover: #3b4f5f;
	--bbco-dark: #172326;
	--bbco-cta-dark: #123c3b;
	--bbco-featured-badge: #ffedd5;
	--bbco-trusted-badge: #dff8ee;
	--bbco-featured-text: #8b3a16;
	--bbco-trusted-text: #116149;

	/* Layout */
	--bbco-container: 1180px;
	--bbco-archive-columns: 3;

	/* Radius (--bbco-radius may be overridden by the customizer) */
	--bbco-radius: 8px;
	--bbco-radius-sm: 6px;
	--bbco-radius-md: 10px;
	--bbco-radius-lg: 18px;
	--bbco-radius-pill: 999px;

	/* Typography */
	--bbco-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bbco-serif: Georgia, "Times New Roman", serif;
	--bbco-text-xs: 0.75rem;
	--bbco-text-sm: 0.875rem;
	--bbco-text-base: 1rem;
	--bbco-text-md: 1.125rem;
	--bbco-text-lg: 1.25rem;
	--bbco-text-xl: 1.5rem;
	--bbco-text-2xl: 2rem;
	--bbco-text-3xl: 2.5rem;
	--bbco-weight-regular: 400;
	--bbco-weight-medium: 500;
	--bbco-weight-semibold: 600;
	--bbco-weight-bold: 700;

	/* Spacing scale */
	--bbco-space-4: 4px;
	--bbco-space-8: 8px;
	--bbco-space-12: 12px;
	--bbco-space-16: 16px;
	--bbco-space-20: 20px;
	--bbco-space-24: 24px;
	--bbco-space-28: 28px;
	--bbco-space-32: 32px;
	--bbco-space-40: 40px;
	--bbco-space-48: 48px;
	--bbco-space-56: 56px;
	--bbco-space-64: 64px;
	--bbco-space-72: 72px;
	--bbco-space-80: 80px;

	/* Shadows & focus */
	--bbco-shadow-sm: 3px 5px 13px rgba(222, 226, 231, 0.44);
	--bbco-shadow-md: 0 18px 45px rgba(29, 42, 47, 0.12);
	--bbco-shadow-ink-sm: 0 4px 12px rgba(7, 23, 47, 0.16);
	--bbco-shadow-ink-md: 0 14px 32px rgba(7, 23, 47, 0.28);
	--bbco-focus: 0 0 0 3px color-mix(in srgb, var(--bbco-primary) 20%, transparent);

	/* Sticky / chrome height (header + breathing room).
	   Used by sticky panels, dashboard nav, sidebars. */
	--bbco-header-h: 78px;
	--bbco-sticky-top: calc(var(--bbco-header-h) + var(--bbco-space-32));

	/* Motion: duration + easing.
	   --fast for micro UI (buttons, hovers), --base for menus/cards,
	   --slow for hero/section reveals. */
	--bbco-dur-fast: 0.18s;
	--bbco-dur-base: 0.22s;
	--bbco-dur-slow: 0.28s;
	--bbco-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* Z-index scale (avoid magic numbers). */
	--bbco-z-sticky: 50;
	--bbco-z-overlay: 65;
	--bbco-z-filter: 80;
	--bbco-z-drawer: 90;
	--bbco-z-header-stuck: 100;
	--bbco-z-toast: 999;

	/* On-dark surfaces: text + chrome on top of secondary/ink/primary backgrounds.
	   Use these instead of inline rgba(255,255,255,...). */
	--bbco-on-dark: rgba(255, 255, 255, 0.92);
	--bbco-on-dark-strong: #ffffff;
	--bbco-on-dark-muted: rgba(255, 255, 255, 0.78);
	--bbco-on-dark-soft: rgba(255, 255, 255, 0.16);
	--bbco-on-dark-softer: rgba(255, 255, 255, 0.10);
	--bbco-on-dark-border: rgba(255, 255, 255, 0.18);
	--bbco-on-dark-border-strong: rgba(255, 255, 255, 0.34);

	/* Semantic accent colors (for plugin/notices). */
	--bbco-success: #16a34a;
	--bbco-danger: #dc2626;
	--bbco-warning: #d97706;
}