/* ================================================================
   VARIABLES.CSS — Design Tokens
   Car With Driver North India
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600&family=Outfit:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');

:root {
  /* ── COLORS ── */
  --primary:        #1B4332;
  --primary-light:  #2D6A4F;
  --primary-dark:   #0F2B1F;
  --primary-ultra:  #071A13;

  --accent:         #D4860A;
  --accent-light:   #F0A830;
  --accent-dim:     #A86508;
  --accent-pale:    rgba(212,134,10,0.12);

  --bg:             #F7F2EA;
  --bg2:            #EFE9DC;
  --bg3:            #E5DDD0;
  --bg-dark:        #0F2B1F;

  --surface:        #FFFFFF;
  --surface2:       #FDFAF5;

  --text:           #18110A;
  --text-dim:       rgba(24,17,10,0.62);
  --text-muted:     rgba(24,17,10,0.40);
  --text-light:     rgba(24,17,10,0.24);

  --white:          #FFFDF8;
  --white-80:       rgba(255,253,248,0.80);
  --white-50:       rgba(255,253,248,0.50);
  --white-20:       rgba(255,253,248,0.20);

  --border:         rgba(27,67,50,0.12);
  --border2:        rgba(27,67,50,0.22);
  --border-dark:    rgba(255,253,248,0.12);

  --green-glow:     rgba(27,67,50,0.08);
  --gold-glow:      rgba(212,134,10,0.14);

  /* ── FONTS ── */
  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-body:      'Outfit', system-ui, sans-serif;
  --font-caps:      'Bebas Neue', 'Outfit', sans-serif;

  /* ── SHADOWS ── */
  --shadow-xs:    0 1px 6px rgba(27,67,50,0.08);
  --shadow-sm:    0 4px 16px rgba(27,67,50,0.10);
  --shadow-md:    0 10px 36px rgba(27,67,50,0.14);
  --shadow-lg:    0 24px 72px rgba(27,67,50,0.18);
  --shadow-xl:    0 40px 100px rgba(27,67,50,0.22);
  --shadow-gold:  0 8px 32px rgba(212,134,10,0.20);
  --shadow-inner: inset 0 2px 8px rgba(27,67,50,0.08);

  /* ── RADIUS ── */
  --r-xs:  3px;
  --r-sm:  6px;
  --r:     10px;
  --r-md:  16px;
  --r-lg:  28px;
  --r-xl:  48px;
  --r-full: 9999px;

  /* ── MOTION ── */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:   cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --trans:      all 0.40s var(--ease);
  --trans-fast: all 0.20s var(--ease);
  --trans-slow: all 0.65s var(--ease);

  /* ── LAYOUT ── */
  --max-w:        1240px;
  --nav-h:        72px;
  --section-pad:  100px;
}