/* ==========================================================================
   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 {
  color-scheme: light;

  /* ---- Brand & text colors ---- */
  --color-navy: #002155; /* headings, primary ink - stays dark for readability */
  --color-navy-strong: #0f172a; /* deepest ink */
  --color-navy-cta: #002155; /* primary buttons / CTAs - same navy as headings, not a separate brighter blue */
  --color-navy-cta-hover: #001838;
  --color-navy-dark-btn: #001838; /* dark CTA hover (footer/experience button) */
  --color-accent: #002155; /* same navy, used on buttons/highlights/badges */
  --color-accent-ink: #ffffff; /* text on navy accent */
  --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;

  /* ---- Fixed overlay colors — deliberately NEVER redefined in dark
     mode below. Used only for text/backgrounds sitting on things that
     are always dark regardless of site theme: hero photos, decorative
     navy bands, and colored buttons (their own fill provides contrast,
     not the page background). ---- */
  --color-overlay-text: #ffffff;
  --color-overlay-bg: #002155;

  --color-header-glass-bg: rgba(247, 249, 251, 0.72);
  --color-header-solid-bg: rgba(247, 249, 251, 0.9);

  /* ---- Typography ---- */
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Montserrat", 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;
}

/* Dark theme — activated via [data-theme="dark"] on <html>.
   Same variable names as :root above; every existing component that
   references var(--color-*) picks this up automatically, no component
   CSS needs to change. */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ---- Brand & text colors ---- */
  --color-navy: #f4f6fb; /* headings/ink -> near-white on dark */
  --color-navy-strong: #ffffff;
  --color-navy-cta: #002155; /* same navy as light mode, per design request */
  --color-navy-cta-hover: #001838;
  --color-navy-dark-btn: #1c2540;
  --color-accent: #002155; /* same navy as light mode, per design request */
  --color-accent-ink: #ffffff;
  --color-success: #34d399;
  --color-success-bg: rgba(52, 211, 153, 0.14);

  --color-text-body: #c7cede;
  --color-text-muted: #8791a8;
  --color-text-placeholder: #6c7690;
  --color-text-disabled: #454d63;

  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-soft: rgba(255, 255, 255, 0.06);

  --color-bg-page: #000000;
  --color-bg-section: #14141a;
  --color-bg-footer: #05070d;
  --color-tag-bg: rgba(255, 255, 255, 0.07);
  --color-skeleton-base: #141b2e;
  --color-skeleton-shine: #1c2438;

  --color-white: #121212; /* "card surface" - every .card/.auth-card etc. */
  --color-black: #000000;

  --color-header-glass-bg: rgba(10, 14, 26, 0.72);
  --color-header-solid-bg: rgba(10, 14, 26, 0.92);

  --color-saturday: #f87171; /* brighter red so it still reads on dark */
  --color-saturday-bg: rgba(248, 113, 113, 0.12);

  /* ---- Shadows: black-on-black doesn't read, so these are softer +
     the CTA gets a subtle gold glow instead of a flat drop shadow ---- */
  --shadow-card: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-route-card: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.55);
  --shadow-hero-card:
    0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  --shadow-btn:
    0 10px 20px -3px rgba(42, 95, 214, 0.18), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --shadow-image-lift: 0 25px 25px rgba(0, 0, 0, 0.5);
  --shadow-nav:
    0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);

  --color-saturday: #dc2626; /* Nepali (BS) calendar weekend column */
  --color-saturday-bg: rgba(220, 38, 38, 0.08);
}

/* Smooth, non-jarring transition when switching */
html {
  transition: background-color 0.2s ease;
}
body,
.card,
.site-header,
input,
select,
textarea {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}