/* ============================================
   CSS Variables - Carvan Homepage
   All design tokens - ek baar change karo, sab jagah update
   ============================================ */

:root {
  /* Colors */
  --wdtPrimaryColor: #4e6cfb;
  --wdtPrimaryColorRgb: 78, 108, 251;
  --wdtSecondaryColor: #000000;
  --wdtSecondaryColorRgb: 0, 0, 0;
  --wdtTertiaryColor: #f1f1f1;
  --wdtTertiaryColorRgb: 241, 241, 241;
  --wdtBodyBGColor: #ffffff;
  --wdtBodyBGColorRgb: 255, 255, 255;
  --wdtBodyTxtColor: #050b20;
  --wdtBodyTxtColorRgb: 5, 11, 32;
  --wdtHeadAltColor: #050b20;
  --wdtHeadAltColorRgb: 5, 11, 32;
  --wdtLinkColor: #050b20;
  --wdtLinkColorRgb: 5, 11, 32;
  --wdtLinkHoverColor: #4e6cfb;
  --wdtLinkHoverColorRgb: 78, 108, 251;
  --wdtBorderColor: #d9d9d9;
  --wdtBorderColorRgb: 217, 217, 217;
  --wdtAccentTxtColor: #ffffff;
  --wdtAccentTxtColorRgb: 255, 255, 255;

  /* Font Families */
  --wdtFontTypo_Base: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wdtFontTypo_Alt: 'Lexend Deca', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wdtFontTypo_Ext: 'Dancing Script', cursive;

  /* Font Weights */
  --wdtFontWeight_Base: 400;
  --wdtFontWeight_Alt: 600;
  --wdtFontWeight_Ext: 500;

  /* Font Sizes - clamp(min, preferred, max) for responsive */
  --wdtFontSize_Base: clamp(14px, 1rem, 18px);
  --wdtFontSize_Ext: clamp(12px, 0.875rem, 16px);
  --wdtFontSize_H6: clamp(16px, 1.25rem, 22px);
  --wdtFontSize_H5: clamp(18px, 1.5rem, 26px);
  --wdtFontSize_H4: clamp(22px, 1.875rem, 32px);
  --wdtFontSize_H3: clamp(28px, 2.5rem, 42px);
  --wdtFontSize_H2: clamp(36px, 3.25rem, 54px);
  --wdtFontSize_H1: clamp(40px, 3.75rem, 62px);
  --wdtFontSize_Alt: clamp(40px, 3.75rem, 62px);

  /* Line Heights */
  --wdtLineHeight_Base: 1.65;
  --wdtLineHeight_Alt: 1.2;
  --wdtLineHeight_Ext: 1.1;

  /* Spacing (consistent spacing tokens) */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  --spacing-5xl: 8rem;

  /* Section spacing */
  --section-padding-y: 60px;
  --section-padding-x: clamp(1rem, 4vw, 2rem);
  /* --container-max: 1620px; */
  --container-max: 80rem;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(var(--wdtBodyTxtColorRgb), 0.05);
  --shadow-md: 0 4px 12px rgba(var(--wdtBodyTxtColorRgb), 0.08);
  --shadow-lg: 0 8px 24px rgba(var(--wdtBodyTxtColorRgb), 0.12);

  /* Header */
  --header-height: 120px;
}

@media (min-width : 768px) {
  :root {
    --section-padding-y: 70px;
  }
}

@media (min-width : 1440px) {
  :root {
    --section-padding-y: 100px;
  }
}