/*
Theme Name: SteeleLiving
Theme URI: https://steeleliving.shop
Author: SteeleLiving Botanical Team
Author URI: https://steeleliving.shop
Description: A high-end botanical lifestyle and WooCommerce storefront inspired by modern European interior living. Tailored specifically for premium houseplants, home greenery, and botanical design.
Version: 1.10.0
Requires at least: 6.0
Tested up to: 7.2
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: steeleliving
Tags: e-commerce, botanical, woocommerce, responsive-layout, modern, clean, custom-menu, featured-images
*/

/* ==========================================================================
   CSS CUSTOM PROPERTIES / DESIGN SYSTEM TOKENS
   ========================================================================== */
:root {
  /* Color Palette */
  --sl-color-bg: #FAF8F5;
  --sl-color-surface: #FFFFFF;
  --sl-color-surface-subtle: #F4F1EA;
  --sl-color-surface-alt: #EDE8DF;
  
  --sl-color-text-main: #191C19;
  --sl-color-text-muted: #5C635B;
  --sl-color-text-light: #878E86;
  --sl-color-text-inverse: #FFFFFF;
  
  --sl-color-primary: #1C231D;
  --sl-color-primary-hover: #2F3930;
  
  --sl-color-accent: #2D4D32;
  --sl-color-accent-soft: #E5EDE6;
  --sl-color-accent-hover: #3C6643;
  --sl-color-accent-light: #527A59;
  
  --sl-color-earth: #8C7862;
  --sl-color-earth-soft: #F2EDE6;
  
  --sl-color-border: rgba(25, 28, 25, 0.08);
  --sl-color-border-dark: rgba(25, 28, 25, 0.16);
  --sl-color-border-focus: #2D4D32;
  
  --sl-color-sale: #A44A3F;
  --sl-color-badge-bg: #EEF3EF;
  --sl-color-badge-text: #2D4D32;
  
  /* Typography */
  --sl-font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --sl-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  --sl-font-size-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --sl-font-size-sm: clamp(0.82rem, 0.8rem + 0.15vw, 0.88rem);
  --sl-font-size-base: clamp(0.95rem, 0.92rem + 0.2vw, 1.02rem);
  --sl-font-size-md: clamp(1.1rem, 1.05rem + 0.35vw, 1.25rem);
  --sl-font-size-lg: clamp(1.35rem, 1.25rem + 0.6vw, 1.65rem);
  --sl-font-size-xl: clamp(1.75rem, 1.55rem + 1vw, 2.3rem);
  --sl-font-size-2xl: clamp(2.2rem, 1.9rem + 1.6vw, 3.2rem);
  --sl-font-size-hero: clamp(2.6rem, 2.2rem + 2.4vw, 4.2rem);
  
  --sl-line-height-tight: 1.15;
  --sl-line-height-heading: 1.25;
  --sl-line-height-normal: 1.6;
  --sl-line-height-relaxed: 1.75;
  
  --sl-letter-spacing-tight: -0.02em;
  --sl-letter-spacing-normal: 0;
  --sl-letter-spacing-wide: 0.05em;
  --sl-letter-spacing-eyebrow: 0.12em;
  
  /* Layout & Spacing */
  --sl-container-max: 1440px;
  --sl-container-narrow: 1140px;
  --sl-container-pad: clamp(1.2rem, 0.9rem + 1.8vw, 3.5rem);
  
  --sl-section-gap: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  --sl-section-gap-sm: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  
  /* Borders & Radius */
  --sl-radius-sm: 4px;
  --sl-radius-md: 8px;
  --sl-radius-lg: 14px;
  --sl-radius-pill: 9999px;
  
  /* Shadows */
  --sl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --sl-shadow-md: 0 4px 14px rgba(25, 28, 25, 0.06), 0 1px 3px rgba(25, 28, 25, 0.03);
  --sl-shadow-lg: 0 12px 32px rgba(25, 28, 25, 0.08), 0 2px 6px rgba(25, 28, 25, 0.04);
  --sl-shadow-drawer: -4px 0 24px rgba(0, 0, 0, 0.12);
  
  /* Transitions */
  --sl-transition-fast: 0.18s cubic-bezier(0.2, 0, 0, 1);
  --sl-transition-base: 0.28s cubic-bezier(0.2, 0, 0, 1);
  --sl-transition-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* Header Heights */
  --sl-topbar-h: 38px;
  --sl-header-h: 82px;
  --sl-header-mobile-h: 68px;
}