/* WordPress Auction System - CSS Customization Variables */
/* Edit these variables to customize the auction system appearance */

:root {
    /* Color Palette */
    --auction-primary: #16a34a;
    --auction-primary-dark: #15803d;
    --auction-secondary: #22c55e;
    --auction-danger: #dc2626;
    --auction-warning: #f59e0b;
    --auction-info: #0ea5e9;
    --auction-light: #f8f9fa;
    --auction-dark: #343a40;
    --auction-muted: #6c757d;

    /* Background Colors */
    --auction-bg-primary: #ffffff;
    --auction-bg-secondary: #f8f9fa;
    --auction-bg-hover: #f0f0f0;

    /* Text Colors */
    --auction-text-primary: #333333;
    --auction-text-secondary: #666666;
    --auction-text-muted: #999999;
    --auction-text-light: #ffffff;

    /* Border & Shadow */
    --auction-border-color: #e0e0e0;
    --auction-border-radius: 8px;
    --auction-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --auction-box-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* Spacing */
    --auction-spacing-xs: 4px;
    --auction-spacing-sm: 8px;
    --auction-spacing-md: 16px;
    --auction-spacing-lg: 24px;
    --auction-spacing-xl: 32px;

    /* Typography */
    --auction-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --auction-font-size-xs: 12px;
    --auction-font-size-sm: 13px;
    --auction-font-size-base: 14px;
    --auction-font-size-lg: 16px;
    --auction-font-size-xl: 18px;
    --auction-font-size-2xl: 24px;
    --auction-font-size-3xl: 32px;

    /* Grid Layout */
    --auction-grid-columns: 4;
    --auction-grid-gap: 20px;
    --auction-card-height: 400px;

    /* Transitions */
    --auction-transition-fast: 150ms ease;
    --auction-transition-base: 300ms ease;
    --auction-transition-slow: 500ms ease;

    /* Sidebar */
    --auction-sidebar-width: 280px;
    --auction-sidebar-bg: #ffffff;
}

/* Responsive Media Queries - Adjust grid columns */
@media (max-width: 1400px) {
    :root {
        --auction-grid-columns: 3;
    }
}

@media (max-width: 1024px) {
    :root {
        --auction-grid-columns: 2;
    }
}

@media (max-width: 768px) {
    :root {
        --auction-grid-columns: 1;
        --auction-sidebar-width: 100%;
    }
}

@media (max-width: 480px) {
    :root {
        --auction-spacing-lg: 16px;
        --auction-font-size-lg: 14px;
    }
}

/* ========================================
   EASY CUSTOMIZATION GUIDE
   ======================================== 
   
   To customize the auction system:
   
   1. PRIMARY COLORS:
      - Change --auction-primary to your brand color
      - Change --auction-primary-dark for hover states
   
   2. GRID LAYOUT:
      - Adjust --auction-grid-columns (1-4)
      - Modify --auction-grid-gap for spacing between items
      - Change --auction-card-height for card dimensions
   
   3. SPACING:
      - All padding/margins use --auction-spacing-* variables
      - Edit these to increase/decrease overall spacing
   
   4. TYPOGRAPHY:
      - Modify --auction-font-primary for different fonts
      - Adjust --auction-font-size-* for different text sizes
   
   5. BORDERS & SHADOWS:
      - Change --auction-border-radius for rounded corners
      - Modify shadow variables for depth effect
   
   6. SIDEBAR:
      - Adjust --auction-sidebar-width to make wider/narrower
      - Hide sidebar at specific widths using media queries
   
   Examples:
   
   /* Change to blue theme */
:root {
    --auction-primary: #0066cc;
    --auction-primary-dark: #0052a3;
}

/* Show 5 columns on wide screens */
@media (min-width: 1600px) {
    :root {
        --auction-grid-columns: 5;
    }
}

/* Hide sidebar on desktop */
@media (min-width: 768px) {
    .auction-sidebar {
        display: none !important;
    }
}

/* Make cards taller */
:root {
    --auction-card-height: 500px;
}

========================================*/