/**
 * Foundation: CSS Variables
 * Usage: Global custom properties used across all components
 * Dependencies: None (foundational)
 * Last Updated: 2025-06-25
 * 
 * This file consolidates all CSS custom properties from the previous scattered files
 * into one centralized location for easy maintenance.
 */

:root {
  /*============================================================================
    BRAND COLORS
  ============================================================================*/
  --primary-color: #d7040f;
  --primary-dark: #b5030d;
  --secondary-color: #d9020e;
  
  /*============================================================================
    TEXT COLORS
  ============================================================================*/
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #6b6b6b;
  --text-light: #8a8a8a;
  
  /*============================================================================
    ACCENT COLORS
  ============================================================================*/
  --accent-red: #d7040f;
  --accent-black: #1a1a1a;
  --accent-dark: #2d2d2d;
  
  /*============================================================================
    BACKGROUND COLORS
  ============================================================================*/
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  --bg-medium: #f1f3f4;
  --bg-dark: #2d2d2d;
  --footer-bg: #1a1a1a;
  --footer-dark: #0d0d0d;
  
  /*============================================================================
    BORDER COLORS
  ============================================================================*/
  --border-light: #e8e8e8;
  --border-medium: #d0d0d0;
  --border-dark: #999999;
  
  /*============================================================================
    LAYOUT & SPACING
  ============================================================================*/
  --container-max-width: 1200px;
  --border-radius: 4px;
  --border-radius-large: 8px;
  --border-radius-xl: 12px;
  --transition: all 0.3s ease;
  
  /*============================================================================
    TYPOGRAPHY
  ============================================================================*/
  --font-family-base: "Inter-Light", sans-serif;
  --font-family-medium: "Inter-Medium", sans-serif;
  --font-family-bold: "Inter-Bold", sans-serif;
  
  /*============================================================================
    COMPONENT SPECIFIC VARIABLES
  ============================================================================*/
  
  /* Header */
  --header-bg: #ffffff;
  --header-padding: 15px 0;
  --header-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  --header-border: rgba(26, 26, 26, 0.1);
  --logo-max-height: 40px;
  --nav-item-spacing: 25px;
  
  /* Search */
  --search-border-radius: 25px;
  
  /* Buttons */
  --button-radius: 6px;
  --button-padding: 8px 30px;
  
  /* Cards & Products */
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
  --card-border-radius: 8px;
  --product-image-height: 250px;
  --product-padding: 20px;
  
  /* WooCommerce */
  --wc-grid-gap: 25px;
  --wc-grid-gap-mobile: 20px;
  --wc-qty-width: 120px;
  --wc-qty-height: 45px;
  --wc-qty-button-width: 35px;
  
  /* Archive Pages */
  --archive-hero-bg: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  --archive-grid-gap: 30px;
  --archive-grid-gap-mobile: 20px;
  
  /* Brands Showcase */
  --brands-card-radius: 16px;
  --brands-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --brands-card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
  --brands-grid-gap: 30px;
  --brands-grid-gap-mobile: 20px;
  --brands-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  /*============================================================================
    RESPONSIVE BREAKPOINTS (for reference)
  ============================================================================*/
  /* Mobile: max-width: 768px */
  /* Tablet: 769px - 1024px */
  /* Desktop: 1025px+ */
  
  /*============================================================================
    MOBILE OVERRIDES
  ============================================================================*/
  @media (max-width: 768px) {
    :root {
      --header-padding: 12px 0;
      --logo-max-height: 36px;
      --nav-item-spacing: 15px;
      --product-padding: 16px;
      --wc-qty-button-width: 44px;
      --wc-grid-gap: var(--wc-grid-gap-mobile);
      --archive-grid-gap: var(--archive-grid-gap-mobile);
      --brands-grid-gap: var(--brands-grid-gap-mobile);
    }
  }
}