/**
 * Patna Car Booking Design Tokens
 * 100% configurable brand colors, typography, and visual variables
 */
:root {
  /* Brand Color Palette */
  --bd-brand-primary: #008744;         /* Signature Europcar-style emerald forest green */
  --bd-brand-primary-hover: #007038;
  --bd-brand-primary-light: #e6f6ee;
  
  --bd-brand-accent: #FFCC00;          /* High-impact golden yellow for primary action buttons */
  --bd-brand-accent-hover: #e6b800;
  --bd-brand-accent-text: #111827;

  --bd-brand-red: #E60028;             /* Vibrant deal sticker red */
  
  /* Neutral Palette */
  --bd-bg-light: #f4f5f7;
  --bd-bg-card: #ffffff;
  --bd-text-dark: #111827;
  --bd-text-muted: #6b7280;
  --bd-border-color: #e5e7eb;
  --bd-border-focus: #008744;

  /* Typography */
  --bd-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Elevation & Shadows */
  --bd-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --bd-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --bd-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

  /* Border Radii */
  --bd-radius-sm: 4px;
  --bd-radius-md: 8px;
  --bd-radius-lg: 12px;
  --bd-radius-full: 9999px;
}

/* ==========================================================================
   TYPEWRITER SCROLL ANIMATION & REVEAL SYSTEM
   ========================================================================== */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background-color: var(--bd-brand-primary, #008744);
  margin-left: 3px;
  vertical-align: -0.05em;
  border-radius: 2px;
  animation: tw-blink 0.75s ease-in-out infinite;
  transition: opacity 0.4s ease;
}

@keyframes tw-blink {
  0%, 45% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

/* Subtle scroll entrance reveal for cards and containers */
.scroll-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid items */
.stagger-1 { transition-delay: 60ms; }
.stagger-2 { transition-delay: 120ms; }
.stagger-3 { transition-delay: 180ms; }
.stagger-4 { transition-delay: 240ms; }
.stagger-5 { transition-delay: 300ms; }