/*
 * SmokTek design tokens (Phase 5.0)
 *
 * Single source of truth for brand colors, typography, spacing, and
 * radii, captured from the live Shopify storefront (smoktek.com) on
 * 2026-07-23. Every later Phase 5 section should read these variables
 * rather than hard-coding hex values or pixel sizes.
 *
 * Color values here are duplicated (intentionally) as PHP constants in
 * functions.php, where they also seed Shoptimizer's Customizer *defaults*
 * (not saved settings) — keep both in sync if a brand color changes.
 */

:root {
	/* Brand colors */
	--smoktek-color-primary: #E85C00;
	--smoktek-color-primary-hover: #E8650A;
	--smoktek-color-accent: #1D4ED8;

	/* Neutrals */
	--smoktek-color-text: #303030;
	--smoktek-color-background: #FFFFFF;

	/* Typography */
	--smoktek-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--smoktek-font-heading: var(--smoktek-font-body);

	--smoktek-font-size-h1: 56px;
	--smoktek-font-size-h2: 24px;
	--smoktek-font-size-body: 14px;

	/* Radii */
	--smoktek-radius-button: 5px;
	--smoktek-radius-input: 4px;

	/* Spacing scale (4px base unit, matches captured branding.spacing.baseUnit) */
	--smoktek-space-1: 4px;
	--smoktek-space-2: 8px;
	--smoktek-space-3: 12px;
	--smoktek-space-4: 16px;
	--smoktek-space-6: 24px;
	--smoktek-space-8: 32px;
	--smoktek-space-12: 48px;

	/* Shared homepage container — measured against the live Shopify
	 * storefront (2026-07-24): content centers in a ~1360px column
	 * (x=275 @1920 viewport). Every homepage section (tiles, both
	 * product carousels, brand spotlight, split showcases, why-choose)
	 * reads this ONE token instead of hardcoding its own max-width, so
	 * they all align to the same edges like the reference site. */
	--smoktek-container: 1360px;
}