/* ==========================================================================
   EPCTools Design Tokens
   Layout and color direction inspired by technical software stores: dark navy
   header/footer, blue calls to action, and green prices/brands, paired with the
   theme's established Apple Store-inspired spacing, radii, and typography.
   ========================================================================== */

:root {
	/* Background colors */
	--color-canvas: #ffffff;
	--color-surface-2: #eef2f7; /* light panel background */
	--color-border: #dce4ed;

	/* Navy: header, footer, and dark sections */
	--color-navy: #0e2440;
	--color-navy-2: #163259;
	--color-navy-soft: #1c3b66;

	/* Accent colors */
	--color-accent: #1e88f5; /* secondary calls to action, links, ribbons */
	--color-accent-strong: #0f6fd6;
	--color-accent-soft: #add8ff; /* subtle hover states and badges */

	/* Prices and brands */
	--color-price: #1f8a4c;

	/* Text */
	--text-1: #1d1d1f; /* headings and primary text */
	--text-2: #333336; /* strong secondary text */
	--text-3: #6e6e73; /* descriptions and metadata */
	--text-4: #000000cc; /* emphasized text on light backgrounds */
	--text-on-navy: #ffffff;
	--text-on-navy-muted: #a9bdd6;

	/* Border radius */
	--radius-xs: 5px;
	--radius-sm: 8px;
	--radius-lg: 18px;
	--radius-pill: 56px;
	--radius-round: 100%;

	/* Shadows */
	--shadow-0: none;
	--shadow-1: rgba(0, 0, 0, 0.08) 2px 4px 12px 0px;
	--shadow-card: rgba(14, 36, 64, 0.1) 0px 6px 20px 0px;

	/* Spacing and grid */
	--container-max: 1280px;
	--container-pad: 24px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--gap-section: var(--space-20);
	--gap-card: var(--space-6);

	/* Typography */
	--font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-text: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--fs-hero: 44px;
	--lh-hero: 50px;
	--fs-h2: 28px;
	--lh-h2: 32px;
	--fs-card-title: 24px;
	--lh-card-title: 28px;
	--fs-body: 17px;
	--lh-body: 26px;
	--fs-link-lg: 17px;
	--lh-link-lg: 21px;
	--fs-link-md: 14px;
	--lh-link-md: 20px;
	--fs-micro: 12px;
	--lh-micro: 16px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-canvas: #0b1220;
		--color-surface-2: #16233a;
		--color-border: #2a3b55;
		--text-1: #f5f5f7;
		--text-2: #e2e2e6;
		--text-3: #a1a1a6;
		--text-4: #ffffffcc;
		--shadow-1: rgba(0, 0, 0, 0.4) 2px 4px 16px 0px;
	}
}