/**
 * AutoXpress CSS Variables
 * A centralized place for design tokens and theming
 */

:root {
  /* Brand Colors */
  --color-primary: #e53238;
  --color-secondary: #0064d2;
  --color-success: #198754;
  --color-warning: #ffc107;
  --color-danger: #dc3545;
  --color-info: #0dcaf0;
  --color-dark: #212529;
  --color-light: #f8f9fa;
  --color-muted: #6c757d;
  
  /* Neutral Colors */
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-lighter: #999999;
  --color-background: #ffffff;
  --color-background-alt: #f9f9f9;
  --color-border: #dee2e6;
  --color-border-light: #f0f0f0;
  
  /* Source-specific Colors */
  --color-ebay: #e53238;
  --color-google: #0064d2;
  
  /* Status Colors */
  --color-new: #198754;
  --color-used: #0064d2;
  --color-refurbished: #6f42c1;
  
  /* Typography */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  
  /* UI Components */
  --border-radius-sm: 0.2rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  
  /* Transitions */
  --transition-base: all 0.2s ease-in-out;
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  /* Z-indices */
  --z-index-dropdown: 1000;
  --z-index-modal: 2000;
  --z-index-tooltip: 1500;
  --z-index-overlay: 1900;
}

/* Dark Mode Theme (for future use) */
.dark-theme {
  --color-text: #f8f9fa;
  --color-text-light: #e9ecef;
  --color-text-lighter: #ced4da;
  --color-background: #212529;
  --color-background-alt: #343a40;
  --color-border: #495057;
  --color-border-light: #6c757d;
}