/**
 * DealerHub Vehicles Pro - CSS Variables
 * All customizable styling properties
 * Generated dynamically from WordPress admin options
 */

:root {
    /* ========================================
       PRIMARY BRAND COLORS
       ======================================== */
    --dh-primary-color: #f97316;
    --dh-primary-hover: #ea580c;
    --dh-secondary-color: #dc2626;
    --dh-secondary-hover: #b91c1c;
    --dh-accent-color: #1f2937;
    --dh-accent-hover: #111827;
    
    /* ========================================
       TEXT COLORS
       ======================================== */
    --dh-text-primary: #1f2937;
    --dh-text-secondary: #6b7280;
    --dh-text-light: #9ca3af;
    --dh-text-white: #ffffff;
    --dh-heading-color: #111827;
    
    /* ========================================
       BACKGROUND COLORS
       ======================================== */
    --dh-bg-primary: #ffffff;
    --dh-bg-secondary: #f9fafb;
    --dh-bg-tertiary: #f3f4f6;
    --dh-bg-dark: #1f2937;
    --dh-bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* ========================================
       BORDER COLORS
       ======================================== */
    --dh-border-light: #e5e7eb;
    --dh-border-medium: #d1d5db;
    --dh-border-dark: #9ca3af;
    
    /* ========================================
       CARD STYLES
       ======================================== */
    --dh-card-bg: #ffffff;
    --dh-card-border: #e5e7eb;
    --dh-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --dh-card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --dh-card-radius: 12px;
    --dh-card-padding: 20px;
    
    /* ========================================
       BUTTON STYLES
       ======================================== */
    --dh-btn-radius: 8px;
    --dh-btn-padding: 12px 24px;
    --dh-btn-font-size: 16px;
    --dh-btn-font-weight: 600;
    --dh-btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --dh-btn-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
    
    /* ========================================
       ATTRIBUTE BOX STYLES
       ======================================== */
    --dh-attr-bg: #f9fafb;
    --dh-attr-border: #e5e7eb;
    --dh-attr-label-color: #6b7280;
    --dh-attr-value-color: #1f2937;
    --dh-attr-radius: 8px;
    --dh-attr-padding: 12px 16px;
    
    /* ========================================
       GRID LAYOUT
       ======================================== */
    --dh-grid-gap: 24px;
    --dh-grid-columns-mobile: 1;
    --dh-grid-columns-tablet: 2;
    --dh-grid-columns-desktop: 3;
    
    /* ========================================
       SPACING
       ======================================== */
    --dh-spacing-xs: 4px;
    --dh-spacing-sm: 8px;
    --dh-spacing-md: 16px;
    --dh-spacing-lg: 24px;
    --dh-spacing-xl: 32px;
    --dh-spacing-2xl: 48px;
    
    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --dh-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --dh-font-size-xs: 12px;
    --dh-font-size-sm: 14px;
    --dh-font-size-base: 16px;
    --dh-font-size-lg: 18px;
    --dh-font-size-xl: 20px;
    --dh-font-size-2xl: 24px;
    --dh-font-size-3xl: 30px;
    --dh-font-size-4xl: 36px;
    --dh-line-height-tight: 1.2;
    --dh-line-height-normal: 1.5;
    --dh-line-height-relaxed: 1.75;
    
    /* ========================================
       TRANSITIONS
       ======================================== */
    --dh-transition-fast: 150ms ease;
    --dh-transition-base: 250ms ease;
    --dh-transition-slow: 350ms ease;
    
    /* ========================================
       Z-INDEX LAYERS
       ======================================== */
    --dh-z-base: 1;
    --dh-z-dropdown: 1000;
    --dh-z-sticky: 1020;
    --dh-z-fixed: 1030;
    --dh-z-modal-backdrop: 1040;
    --dh-z-modal: 1050;
    --dh-z-popover: 1060;
    --dh-z-tooltip: 1070;
    
    /* ========================================
       BREAKPOINTS (for reference in JS)
       ======================================== */
    --dh-breakpoint-sm: 640px;
    --dh-breakpoint-md: 768px;
    --dh-breakpoint-lg: 1024px;
    --dh-breakpoint-xl: 1280px;
    
    /* ========================================
       IMAGE ASPECT RATIOS
       ======================================== */
    --dh-image-aspect-ratio: 16 / 9;
    
    /* ========================================
       FILTER STYLES
       ======================================== */
    --dh-filter-bg: #f9fafb;
    --dh-filter-border: #e5e7eb;
    --dh-filter-input-bg: #ffffff;
    --dh-filter-input-border: #d1d5db;
    --dh-filter-input-focus: var(--dh-primary-color);
    
    /* ========================================
       PAGINATION STYLES
       ======================================== */
    --dh-pagination-bg: #ffffff;
    --dh-pagination-border: #e5e7eb;
    --dh-pagination-active-bg: var(--dh-primary-color);
    --dh-pagination-active-text: #ffffff;
    --dh-pagination-hover-bg: #f3f4f6;
}

/* Dark theme overrides */
.dealerhub-theme-dark {
    --dh-bg-primary: #1f2937;
    --dh-bg-secondary: #111827;
    --dh-bg-tertiary: #0f172a;
    --dh-text-primary: #f9fafb;
    --dh-text-secondary: #d1d5db;
    --dh-text-light: #9ca3af;
    --dh-heading-color: #ffffff;
    --dh-card-bg: #374151;
    --dh-card-border: #4b5563;
    --dh-border-light: #4b5563;
    --dh-border-medium: #6b7280;
    --dh-attr-bg: #1f2937;
    --dh-attr-border: #4b5563;
    --dh-attr-label-color: #9ca3af;
    --dh-attr-value-color: #f9fafb;
}

/* Modern theme (light with subtle differences) */
.dealerhub-theme-modern {
    --dh-card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --dh-card-shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --dh-card-radius: 16px;
}

/* Classic theme */
.dealerhub-theme-classic {
    --dh-card-radius: 4px;
    --dh-btn-radius: 4px;
    --dh-attr-radius: 4px;
    --dh-card-border: #d1d5db;
    --dh-card-shadow: none;
}