/**
 * Zest Frontend Styles
 *
 * Base styles and CSS variables for public-facing product pages.
 * These variables mirror the admin design system for consistency.
 *
 * @package BloomStack\Zest
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Variables — Zest Design Tokens
   ========================================================================== */

:root {
	/* Primary — Purple */
	--zest-primary: #7C3AED;
	--zest-primary-hover: #6D28D9;
	--zest-primary-light: #A78BFA;
	--zest-primary-bg: #F5F3FF;

	/* Accent — Coral/Orange */
	--zest-accent: #F97316;
	--zest-accent-hover: #EA580C;

	/* Text */
	--zest-text-dark: #1F2937;
	--zest-text-body: #4B5563;
	--zest-text-light: #6B7280;
	--zest-text-muted: #9CA3AF;

	/* Backgrounds */
	--zest-bg-light: #F9FAFB;
	--zest-bg-white: #FFFFFF;

	/* Borders */
	--zest-border: #E5E7EB;
	--zest-border-light: #F3F4F6;

	/* Status */
	--zest-success: #10B981;
	--zest-success-bg: #D1FAE5;
	--zest-warning: #F59E0B;
	--zest-warning-bg: #FEF3C7;
	--zest-error: #EF4444;

	/* Layout */
	--zest-max-width: 1200px;
	--zest-content-width: 800px;

	/* Typography */
	--zest-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--zest-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

	/* Shadows */
	--zest-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--zest-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
	--zest-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--zest-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

	/* Border Radius */
	--zest-radius-sm: 6px;
	--zest-radius: 10px;
	--zest-radius-lg: 16px;
	--zest-radius-xl: 24px;

	/* Transitions */
	--zest-transition: 0.2s ease;
	--zest-transition-slow: 0.3s ease;
}

/* ==========================================================================
   Base Reset for Zest Content
   ========================================================================== */

.zest-product-page .zest-wrapper {
	max-width: var(--zest-max-width);
	margin: 0 auto;
	font-family: var(--zest-font-body);
	color: var(--zest-text-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.zest-product-page .zest-wrapper *,
.zest-product-page .zest-wrapper *::before,
.zest-product-page .zest-wrapper *::after {
	box-sizing: border-box;
}

.zest-product-page .zest-wrapper h1,
.zest-product-page .zest-wrapper h2,
.zest-product-page .zest-wrapper h3,
.zest-product-page .zest-wrapper h4 {
	font-family: var(--zest-font-heading);
	color: var(--zest-text-dark);
	line-height: 1.2;
	margin: 0 0 0.5em 0;
}

.zest-product-page .zest-wrapper p {
	margin: 0 0 1em 0;
}

.zest-product-page .zest-wrapper img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.zest-container {
	max-width: var(--zest-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

.zest-section {
	padding: 80px 0;
}

.zest-section--alt {
	background: var(--zest-bg-light);
}

.zest-section__header {
	text-align: center;
	margin-bottom: 48px;
}

.zest-section__title {
	font-size: 32px;
	font-weight: 700;
	color: var(--zest-text-dark);
	margin: 0 0 12px 0;
}

.zest-section__subtitle {
	font-size: 18px;
	color: var(--zest-text-light);
	margin: 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

.zest-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 32px;
	font-size: 16px;
	font-weight: 600;
	font-family: var(--zest-font-body);
	line-height: 1.4;
	border: none;
	border-radius: var(--zest-radius);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--zest-transition);
}

.zest-btn--primary {
	color: var(--zest-bg-white);
	background: var(--zest-primary);
}

.zest-btn--primary:hover {
	background: var(--zest-primary-hover);
	color: var(--zest-bg-white);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--zest-shadow-md);
}

.zest-btn--secondary {
	color: var(--zest-primary);
	background: var(--zest-primary-bg);
}

.zest-btn--secondary:hover {
	background: var(--zest-primary);
	color: var(--zest-bg-white);
	text-decoration: none;
}

.zest-btn--large {
	padding: 16px 40px;
	font-size: 18px;
	border-radius: var(--zest-radius-lg);
}

/* ==========================================================================
   Badge Styles (Frontend)
   ========================================================================== */

.zest-badge {
	display: inline-block;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: 20px;
}

.zest-badge--available {
	background: var(--zest-success-bg);
	color: var(--zest-success);
}

.zest-badge--coming-soon {
	background: var(--zest-warning-bg);
	color: var(--zest-warning);
}

.zest-badge--discontinued {
	background: #FEE2E2;
	color: var(--zest-error);
}

.zest-badge--sale {
	background: var(--zest-accent);
	color: var(--zest-bg-white);
}

/* ==========================================================================
   Screen Reader Text
   ========================================================================== */

.zest-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}