/**
 * Design System Tokens - Hindustan Power EV
 * Updated for Premium Production Quality Responsive Layouts
 */

:root {
  /* Color Palette */
  --hp-primary: #11b2a4;
  --hp-primary-hover: #0ea194;
  --hp-primary-light: rgba(17, 178, 164, 0.12);
  --hp-secondary: #16182e;
  --hp-secondary-dark: #0b0d19;
  --hp-navy: #1b1d36;
  --hp-navy-light: #252846;
  
  --hp-white: #ffffff;
  --hp-black: #0b0d19;
  --hp-text-dark: #1e293b;
  --hp-text-muted: #64748b;
  --hp-text-light: #94a3b8;
  
  --hp-bg-light: #f8fafc;
  --hp-bg-alt: #f1f5f9;
  --hp-border-light: #e2e8f0;
  
  /* Typography */
  --hp-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --hp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* Layout Spacing */
  --hp-container-max: 1320px;
  --hp-container-padding: 2.5rem;
  --hp-section-gap-desktop: 120px;
  --hp-section-gap-tablet: 80px;
  --hp-section-gap-mobile: 56px;
  
  /* Component Sizes & Touch Targets */
  --hp-btn-height-desktop: 54px;
  --hp-btn-height-mobile: 48px;
  --hp-touch-target-min: 44px;
  
  /* Border Radius */
  --hp-radius-sm: 8px;
  --hp-radius-md: 14px;
  --hp-radius-lg: 20px;
  --hp-radius-full: 9999px;
  
  /* Shadows & Glassmorphism */
  --hp-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
  --hp-shadow-md: 0 10px 25px rgba(0, 0, 0, 0.08);
  --hp-shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.12);
  --hp-glass-bg: rgba(22, 24, 46, 0.85);
  --hp-glass-border: rgba(255, 255, 255, 0.12);
  --hp-glass-blur: blur(16px);
  
  /* Transitions */
  --hp-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --hp-transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --hp-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}