/* 
 * Bixing Technology Website - CSS Variables
 * Consolidated variables file for consistent theming across the site
 * Created: May 25, 2025
 */

:root {
  /* 
   * PRIMARY COLORS
   * Core brand colors used throughout the site
   */
  --primary-dark: #0a1929;
  --primary-blue: #0e4377;
  --primary-light: #e6f1ff;
  
  /* 
   * ACCENT COLORS
   * Vibrant colors used for highlights and interactive elements
   */
  --accent-blue: #00a8ff;
  --accent-purple: #9c27b0;
  --accent-teal: #00bcd4;
  --gold: #FFD700;
  
  /* 
   * NEUTRAL COLORS
   * Background and text colors
   */
  --dark-bg: #121212;
  --dark-surface: #1e1e1e;
  --gray-light: #a0a0a0;
  --white: #ffffff;
  
  /* 
   * FUNCTIONAL COLORS
   * Colors with specific meanings for user feedback
   */
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;
  
  /* 
   * TYPOGRAPHY
   * Font families used throughout the site
   */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Space Grotesk', sans-serif;
  
  /* 
   * SPACING
   * Consistent spacing values for margins and padding
   */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 2rem;      /* 32px */
  --spacing-xl: 3rem;      /* 48px */
  --spacing-2xl: 4rem;     /* 64px */
  
  /* 
   * BORDER RADIUS
   * Consistent border radius values
   */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-full: 9999px;
  
  /* 
   * TRANSITIONS
   * Animation timing for hover effects and transitions
   */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* 
   * GRADIENTS
   * Predefined gradients for buttons, backgrounds, etc.
   */
  --gradient-primary: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
  --gradient-accent: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  --gradient-gold: linear-gradient(to right, #FFD700, #FFA07A);
  
  /* 
   * SHADOWS
   * Box shadow definitions for depth and elevation
   */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* 
 * MEDIA QUERY BREAKPOINTS
 * These are defined as CSS variables for documentation,
 * but used directly in media queries
 * 
 * --breakpoint-sm: 576px
 * --breakpoint-md: 768px
 * --breakpoint-lg: 992px
 * --breakpoint-xl: 1200px
 * --breakpoint-xxl: 1400px
 */