/*
Theme Name: SolarPestGuard
Theme URI: https://solarpestguard.com
Author: SolarPestGuard
Author URI: https://solarpestguard.com
Description: A high-converting, mobile-first custom WooCommerce theme built for SolarPestGuard.com — a single-product store selling Solar-Powered Ultrasonic Pest & Rodent Spikes. Presentation-only architecture: all SEO, schema, and product data remain 100% native to WooCommerce/WordPress core so the theme can be swapped with zero SEO loss. Optimized for Core Web Vitals (zero CLS, lazy images, lightweight CSS/JS).
Version: 1.0.0
Requires at least: 6.0
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: solarpestguard
Tags: e-commerce, one-page, custom-colors, custom-menu, featured-images, threaded-comments, translation-ready
WC requires at least: 7.0
WC tested up to: 9.0
*/

/* =====================================================================
   SolarPestGuard — style.css
   ---------------------------------------------------------------------
   This file exists mainly to declare the theme header (above) and to
   host the DESIGN TOKENS (CSS custom properties) that the whole theme
   consumes. The bulk of component styling lives in assets/css/theme.css
   which is enqueued separately for cache control and clean separation.

   NOTHING here queries the database, outputs meta tags, or defines
   product data. Presentation only.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS  (single source of truth for the brand system)
   --------------------------------------------------------------------- */
:root {
    /* Brand palette */
    --spg-forest:        #1B4D3E; /* Deep Forest Green — headings, primary surfaces */
    --spg-forest-dark:   #143A2E; /* Darker forest for hovers / footer */
    --spg-charcoal:      #2C3539; /* Earthy Charcoal — body text */
    --spg-gold:          #F5A623; /* Bright Sun Gold — primary CTA */
    --spg-gold-dark:     #DB9111; /* Gold hover state */
    --spg-offwhite:      #F8F9FA; /* Clean off-white background */
    --spg-white:         #FFFFFF;

    /* Semantic tokens */
    --spg-bg:            var(--spg-offwhite);
    --spg-surface:       var(--spg-white);
    --spg-text:          var(--spg-charcoal);
    --spg-text-muted:    #5A656B;
    --spg-heading:       var(--spg-forest);
    --spg-border:        #E4E7EA;
    --spg-success:       #2E7D32;
    --spg-star:          #F5A623;

    /* Primary CTA */
    --spg-cta-bg:        var(--spg-gold);
    --spg-cta-bg-hover:  var(--spg-gold-dark);
    --spg-cta-text:      #1A1200;

    /* Typography */
    --spg-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --spg-font-head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --spg-fs-base:   1rem;      /* 16px */
    --spg-lh-base:   1.6;
    --spg-fw-normal: 400;
    --spg-fw-medium: 500;
    --spg-fw-semi:   600;
    --spg-fw-bold:   700;
    --spg-fw-black:  800;

    /* Fluid type scale (clamp keeps CLS at zero across breakpoints) */
    --spg-h1: clamp(2rem, 1.4rem + 3vw, 3.25rem);
    --spg-h2: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
    --spg-h3: clamp(1.25rem, 1.05rem + 1vw, 1.6rem);

    /* Spacing scale */
    --spg-space-1: 0.25rem;
    --spg-space-2: 0.5rem;
    --spg-space-3: 0.75rem;
    --spg-space-4: 1rem;
    --spg-space-5: 1.5rem;
    --spg-space-6: 2rem;
    --spg-space-7: 3rem;
    --spg-space-8: 4rem;
    --spg-space-9: 6rem;

    /* Layout */
    --spg-container:  1200px;
    --spg-container-narrow: 820px;
    --spg-radius:     12px;
    --spg-radius-sm:  8px;
    --spg-radius-pill: 999px;

    /* Elevation */
    --spg-shadow-sm: 0 1px 2px rgba(20, 58, 46, 0.06), 0 1px 3px rgba(20, 58, 46, 0.08);
    --spg-shadow-md: 0 4px 12px rgba(20, 58, 46, 0.08), 0 2px 4px rgba(20, 58, 46, 0.06);
    --spg-shadow-lg: 0 12px 32px rgba(20, 58, 46, 0.12), 0 4px 8px rgba(20, 58, 46, 0.06);

    /* Motion */
    --spg-transition: 180ms ease;

    /* Header height (used to offset sticky elements — prevents CLS) */
    --spg-header-h: 68px;
}

/*
   The remainder of the visual system is in assets/css/theme.css.
   WordPress requires style.css to exist and hold the header; keeping
   component CSS separate lets us version/cache it independently.
*/