/* ==========================================================================
   Design Tokens — single source of truth for the Yatra Booking design system
   Sourced from the Figma "desktop-site" frame. Keep this file the only place
   raw hex/px values are declared; every other stylesheet should reference
   these custom properties instead of hardcoding values.
   ========================================================================== */

:root {
  /* ---- Brand & text colors ---- */
  --color-navy: #002155;       /* headings, primary ink */
  --color-navy-strong: #0f172a; /* date-picker month label, deepest ink */
  --color-navy-cta: #003580;   /* primary buttons / CTAs */
  --color-navy-cta-hover: #002a66;
  --color-navy-dark-btn: #001838; /* dark CTA hover (footer/experience button) */
  --color-accent: #fdbb24;     /* gold accent */
  --color-accent-ink: #6c4d00; /* text on gold badges */
  --color-success: #22c55e;
  --color-success-bg: #dcfce7;

  --color-text-body: #334155;
  --color-text-muted: #64748b;
  --color-text-placeholder: #6b7280;
  --color-text-disabled: #c4c6d3;

  --color-border: #e2e8f0;
  --color-border-soft: rgba(196, 198, 211, 0.3);

  --color-bg-page: #f7f9fb;
  --color-bg-section: #f2f4f6;
  --color-bg-footer: #e0e3e5;
  --color-tag-bg: #eceef0;
  --color-skeleton-base: #f2f4f6;
  --color-skeleton-shine: #e6e8ea;

  --color-white: #ffffff;
  --color-black: #000000;

  /* ---- Typography ---- */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  --fs-h1: 48px;
  --lh-h1: 60px;
  --ls-h1: -0.96px;

  --fs-h2: 32px;
  --lh-h2: 40px;
  --ls-h2: -0.32px;

  --fs-h3: 24px;
  --lh-h3: 32px;

  --fs-h5: 18px;
  --lh-h5: 27px;

  --fs-body-lg: 18px;
  --lh-body-lg: 28px;

  --fs-body: 16px;
  --lh-body: 24px;
  --lh-body-loose: 26px;

  --fs-small: 14px;
  --lh-small: 20px;

  --fs-xs: 12px;
  --lh-xs: 16px;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

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

  /* ---- Shadows ---- */
  --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-route-card: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-hero-card: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-btn: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-image-lift: 0 25px 25px rgba(0, 0, 0, 0.15);
  --shadow-nav: 0 1px 2px rgba(0, 0, 0, 0.05);

  /* ---- Layout ---- */
  --max-width: 1200px;
  --nav-height: 80px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.4s;
}