/**
 * OVEA — Design Tokens (CSS Custom Properties)
 *
 * Single source of truth for design system values. Components reference
 * these tokens; change a token here → propagates to every component.
 *
 * Loaded BEFORE all other ovea-*.css files via wp_enqueue priority.
 *
 * @since 2026-05-07
 */

:root {
	/* ─────────────────────────────────────────────────────────
	 * COLORS — brand palette
	 * ───────────────────────────────────────────────────────── */
	--ovea-plum: #880044;
	--ovea-plum-dark: #4B0026;
	--ovea-magenta: #FF2D9B;
	--ovea-magenta-mid: #CC1A7A;
	--ovea-magenta-dark: #B0166A;
	--ovea-blush: #FFF0F8;
	--ovea-petal: #FFE5F0;
	--ovea-blush-soft: #FFF5FB;
	--ovea-cream: #FFFAFC;

	--ovea-text-primary: #1A0010;
	--ovea-text-secondary: #6E5A66;
	--ovea-text-muted: rgba(136, 0, 68, 0.72);

	--ovea-border-soft: rgba(255, 214, 239, 0.5);
	--ovea-border-magenta: rgba(255, 45, 155, 0.25);

	/* ─────────────────────────────────────────────────────────
	 * GRADIENTS — reusable
	 * ───────────────────────────────────────────────────────── */
	--ovea-gradient-magenta: linear-gradient(90deg, #FF2D9B 0%, #CC1A7A 30%, #880044 100%);
	--ovea-gradient-magenta-diag: linear-gradient(135deg, #FF2D9B 0%, #CC1A7A 60%, #880044 100%);
	--ovea-gradient-blush: linear-gradient(180deg, #FFF5F8 0%, #FFEEF5 100%);
	--ovea-gradient-button-hover: linear-gradient(135deg, #E51F87 0%, #B0166A 60%, #6B0035 100%);

	/* ─────────────────────────────────────────────────────────
	 * SPACING SCALE
	 * ───────────────────────────────────────────────────────── */
	--ovea-space-xxs: 4px;
	--ovea-space-xs: 8px;
	--ovea-space-sm: 12px;
	--ovea-space-md: 20px;
	--ovea-space-lg: 32px;
	--ovea-space-xl: 56px;
	--ovea-space-xxl: 96px;

	/* ─────────────────────────────────────────────────────────
	 * RADII
	 * ───────────────────────────────────────────────────────── */
	--ovea-radius-sm: 8px;
	--ovea-radius-md: 14px;
	--ovea-radius-lg: 22px;
	--ovea-radius-xl: 30px;
	--ovea-radius-pill: 999px;

	/* ─────────────────────────────────────────────────────────
	 * SHADOWS
	 * ───────────────────────────────────────────────────────── */
	--ovea-shadow-card: 0 4px 20px -10px rgba(255, 45, 155, 0.18);
	--ovea-shadow-card-hover: 0 12px 32px -16px rgba(255, 45, 155, 0.32);
	--ovea-shadow-button: 0 4px 14px rgba(255, 45, 155, 0.30);
	--ovea-shadow-button-hover: 0 8px 22px -4px rgba(255, 45, 155, 0.45);

	/* ─────────────────────────────────────────────────────────
	 * MOTION
	 * ───────────────────────────────────────────────────────── */
	--ovea-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--ovea-transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	--ovea-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* ─────────────────────────────────────────────────────────
	 * TYPOGRAPHY
	 * ───────────────────────────────────────────────────────── */
	--ovea-font-display: 'Nunito', sans-serif;
	--ovea-font-body: 'Nunito', sans-serif;

	/* ─────────────────────────────────────────────────────────
	 * COMPONENT-LEVEL TOKENS
	 * Override these to retheme each component.
	 * ───────────────────────────────────────────────────────── */

	/* Product card (homepage grid) */
	--product-card-padding: clamp(20px, 2vw, 28px);
	--product-card-radius: var(--ovea-radius-lg);
	--product-card-bg: #fff;
	--product-card-shadow: var(--ovea-shadow-card);
	--product-card-shadow-hover: var(--ovea-shadow-card-hover);
	--product-card-price-color: var(--ovea-text-primary);
	--product-card-price-align: left;
	--product-card-price-weight: 700;
	--product-card-price-size: 1.25rem;
	--product-card-image-ar: 1 / 1;

	/* Shop archive card */
	--shop-card-image-ar: 4 / 5;
	--shop-card-padding: clamp(20px, 2vw, 28px);
	--shop-card-bg: #fff;
	--shop-card-radius: var(--ovea-radius-lg);

	/* FAQ */
	--faq-padding-y: 18px;
	--faq-padding-x: 20px;
	--faq-question-weight: 700;
	--faq-question-size: 0.9375rem;
	--faq-answer-color: var(--ovea-text-secondary);
	--faq-border: 1px solid var(--ovea-border-soft);
	--faq-border-color-hover: rgba(255, 45, 155, 0.35);
	--faq-border-color-open: rgba(255, 45, 155, 0.40);
	--faq-radius: var(--ovea-radius-md);

	/* Section heading (eyebrow + h2 + subtitle) */
	--section-heading-weight: 700;
	--section-heading-color: var(--ovea-plum);
	--section-heading-gradient: var(--ovea-gradient-magenta);
	--section-heading-size: clamp(1.4rem, 4.2vw, 3rem);
	--section-heading-line-height: 1.1;
	--section-heading-letter-spacing: -0.015em;
	--section-heading-eyebrow-color: var(--ovea-magenta);
	--section-heading-eyebrow-weight: 700;
	--section-heading-eyebrow-size: 0.6875rem;
	--section-heading-eyebrow-spacing: 0.16em;
	--section-heading-subtitle-size: 1.0625rem;
	--section-heading-subtitle-color: var(--ovea-text-secondary);

	/* Buttons */
	--button-radius: var(--ovea-radius-pill);
	--button-padding-md: 14px 28px;
	--button-padding-sm: 10px 18px;
	--button-padding-lg: 18px 36px;
	--button-bg-primary: var(--ovea-gradient-magenta-diag);
	--button-bg-primary-hover: var(--ovea-gradient-button-hover);
	--button-color-primary: #fff;
	--button-shadow-primary: var(--ovea-shadow-button);
	--button-shadow-primary-hover: var(--ovea-shadow-button-hover);

	/* Bundle card */
	--bundle-card-radius: var(--ovea-radius-lg);
	--bundle-card-shadow: var(--ovea-shadow-card);
	--bundle-card-shadow-hover: var(--ovea-shadow-card-hover);
	--bundle-card-image-ar: 4 / 3;
	--bundle-card-bg: #fff;
	--bundle-card-border: 1px solid var(--ovea-border-soft);

	/* Trust badge */
	--trust-badge-icon-size: 18px;
	--trust-badge-padding: 12px;
	--trust-badge-radius: var(--ovea-radius-md);
	--trust-badge-border: 1px solid var(--ovea-border-soft);
	--trust-badge-bg-hover: rgba(255, 45, 155, 0.05);

	/* Marquee */
	--marquee-bg: linear-gradient(90deg, #FFE5F0 0%, #FFF0F8 50%, #FFE5F0 100%);
	--marquee-text-color: var(--ovea-plum);
	--marquee-icon-color: var(--ovea-magenta);
	--marquee-gap: var(--ovea-space-xl);
}


/* ==========================================================================
 *  CANONICAL COMPONENT STYLES — sourced from tokens above
 *  ========================================================================== */


/* ──────────────────────────────────────────────────────────
 *  .ovea-section-heading (canonical eyebrow + h2 + subtitle)
 * ────────────────────────────────────────────────────────── */

.ovea-section-heading {
	display: flex;
	flex-direction: column;
	gap: var(--ovea-space-sm);
	margin-bottom: var(--ovea-space-xl);
	max-width: 720px;
}

.ovea-section-heading--center {
	text-align: center;
	margin-inline: auto;
	align-items: center;
}

.ovea-section-heading--left {
	text-align: left;
	align-items: flex-start;
}

.ovea-section-heading__eyebrow {
	display: inline-block;
	font-size: var(--section-heading-eyebrow-size);
	font-weight: var(--section-heading-eyebrow-weight);
	letter-spacing: var(--section-heading-eyebrow-spacing);
	text-transform: uppercase;
	color: var(--section-heading-eyebrow-color);
}

.ovea-section-heading__title {
	margin: 0;
	font-family: var(--ovea-font-display);
	font-size: var(--section-heading-size);
	font-weight: var(--section-heading-weight);
	line-height: var(--section-heading-line-height);
	letter-spacing: var(--section-heading-letter-spacing);
	color: var(--section-heading-color);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.ovea-section-heading__title {
		background: var(--section-heading-gradient);
		background-size: 100% 100%;
		background-position: 0% 50%;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.ovea-section-heading__title em {
	font-style: normal;
	display: inline-block;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.ovea-section-heading__title em {
		background: var(--ovea-gradient-magenta-diag);
		background-size: 200% 200%;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.ovea-section-heading__subtitle {
	margin: 0;
	font-size: var(--section-heading-subtitle-size);
	color: var(--section-heading-subtitle-color);
	line-height: 1.6;
	max-width: 640px;
}


/* ──────────────────────────────────────────────────────────
 *  .ovea-btn (canonical button system)
 * ────────────────────────────────────────────────────────── */

.ovea-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: var(--button-padding-md);
	border-radius: var(--button-radius);
	font-family: var(--ovea-font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: var(--ovea-transition);
	white-space: nowrap;
}

.ovea-btn:focus-visible {
	outline: 2px solid var(--ovea-magenta);
	outline-offset: 3px;
}

.ovea-btn--primary {
	background: var(--button-bg-primary);
	color: var(--button-color-primary);
	box-shadow: var(--button-shadow-primary);
}

.ovea-btn--primary:hover {
	background: var(--button-bg-primary-hover);
	box-shadow: var(--button-shadow-primary-hover);
	transform: translateY(-2px);
	color: var(--button-color-primary);
}

.ovea-btn--secondary {
	background: rgba(255, 45, 155, 0.08);
	color: var(--ovea-plum);
	border: 1.5px solid rgba(255, 45, 155, 0.30);
}

.ovea-btn--secondary:hover {
	background: rgba(255, 45, 155, 0.16);
	border-color: var(--ovea-magenta);
	color: var(--ovea-plum);
	transform: translateY(-2px);
}

.ovea-btn--ghost {
	background: transparent;
	color: var(--ovea-magenta);
	border: 2px solid rgba(255, 45, 155, 0.40);
}

.ovea-btn--ghost:hover {
	background: rgba(255, 45, 155, 0.08);
	border-color: var(--ovea-magenta);
	color: var(--ovea-plum);
	transform: translateY(-2px);
}

.ovea-btn--sm {
	padding: var(--button-padding-sm);
	font-size: 0.8125rem;
}

.ovea-btn--lg {
	padding: var(--button-padding-lg);
	font-size: 1rem;
}

.ovea-btn--full {
	width: 100%;
}

.ovea-btn:active {
	transform: translateY(0) scale(0.98);
}

.ovea-btn__icon {
	display: inline-flex;
	align-items: center;
	transition: transform var(--ovea-transition-fast);
}

.ovea-btn:hover .ovea-btn__icon {
	transform: translateX(3px);
}