/**
 * Compiled Theme Stylesheet (Frontend) - Green Haven Dubai Brand
 */

:root {
	--gh-color-primary-hsl: 146, 44%, 18%;
	--gh-color-accent-hsl: 37, 60%, 56%;
	--gh-color-background-hsl: 210, 20%, 98%;
	--gh-color-surface-hsl: 0, 0%, 100%;
	--gh-color-border-hsl: 220, 14%, 92%;
	--gh-color-foreground-hsl: 220, 39%, 7%;
	--gh-color-muted-hsl: 215, 16%, 47%;
	
	--gh-radius-pill: 100px;
	--gh-radius-card: 12px;
	--gh-radius-badge: 8px;
	
	--gh-focus-outline: 2px solid hsl(var(--gh-color-accent-hsl));
	--gh-focus-offset: 2px;
	
	--gh-transition-speed: 200ms;
	--gh-transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: var(--gh-focus-outline) !important;
	outline-offset: var(--gh-focus-offset) !important;
	box-shadow: 0 0 0 3px rgba(210, 159, 77, 0.2) !important;
}

a, button {
	transition: color var(--gh-transition-speed) var(--gh-transition-bezier),
	            background-color var(--gh-transition-speed) var(--gh-transition-bezier),
	            border-color var(--gh-transition-speed) var(--gh-transition-bezier),
	            transform var(--gh-transition-speed) var(--gh-transition-bezier);
}

.gh-brand-circle {
	transition: transform var(--gh-transition-speed) var(--gh-transition-bezier);
}
.gh-brand-circle:hover {
	transform: scale(1.05);
}

.gh-utility-icon {
	transition: opacity var(--gh-transition-speed) var(--gh-transition-bezier);
}
.gh-utility-icon:hover {
	opacity: 0.75;
}

.gh-quantity-selector {
	transition: border-color var(--gh-transition-speed) var(--gh-transition-bezier);
}
.gh-quantity-selector:focus-within {
	border-color: hsl(var(--gh-color-primary-hsl)) !important;
}

.gh-qty-input::-webkit-outer-spin-button,
.gh-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.gh-qty-input {
	-moz-appearance: textfield;
}

.gh-qty-btn {
	transition: color var(--gh-transition-speed) var(--gh-transition-bezier),
	            opacity var(--gh-transition-speed) var(--gh-transition-bezier);
}
.gh-qty-btn:hover {
	color: hsl(var(--gh-color-primary-hsl)) !important;
}

.btn-outline, .btn-solid {
	transition: background-color var(--gh-transition-speed) var(--gh-transition-bezier),
	            color var(--gh-transition-speed) var(--gh-transition-bezier),
	            border-color var(--gh-transition-speed) var(--gh-transition-bezier),
	            transform var(--gh-transition-speed) var(--gh-transition-bezier),
	            box-shadow var(--gh-transition-speed) var(--gh-transition-bezier);
}

.btn-solid:hover {
	background-color: hsl(146, 44%, 12%) !important;
	box-shadow: 0 4px 6px -1px rgba(26, 67, 41, 0.2), 0 2px 4px -1px rgba(26, 67, 41, 0.1);
}

.btn-outline:hover {
	background-color: hsl(146, 44%, 18%) !important;
	color: hsl(var(--gh-color-surface-hsl)) !important;
}

.gh-wishlist-toggle {
	transition: border-color var(--gh-transition-speed) var(--gh-transition-bezier),
	            transform var(--gh-transition-speed) var(--gh-transition-bezier);
}
.gh-wishlist-toggle:hover {
	border-color: hsl(var(--gh-color-primary-hsl)) !important;
	transform: scale(1.05);
}

.gh-highlight-card {
	transition: transform var(--gh-transition-speed) var(--gh-transition-bezier),
	            border-color var(--gh-transition-speed) var(--gh-transition-bezier);
}
.gh-highlight-card:hover {
	transform: translateY(-2px);
	border-color: hsl(var(--gh-color-primary-hsl)) !important;
}

body {
	margin: 0;
	background-color: hsl(var(--gh-color-background-hsl));
	color: hsl(var(--gh-color-foreground-hsl));
	text-align: start;
}

.style-card {
	background-color: hsl(var(--gh-color-surface-hsl));
	transition: transform var(--gh-transition-speed) var(--gh-transition-bezier),
	            box-shadow var(--gh-transition-speed) var(--gh-transition-bezier);
}
.style-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: dark) {
	:root {
		--gh-color-background-hsl: 220, 39%, 7%;
		--gh-color-surface-hsl: 220, 39%, 10%;
		--gh-color-foreground-hsl: 210, 20%, 98%;
		--gh-color-border-hsl: 220, 19%, 16%;
		
		--wp--preset--color--background: #0f1219 !important;
		--wp--preset--color--foreground: #f8fafc !important;
		--wp--preset--color--surface: #121824 !important;
		--wp--preset--color--border: #1e293b !important;
		--wp--preset--color--muted: #94a3b8 !important;
	}
	body {
		background-color: #0f1219;
		color: #f8fafc;
	}
}

body.is-dark-theme {
	--gh-color-background-hsl: 220, 39%, 7%;
	--gh-color-surface-hsl: 220, 39%, 10%;
	--gh-color-foreground-hsl: 210, 20%, 98%;
	--gh-color-border-hsl: 220, 19%, 16%;
	
	--wp--preset--color--background: #0f1219 !important;
	--wp--preset--color--foreground: #f8fafc !important;
	--wp--preset--color--surface: #121824 !important;
	--wp--preset--color--border: #1e293b !important;
	--wp--preset--color--muted: #94a3b8 !important;
	
	background-color: #0f1219;
	color: #f8fafc;
}