/*
Theme Name: Verdora
Theme URI: https://example.com/verdora
Author: Your Studio Name
Author URI: https://example.com
Description: A premium, mobile-first WooCommerce theme for plant-based body-care and wellness brands. Built for Elementor Pro, with an ingredient-first design language: soft sage and honey palette, Fraunces display serif, and a signature "Ingredient Ledger" component for storytelling around product formulation. Fully responsive, AJAX cart/search/wishlist/compare, quick view, sticky buy box, product bundles, and Core Web Vitals-conscious asset loading.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: verdora
Tags: e-commerce, custom-menu, custom-logo, editor-style, featured-images, full-width-template, threaded-comments, translation-ready, block-styles, wide-blocks
WC requires at least: 8.0
WC tested up to: 9.0

This theme, including all code, is released under the GPL v2 or later.
No third-party copyrighted assets, images, text, logos, or branding from any
reference site are included in this theme. All copy, imagery placeholders,
and visual identity are original to this project.
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Every component in this theme should reference these variables rather
   than hard-coding values, so the whole storefront can be reskinned by
   editing this block alone.
   ========================================================================== */

:root {
    /* ---- Color: brand palette ---- */
    --verdora-ivory:      #FAF9F4; /* page background */
    --verdora-forest:     #1F2E23; /* primary text */
    --verdora-forest-70:  #1F2E23B3;
    --verdora-sage:       #6E8C6A; /* primary brand / buttons / links */
    --verdora-sage-dark:  #55704F; /* hover state for sage */
    --verdora-honey:      #D9A441; /* accent: sale badges, ratings, CTAs */
    --verdora-honey-dark: #BE8A2E;
    --verdora-clay-pink:  #D9B8A8; /* secondary accent, soft backgrounds */
    --verdora-mist:       #E7EBE3; /* dividers, subtle card backgrounds */
    --verdora-white:      #FFFFFF;
    --verdora-error:      #B3462C;
    --verdora-success:    #4C7A56;

    /* ---- Color: semantic aliases (use these in components) ---- */
    --color-bg:            var(--verdora-ivory);
    --color-bg-alt:        var(--verdora-mist);
    --color-surface:       var(--verdora-white);
    --color-text:          var(--verdora-forest);
    --color-text-muted:    var(--verdora-forest-70);
    --color-primary:       var(--verdora-sage);
    --color-primary-hover: var(--verdora-sage-dark);
    --color-accent:        var(--verdora-honey);
    --color-accent-hover:  var(--verdora-honey-dark);
    --color-border:        #DDE3D8;

    /* ---- Typography ---- */
    --font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
    --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
    --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --fs-h4: 1.25rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-caption: 0.75rem;

    --lh-tight: 1.15;
    --lh-heading: 1.25;
    --lh-body: 1.6;

    /* ---- Spacing scale (4px base) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* ---- Layout ---- */
    --container-max: 1320px;
    --container-pad: clamp(1rem, 4vw, 2.5rem);

    /* ---- Radius & elevation ---- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(31, 46, 35, 0.06);
    --shadow-md: 0 8px 24px rgba(31, 46, 35, 0.08);
    --shadow-lg: 0 20px 48px rgba(31, 46, 35, 0.12);

    /* ---- Motion ---- */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 450ms;

    /* ---- Z-index scale ---- */
    --z-header: 100;
    --z-drawer: 200;
    --z-modal: 300;
    --z-toast: 400;
}

/* Respect reduced-motion preference across the whole theme */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   2. BASE / RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: var(--lh-heading);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
    font-weight: 600;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--space-4); }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--color-primary-hover); }

/* Visible keyboard focus everywhere — accessibility floor, non-negotiable */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--verdora-honey);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

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

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--color-primary);
    color: var(--verdora-white);
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    color: var(--verdora-white);
    box-shadow: var(--shadow-md);
}

.btn-accent {
    background: var(--color-accent);
    color: var(--verdora-forest);
}
.btn-accent:hover { background: var(--color-accent-hover); }

.btn-outline {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-outline:hover {
    background: var(--color-primary);
    color: var(--verdora-white);
}

/* ==========================================================================
   4. SIGNATURE COMPONENT: INGREDIENT LEDGER
   Used on the homepage "Featured Ingredients" section and the product
   page "Ingredients" tab. Apothecary-index-card feel: mono INCI name,
   plain-English name, and a thin leaf-vein divider between entries.
   ========================================================================== */

.ingredient-ledger {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
}

.ingredient-ledger__entry {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
}

.ingredient-ledger__name {
    font-family: var(--font-display);
    font-size: 1.125rem;
}

.ingredient-ledger__inci {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ingredient-ledger__divider {
    position: relative;
    height: 1px;
    background: var(--color-border);
    margin-inline: var(--space-6);
}
/* leaf-vein SVG sits centered on the divider line as the signature flourish */
.ingredient-ledger__divider::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 12px;
    transform: translate(-50%, -50%);
    background-color: var(--verdora-sage);
    -webkit-mask: url("assets/images/leaf-vein.svg") center / contain no-repeat;
    mask: url("assets/images/leaf-vein.svg") center / contain no-repeat;
}

/* ==========================================================================
   Remaining sections (header, mega menu, hero, product cards, cart drawer,
   single product layout, category filters, footer, WooCommerce overrides,
   responsive breakpoints, print styles) are intentionally built out in
   their own dedicated stylesheets under /assets/css/ and enqueued via
   functions.php, to keep this root style.css focused on tokens + base
   elements per WordPress theme conventions (style.css must exist with
   the header above, but a monolithic 5,000-line file is an anti-pattern).
   ========================================================================== */