/*
Theme Name: GreenHaven Premium DXB
Theme URI: https://greenhaven.ae
Description: Luxurious, botanical, editorial child theme for GreenHaven Premium DXB — a Dubai-based premium indoor plants, planters, and landscaping brand. Built on Hello Elementor with WooCommerce + Elementor Pro (Theme Builder). Includes 8 custom Elementor widgets, a Theme Options panel, and full design-token system with light/dark support.
Author: GreenHaven Studio
Author URI: https://greenhaven.ae
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: greenhaven-premium
Tags: e-commerce, elementor, woocommerce, custom-colors, translation-ready, block-styles, wide-blocks
*/

/* =====================================================================
   GreenHaven Design System — HSL semantic tokens (light + dark)
   All colors expressed as HSL so Elementor Global Colors + CSS filters
   can derive tints/shades. Change once here, propagates everywhere.
   ===================================================================== */

:root {
    /* --- Brand palette (HSL channels, no hsl() wrapper for compositing) --- */
    --gh-primary-h: 147; --gh-primary-s: 36%; --gh-primary-l: 18%;   /* deep botanical green */
    --gh-accent-h: 33;   --gh-accent-s: 38%;  --gh-accent-l: 52%;    /* warm brass / gold */
    --gh-bg-h: 44;       --gh-bg-s: 40%;      --gh-bg-l: 96%;        /* cream / off-white */
    --gh-fg-h: 60;       --gh-fg-s: 8%;       --gh-fg-l: 10%;        /* near-black */
    --gh-muted-h: 104;   --gh-muted-s: 12%;   --gh-muted-l: 56%;     /* sage */
    --gh-border-h: 42;   --gh-border-s: 30%;  --gh-border-l: 86%;    /* soft beige */

    /* --- Semantic tokens (what components actually reference) --- */
    --gh-primary:        hsl(var(--gh-primary-h) var(--gh-primary-s) var(--gh-primary-l));
    --gh-primary-hover:  hsl(var(--gh-primary-h) var(--gh-primary-s) 24%);
    --gh-primary-soft:   hsl(var(--gh-primary-h) 20% 94%);
    --gh-accent:         hsl(var(--gh-accent-h) var(--gh-accent-s) var(--gh-accent-l));
    --gh-accent-hover:   hsl(var(--gh-accent-h) var(--gh-accent-s) 44%);
    --gh-bg:             hsl(var(--gh-bg-h) var(--gh-bg-s) var(--gh-bg-l));
    --gh-surface:        hsl(var(--gh-bg-h) 44% 99%);
    --gh-fg:             hsl(var(--gh-fg-h) var(--gh-fg-s) var(--gh-fg-l));
    --gh-fg-soft:        hsl(var(--gh-fg-h) 6% 34%);
    --gh-muted:          hsl(var(--gh-muted-h) var(--gh-muted-s) var(--gh-muted-l));
    --gh-border:         hsl(var(--gh-border-h) var(--gh-border-s) var(--gh-border-l));
    --gh-on-primary:     hsl(var(--gh-bg-h) 44% 98%);
    --gh-sale:           hsl(4 64% 52%);

    /* --- Typography --- */
    --gh-font-head: 'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --gh-font-body: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gh-fw-body: 400;
    --gh-fw-med: 500;
    --gh-fw-semi: 600;

    /* --- Spacing scale (4/8/12/16/24/32/48/64/96) --- */
    --gh-sp-1: 4px;  --gh-sp-2: 8px;  --gh-sp-3: 12px; --gh-sp-4: 16px;
    --gh-sp-6: 24px; --gh-sp-8: 32px; --gh-sp-12: 48px; --gh-sp-16: 64px; --gh-sp-24: 96px;

    /* --- Radius --- */
    --gh-radius: 8px;
    --gh-radius-card: 16px;
    --gh-radius-pill: 999px;

    /* --- Shadows (soft, layered, low-opacity) --- */
    --gh-shadow-sm: 0 1px 2px hsl(var(--gh-fg-h) 8% 10% / 0.05);
    --gh-shadow-md: 0 4px 12px hsl(var(--gh-fg-h) 8% 10% / 0.06), 0 1px 3px hsl(var(--gh-fg-h) 8% 10% / 0.05);
    --gh-shadow-lg: 0 18px 48px hsl(var(--gh-fg-h) 8% 10% / 0.10), 0 6px 16px hsl(var(--gh-fg-h) 8% 10% / 0.06);

    /* --- Layout --- */
    --gh-container: 1240px;
    --gh-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode: flip lightness on the same hues. Toggled by prefers-color-scheme
   or a data-theme="dark" attribute the theme JS can set for a manual switch. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --gh-primary-l: 42%;
        --gh-bg: hsl(150 14% 8%);
        --gh-surface: hsl(150 12% 12%);
        --gh-fg: hsl(44 30% 94%);
        --gh-fg-soft: hsl(44 10% 72%);
        --gh-muted: hsl(104 8% 48%);
        --gh-border: hsl(150 10% 20%);
        --gh-primary-soft: hsl(150 14% 16%);
        --gh-on-primary: hsl(44 30% 96%);
    }
}

:root[data-theme="dark"] {
    --gh-primary-l: 42%;
    --gh-bg: hsl(150 14% 8%);
    --gh-surface: hsl(150 12% 12%);
    --gh-fg: hsl(44 30% 94%);
    --gh-fg-soft: hsl(44 10% 72%);
    --gh-muted: hsl(104 8% 48%);
    --gh-border: hsl(150 10% 20%);
    --gh-primary-soft: hsl(150 14% 16%);
    --gh-on-primary: hsl(44 30% 96%);
}

/* Base — Hello Elementor stays minimal; we set the editorial baseline here. */
body {
    background-color: var(--gh-bg);
    color: var(--gh-fg);
    font-family: var(--gh-font-body);
    font-weight: var(--gh-fw-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gh-font-head);
    color: var(--gh-fg);
    line-height: 1.12;
    letter-spacing: -0.01em;
    font-weight: var(--gh-fw-semi);
}

a { color: var(--gh-primary); text-decoration: none; transition: color var(--gh-transition); }
a:hover { color: var(--gh-accent); }

/* Accessibility: visible focus for keyboard users (WCAG AA) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--gh-accent);
    outline-offset: 2px;
    border-radius: var(--gh-radius);
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: -9999px; top: 0;
    z-index: 100000; padding: 12px 20px;
    background: var(--gh-primary); color: var(--gh-on-primary);
    border-radius: 0 0 var(--gh-radius) 0;
}
.skip-link:focus { left: 0; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}