/**
 * Style Variables
 * Global variables for colors, spacing, breakpoints
 * @package SHPGL\Product\Categories\Assets
 * @since 1.0.0
 */

// ========== Core Upgrade 1: Dynamic Theme Color Configuration (WP & Elementor Compatible + SCSS Syntax + Color Controls Working) ==========
// Rule 1: Static Base Colors (used for SCSS functions like darken/lighten) – must be HEX values, cannot be modified
// ========== Core Upgrade 1: Dynamic Theme Color Configuration (WP & Elementor Compatible + Fixed Compile Errors + Dynamic Dark Mode Support) ==========
// Static base colors for SCSS functions – must be HEX values
$color-primary-base: #0073aa !default;
$color-secondary-base: #e63946 !default;

// Core Fix 1: Add missing variables to resolve compilation errors (static values for SCSS preprocessor)
$color-primary-dark: darken($color-primary-base, 15%) !default;
$color-secondary-dark: darken($color-secondary-base, 15%) !default;

// Runtime dynamic theme colors (Elementor global color integration, correct implementation)
$color-primary: rgba(var(--e-global-color-primary), 1, $color-primary-base) !default;
$color-secondary: rgba(var(--e-global-color-secondary), 1, $color-secondary-base) !default;

// New Optimization: Dynamic dark mode CSS variables (runtime生效, auto-sync when Elementor global colors change)
:root {
  --shpgl-color-primary-dark: #{$color-primary-dark};
  --shpgl-color-secondary-dark: #{$color-secondary-dark};
}

// Rule 3: Text & Background Colors (Original code unchanged)
$color-text: #222 !default;
$color-text-light: #666 !default;
$color-bg: #fff !default;
$color-bg-light: #f9f9f9 !default;

// Color Variables - Skeleton Screen (Original code unchanged)
$color-skeleton: #f0f0f0 !default;
$color-skeleton-light: lighten($color-skeleton, 3%) !default;

// Color Variables - Debug / Error States (Original code unchanged)
$color-debug-bg: #f8f9fa !default;
$color-error-bg: #fef2f2 !default;
$color-error-border: #fecdd3 !default;
$color-error-text: #dc2626 !default;
$color-error-border-light: #fee2e2 !default;
$color-error-text-dark: #7f1d1d !default;

// Color Variables - General Elements (Original code unchanged)
$color-overlay: rgba(0, 0, 0, 0.8) !default;
$color-border: #eee !default;

// Rule 4: Add !default to all base variables (standard SCSS practice for external override compatibility)
// Spacing Variables (Original code unchanged + added !default)
$spacing-xxs: 5px !default;
$spacing-xs: 8px !default;
$spacing-sm: 10px !default;
$spacing-md: 15px !default;
$spacing-lg: 20px !default;
$spacing-xl: 60px !default;

// Layout Specific Variables (Original code unchanged + added !default)
$grid-gap: $spacing-lg !default;
$card-padding: $spacing-md !default;

// ========== Core New Addition 2: Global Variables for Masonry Layout (Unified Configuration to Fix Overflow/Layout Issues) ==========
$masonry-col-mobile: 1 !default;        // Masonry columns on mobile (forced single column to prevent overflow)
$masonry-col-tablet: 2 !default;        // Masonry columns on tablet
$masonry-col-desktop: 4 !default;       // Masonry columns on desktop
$masonry-column-gap: $spacing-sm !default; // Masonry column gap (linked to global spacing)
$masonry-card-margin: $spacing-sm !default; // Masonry card bottom margin (linked to global spacing)
$masonry-col-gap-mobile: $spacing-xs !default; // Reduced gap for mobile to fit small screens

// Breakpoint Variables (Mobile-first approach) (Original code unchanged + added !default)
$breakpoint-mobile: 767px !default;
$breakpoint-tablet: 1023px !default;
$breakpoint-desktop: 1024px !default;

// Border Radius & Shadows (Original code unchanged + added !default)
$border-radius: 8px !default;
$border-radius-sm: 4px !default;
$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08) !default;
$shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12) !default;

// Transition Animations (Unified naming) (Original code unchanged + added !default)
$transition-fast: 0.2s ease !default;
$transition-default: all 0.3s ease !default;
$transition-loading: 1.5s infinite linear !default; // Unified loading animation duration

// Export Variables (Only keep necessary interactive variables) + Added Masonry variables export (No extra config needed for JS) Original code unchanged ✔️
:export {
  breakpointMobile: $breakpoint-mobile + '';
  breakpointTablet: $breakpoint-tablet + '';
  breakpointDesktop: $breakpoint-desktop + '';
  spacingSm: $spacing-sm + '';
  spacingLg: $spacing-lg + '';
  borderRadius: $border-radius + '';
  borderRadiusSm: $border-radius-sm + '';
  colorPrimary: $color-primary-base; // Export original default value for JS compatibility
  masonryColMobile: $masonry-col-mobile + '';
  masonryColDesktop: $masonry-col-desktop + '';
}