/*
 * ============================================================
 * TOP ENZYMES BRAND — PALETTE SYSTEM
 * Four palettes as CSS variables. Switch via body class
 * (set automatically by the Customizer setting in PHP).
 * Dark-mode is independent: applied via [data-theme="dark"]
 * by the toggle script in theme-toggle.js.
 * ============================================================
 */

/* ============================================================
   PALETTE A — MODERN WELLNESS (default)
   Cream + deep green. Hims/Function Health vibe.
   ============================================================ */
body.te-palette-wellness {
	--te-bg: #f5f2ec;
	--te-bg-warm: #ebe5d8;
	--te-surface: #ffffff;
	--te-surface-soft: #faf8f4;
	--te-ink: #0d1f17;
	--te-ink-soft: #1a3326;
	--te-ink-mid: #4a5d52;
	--te-ink-muted: #7a8a82;
	--te-line: #d8d2c4;
	--te-line-soft: #e6e1d4;
	--te-accent: #1f7a4d;
	--te-accent-bright: #2db573;
	--te-accent-deep: #134d2f;
	--te-accent-tint: #e8f3ee;
	--te-shadow-sm: 0 1px 2px rgba(13,31,23,0.04), 0 4px 12px rgba(13,31,23,0.05);
	--te-shadow-md: 0 1px 3px rgba(13,31,23,0.06), 0 12px 32px -8px rgba(13,31,23,0.12);
}

body.te-palette-wellness[data-theme="dark"] {
	--te-bg: #0a1410;
	--te-bg-warm: #0f1a16;
	--te-surface: #131e1a;
	--te-surface-soft: #182522;
	--te-ink: #ecf3ee;
	--te-ink-soft: #d2e2d8;
	--te-ink-mid: #98aca2;
	--te-ink-muted: #6a7a72;
	--te-line: #1f2a26;
	--te-line-soft: #18221e;
	--te-accent: #2db573;
	--te-accent-bright: #4ad991;
	--te-accent-deep: #1a8550;
	--te-accent-tint: rgba(45,181,115,0.12);
	--te-shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.5);
	--te-shadow-md: 0 1px 3px rgba(0,0,0,0.5), 0 12px 32px -8px rgba(0,0,0,0.6);
}

/* ============================================================
   PALETTE B — MODERN APOTHECARY
   Warm cream + rust. Editorial / pharmacy / 2026 boutique.
   ============================================================ */
body.te-palette-apothecary {
	--te-bg: #f7f3ec;
	--te-bg-warm: #f0e9dc;
	--te-surface: #ffffff;
	--te-surface-soft: #fcfaf5;
	--te-ink: #1a3d2f;
	--te-ink-soft: #2a4d3f;
	--te-ink-mid: #4a6b50;
	--te-ink-muted: #7a8a82;
	--te-line: #d8d0c2;
	--te-line-soft: #e6dfd0;
	--te-accent: #b85a3a;
	--te-accent-bright: #d68864;
	--te-accent-deep: #8f4528;
	--te-accent-tint: #f5e7e0;
	--te-shadow-sm: 0 1px 2px rgba(26,61,47,0.04), 0 4px 12px rgba(26,61,47,0.05);
	--te-shadow-md: 0 1px 3px rgba(26,61,47,0.06), 0 12px 32px -8px rgba(26,61,47,0.12);
}

body.te-palette-apothecary[data-theme="dark"] {
	--te-bg: #1a1612;
	--te-bg-warm: #221d18;
	--te-surface: #28221c;
	--te-surface-soft: #2e2820;
	--te-ink: #f7f3ec;
	--te-ink-soft: #e0d8c8;
	--te-ink-mid: #a8a094;
	--te-ink-muted: #707068;
	--te-line: #2e2820;
	--te-line-soft: #28221c;
	--te-accent: #d68864;
	--te-accent-bright: #e89d7a;
	--te-accent-deep: #a86840;
	--te-accent-tint: rgba(214,136,100,0.12);
	--te-shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.5);
	--te-shadow-md: 0 1px 3px rgba(0,0,0,0.5), 0 12px 32px -8px rgba(0,0,0,0.6);
}

/* ============================================================
   PALETTE C — DARK PREMIUM
   Native dark. Midnight + copper. Maximum agentic-tech feel.
   When this palette is active, "light mode" is also moody.
   ============================================================ */
body.te-palette-premium {
	--te-bg: #0a0e0d;
	--te-bg-warm: #131817;
	--te-surface: #181f1d;
	--te-surface-soft: #1c2422;
	--te-ink: #f4ede0;
	--te-ink-soft: #d9d2c4;
	--te-ink-mid: #b0a89a;
	--te-ink-muted: #8a847a;
	--te-line: #232a28;
	--te-line-soft: #1c2422;
	--te-accent: #c97b4f;
	--te-accent-bright: #e89668;
	--te-accent-deep: #8e5235;
	--te-accent-tint: rgba(201,123,79,0.1);
	--te-shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.5);
	--te-shadow-md: 0 1px 3px rgba(0,0,0,0.5), 0 12px 32px -8px rgba(0,0,0,0.6);
}

/* When user toggles "light" on the dark-premium palette, soften it */
body.te-palette-premium[data-theme="light"] {
	--te-bg: #f0ede5;
	--te-bg-warm: #e6e0d4;
	--te-surface: #ffffff;
	--te-surface-soft: #faf8f3;
	--te-ink: #1a1612;
	--te-ink-soft: #2a2620;
	--te-ink-mid: #5a5248;
	--te-ink-muted: #8a8478;
	--te-line: #d0c8b8;
	--te-line-soft: #e0d8c8;
	--te-accent: #8e5235;
	--te-accent-bright: #b87045;
	--te-accent-deep: #6a3a22;
	--te-accent-tint: #f5e8dc;
}

/* ============================================================
   PALETTE D — SOFT FUTURISM
   Slate + neon mint. Cool, smart, agentic-future.
   ============================================================ */
body.te-palette-futurism {
	--te-bg: #f0f3f5;
	--te-bg-warm: #e6ecef;
	--te-surface: #ffffff;
	--te-surface-soft: #f8fafb;
	--te-ink: #0a1f2c;
	--te-ink-soft: #1c3340;
	--te-ink-mid: #4a6072;
	--te-ink-muted: #7a8a98;
	--te-line: #d0d8de;
	--te-line-soft: #dfe5e9;
	--te-accent: #00a896;
	--te-accent-bright: #00d4b4;
	--te-accent-deep: #00786c;
	--te-accent-tint: #d8f5ef;
	--te-shadow-sm: 0 1px 2px rgba(10,31,44,0.04), 0 4px 12px rgba(10,31,44,0.06);
	--te-shadow-md: 0 1px 3px rgba(10,31,44,0.07), 0 12px 32px -8px rgba(10,31,44,0.13);
}

body.te-palette-futurism[data-theme="dark"] {
	--te-bg: #0a141c;
	--te-bg-warm: #0f1e28;
	--te-surface: #15212c;
	--te-surface-soft: #1a2832;
	--te-ink: #e8f0f5;
	--te-ink-soft: #c8d4dc;
	--te-ink-mid: #8a9aa8;
	--te-ink-muted: #5a6878;
	--te-line: #1f2c38;
	--te-line-soft: #18242e;
	--te-accent: #00d4b4;
	--te-accent-bright: #2eebd0;
	--te-accent-deep: #008070;
	--te-accent-tint: rgba(0,212,180,0.12);
	--te-shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.5);
	--te-shadow-md: 0 1px 3px rgba(0,0,0,0.5), 0 12px 32px -8px rgba(0,0,0,0.6);
}

/* ============================================================
   GENERIC HOOKS — make any theme respond to the variables
   These selectors apply minimal brand colors to common
   WordPress + WooCommerce elements. Theme CSS will refine.
   ============================================================ */
body[class*="te-palette-"] {
	background: var(--te-bg);
	color: var(--te-ink);
}

body[class*="te-palette-"] a {
	color: var(--te-accent);
}

body[class*="te-palette-"] .button-primary,
body[class*="te-palette-"] .wp-block-button__link,
body[class*="te-palette-"] button.single_add_to_cart_button,
body[class*="te-palette-"] .woocommerce #respond input#submit,
body[class*="te-palette-"] .woocommerce a.button,
body[class*="te-palette-"] .woocommerce button.button {
	background-color: var(--te-ink) !important;
	color: var(--te-bg) !important;
	border-color: var(--te-ink) !important;
	border-radius: 999px !important;
	padding: 12px 24px !important;
	font-weight: 600 !important;
	transition: all .25s ease !important;
}

body[class*="te-palette-"] .button-primary:hover,
body[class*="te-palette-"] .wp-block-button__link:hover,
body[class*="te-palette-"] button.single_add_to_cart_button:hover,
body[class*="te-palette-"] .woocommerce a.button:hover,
body[class*="te-palette-"] .woocommerce button.button:hover {
	background-color: var(--te-accent) !important;
	border-color: var(--te-accent) !important;
}

/* WooCommerce price */
body[class*="te-palette-"] .woocommerce .price,
body[class*="te-palette-"] .woocommerce-Price-amount {
	color: var(--te-ink) !important;
	font-weight: 600;
}

/* Cards / containers — soft surface */
body[class*="te-palette-"] .woocommerce ul.products li.product,
body[class*="te-palette-"] .post,
body[class*="te-palette-"] .page {
	background: var(--te-surface);
}

/* Smooth palette transitions */
body[class*="te-palette-"],
body[class*="te-palette-"] * {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}