/* ============================================================
   Vannu Tours x CareStop India — Design tokens
   Palette sampled directly from the brand mark.
   ============================================================ */

:root {
  /* --- Brand primitives (from the logo) --- */
  --v-red:      #d50000;   /* "vannu" script          */
  --v-red-deep: #a30000;
  --v-red-soft: #ff4d3d;
  --v-green:    #7ed957;   /* "booking solutions."    */
  --v-green-deep:#4ea82c;
  --v-cyan:     #46dce6;   /* wave marks              */
  --v-cyan-deep:#0fa9b4;
  --v-yellow:   #ffd426;   /* sparkle                 */
  --v-yellow-deep:#e0ab00;
  --v-pink:     #ff1f5a;   /* paper plane + hearts    */
  --v-pink-deep:#c8003c;

  /* --- Neutrals: warm, paper-like, never clinical grey --- */
  --ink-900: #15100e;
  --ink-800: #241b18;
  --ink-700: #3b2d28;
  --ink-600: #5b4a43;
  --ink-500: #7d6c64;
  --ink-400: #a3948c;
  --ink-300: #c9bcb5;
  --ink-200: #e4dbd5;
  --ink-100: #f2ece8;
  --ink-050: #faf7f4;
  --paper:   #fffdfb;
  --white:   #ffffff;

  /* --- Semantic surface --- */
  --bg:           var(--paper);
  --bg-sunk:      var(--ink-050);
  --bg-raise:     var(--white);
  --border:       var(--ink-200);
  --border-strong:var(--ink-300);
  --text:         var(--ink-900);
  --text-muted:   var(--ink-600);
  --text-faint:   var(--ink-500);

  /* --- Destination theme slots.
         search.js overwrites these live per destination. --- */
  --d-primary:   var(--v-red);
  --d-secondary: var(--v-cyan);
  --d-accent:    var(--v-yellow);
  --d-wash:      #fff5f2;
  --d-ink:       #2a0d08;
  --d-primary-contrast: #ffffff;

  /* --- Type --- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fluid scale — 360px → 1440px */
  --fs-xs:   clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-sm:   clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem);
  --fs-base: clamp(0.95rem, 0.91rem + 0.18vw, 1.05rem);
  --fs-md:   clamp(1.06rem, 1.00rem + 0.28vw, 1.22rem);
  --fs-lg:   clamp(1.22rem, 1.10rem + 0.55vw, 1.55rem);
  --fs-xl:   clamp(1.45rem, 1.24rem + 0.95vw, 2.10rem);
  --fs-2xl:  clamp(1.80rem, 1.42rem + 1.70vw, 3.00rem);
  --fs-3xl:  clamp(2.20rem, 1.55rem + 2.90vw, 4.20rem);
  --fs-4xl:  clamp(2.60rem, 1.50rem + 4.90vw, 5.80rem);

  --lh-tight: 1.06;
  --lh-snug:  1.22;
  --lh-body:  1.62;

  /* --- Space (8pt-ish, fluid at the top end) --- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 2.75rem;  --s-8: 3.5rem;
  --s-9:  clamp(3.5rem, 2.6rem + 4vw, 6rem);
  --s-10: clamp(4.5rem, 3.0rem + 6.5vw, 9rem);

  /* --- Radius: soft, matching the brush-round logo --- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 16px;
  --r-lg: 24px; --r-xl: 34px; --r-2xl: 48px; --r-pill: 999px;

  /* --- Elevation: warm-tinted, never pure black --- */
  --sh-xs: 0 1px 2px rgba(36,27,24,.06);
  --sh-sm: 0 2px 8px rgba(36,27,24,.07), 0 1px 2px rgba(36,27,24,.05);
  --sh-md: 0 8px 24px rgba(36,27,24,.09), 0 2px 6px rgba(36,27,24,.05);
  --sh-lg: 0 20px 48px rgba(36,27,24,.13), 0 6px 14px rgba(36,27,24,.06);
  --sh-xl: 0 34px 80px rgba(36,27,24,.18), 0 10px 24px rgba(36,27,24,.08);
  --sh-glow: 0 10px 34px -8px color-mix(in oklab, var(--d-primary) 55%, transparent);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.22,.68,.36,1);
  --ease-spring: cubic-bezier(.34,1.46,.54,1);
  --t-fast: 140ms; --t-mid: 260ms; --t-slow: 520ms;

  /* --- Inline SVG assets (percent-encoded, quote-free) --- */
  --caret-svg: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%235b4a43%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E");

  /* --- Layout --- */
  --wrap: 1240px;
  --wrap-narrow: 780px;
  --wrap-wide: 1520px;
  --gutter: clamp(1rem, 0.55rem + 2.1vw, 2.5rem);
  --header-h: 68px;
}

@media (min-width: 900px) { :root { --header-h: 80px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}