/*
Theme Name: HomeWallTrends Child
Theme URI: https://homewalltrends.com
Description: Custom Kadence child theme for HomeWallTrends — optimized for Pinterest traffic, AdSense revenue, and Core Web Vitals performance. Features Pinterest-style layouts, sticky sidebar, auto Table of Contents, and smart ad placements.
Author: HomeWallTrends
Author URI: https://homewalltrends.com
Template: kadence
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: homewalltrends-child
Tags: blog, pinterest, home-decor, kadence-child
*/

/* ==========================================================================
   DESIGN SYSTEM — CSS Custom Properties
   ========================================================================== */

:root {
    /* ---- Colors ---- */
    --hwt-primary:        #111111;
    --hwt-secondary:      #6B7280;
    --hwt-accent:         #E11D48;
    --hwt-accent-hover:   #BE123C;
    --hwt-accent-light:   #FFF1F2;
    --hwt-bg:             #FFFFFF;
    --hwt-bg-alt:         #F9FAFB;
    --hwt-bg-dark:        #111827;
    --hwt-border:         #E5E7EB;
    --hwt-border-light:   #F3F4F6;
    --hwt-white:          #FFFFFF;
    --hwt-overlay:        rgba(0, 0, 0, 0.45);

    /* ---- Typography ---- */
    --hwt-font-heading:   'Poppins', sans-serif;
    --hwt-font-body:      'Inter', sans-serif;
    --hwt-fw-regular:     400;
    --hwt-fw-medium:      500;
    --hwt-fw-semibold:    600;
    --hwt-fw-bold:        700;
    --hwt-lh-tight:       1.3;
    --hwt-lh-normal:      1.6;
    --hwt-lh-relaxed:     1.8;

    /* ---- Spacing ---- */
    --hwt-space-xs:       0.25rem;
    --hwt-space-sm:       0.5rem;
    --hwt-space-md:       1rem;
    --hwt-space-lg:       1.5rem;
    --hwt-space-xl:       2rem;
    --hwt-space-2xl:      3rem;
    --hwt-space-3xl:      4rem;
    --hwt-space-4xl:      6rem;

    /* ---- Layout ---- */
    --hwt-max-width:      1200px;
    --hwt-content-width:  750px;
    --hwt-sidebar-width:  300px;
    --hwt-gap:            2rem;

    /* ---- Borders & Radius ---- */
    --hwt-radius-sm:      0.375rem;
    --hwt-radius-md:      0.5rem;
    --hwt-radius-lg:      0.75rem;
    --hwt-radius-xl:      1rem;
    --hwt-radius-full:    9999px;

    /* ---- Shadows ---- */
    --hwt-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
    --hwt-shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --hwt-shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --hwt-shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --hwt-shadow-card:    0 1px 3px rgba(0,0,0,0.06), 0 6px 16px rgba(0,0,0,0.04);

    /* ---- Transitions ---- */
    --hwt-transition:     all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --hwt-transition-fast: all 0.15s ease;
}