/* ==========================================================================
   TMG Holidays — design tokens
   ==========================================================================

   The single source of truth for colour, type, spacing, shape and motion.

   Two rules, and the system only holds if both are kept:

     1. No component file may contain a literal colour, a raw font stack, or a
        hand-picked pixel value for spacing. If a value is needed and does not
        exist here, add it here first.

     2. Section rhythm comes from --sec-y. A section that invents its own
        vertical padding breaks the vertical grid for every section after it.

   The palette is inherited from the Kashmir Trails theme on
   kashmirtravel.tmgholidays.in. The two sites belong to one brand and share
   one green deliberately.
   ========================================================================== */

:root{

  /* --- Brand ------------------------------------------------------------ */
  --color-primary:#123C34;        /* forest — buttons, footer, headings      */
  --color-primary-hover:#0F312B;
  --color-primary-dark:#081A16;   /* dark bands, hero scrim — never text     */
  --color-accent:#C7963B;         /* gold — see the discipline rule below    */
  --color-accent-hover:#A87B2C;

  /* --- Surfaces --------------------------------------------------------- */
  --color-background:#F7F4ED;     /* warm ivory page ground                  */
  --color-surface:#FFFFFF;        /* cards, panels, inputs                   */
  --color-surface-sunken:#F1EDE3; /* table heads, quiet bands                */
  --color-white:#FFFFFF;

  /* --- Text ------------------------------------------------------------- */
  --color-text:#102A25;           /* green-biased near-black                 */
  --color-text-muted:#5F6B66;     /* 5.6:1 on ivory — passes AA for body     */
  --color-text-faint:#8B948F;     /* captions only, never running text       */

  /* --- Lines ------------------------------------------------------------ */
  --color-border:#DCDED6;
  --color-border-soft:#E7E9E1;
  --color-rule:rgba(16,42,37,.11);

  /* --- On dark ---------------------------------------------------------- */
  --color-on-dark:rgba(255,255,255,.74);
  --color-on-dark-faint:rgba(255,255,255,.5);
  --color-on-dark-line:rgba(255,255,255,.15);

  /* --- Status, separate from the accent --------------------------------- */
  --color-success:#2F6B4F;
  --color-warning:#9A6B14;
  --color-error:#96412F;
  --color-error-bg:rgba(150,65,47,.08);
  --color-whatsapp:#25D366;

  /* --- Type families ---------------------------------------------------- */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* --- Type scale ------------------------------------------------------- */
  --fs-h1:clamp(38px,5.6vw,68px);
  --fs-h2:clamp(28px,3.4vw,44px);
  --fs-h3:clamp(21px,2vw,27px);
  --fs-h4:18px;
  --fs-body-lg:clamp(17px,1.25vw,19px);
  --fs-body:16px;
  --fs-small:14px;
  --fs-label:11.5px;
  --fs-btn:15px;
  --fs-price:22px;

  --lh-tight:1.02;
  --lh-heading:1.12;
  --lh-snug:1.35;
  --lh-body:1.65;

  --ls-display:-.028em;
  --ls-h2:-.022em;
  --ls-h3:-.016em;
  --ls-label:.15em;

  /* Fraunces axes. Low WONK keeps it warm rather than quirky; the italic
     used for emphasis in display headings deliberately turns both up. */
  --fv-display:"SOFT" 24,"WONK" 0;
  --fv-display-em:"SOFT" 60,"WONK" 1;

  /* --- Spacing: 4px base ------------------------------------------------ */
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --s-5:24px;
  --s-6:32px;
  --s-7:48px;
  --s-8:64px;
  --s-9:96px;
  --s-10:128px;

  /* --- Layout ----------------------------------------------------------- */
  --shell:1600px;                        /* outer limit for full-bleed media */
  --container:1180px;                    /* text and UI never exceed this    */
  --gutter:clamp(20px,4vw,56px);
  --sec-y:clamp(56px,6vw,104px);         /* the one section rhythm           */
  --grid-gap:24px;
  --header-h:76px;
  --header-h-stuck:62px;

  /* --- Shape: deliberately restrained ----------------------------------- */
  --r-xs:3px;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-pill:999px;                        /* filter tags only                 */

  /* --- Elevation: three levels, spent by role --------------------------- */
  --sh-1:0 1px 2px rgba(16,42,37,.05);
  --sh-2:0 1px 2px rgba(16,42,37,.04), 0 10px 26px rgba(16,42,37,.06);
  --sh-3:0 2px 6px rgba(16,42,37,.06), 0 22px 48px rgba(16,42,37,.12);

  /* --- Motion: one curve, three durations ------------------------------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-micro:160ms;
  --t-std:240ms;
  --t-reveal:420ms;

  /* --- Depth ------------------------------------------------------------ */
  --z-header:100;
  --z-drawer:200;
  --z-sheet:300;
  --z-modal:400;
}

/* --------------------------------------------------------------------------
   Grid gutters step down with the viewport.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  :root{ --grid-gap:20px; --header-h:68px; }
}
@media (max-width:767px){
  :root{ --grid-gap:16px; --header-h:62px; }
}

/* --------------------------------------------------------------------------
   ACCENT DISCIPLINE — the rule that keeps this palette premium

   Gold appears at most three times per viewport, and never as a filled area
   larger than a small chip. Primary buttons are forest, not gold.

   This one restriction is most of what separates a premium travel site from
   a saffron-and-blue one: the accent has to stay rare enough that the eye
   still registers it as emphasis.

   Permitted uses:
     - eyebrow / label text
     - the rule beside a pull quote or callout
     - price emphasis on a trip card
     - active state on a tab, filter or nav item
     - a 1px underline on hover

   Not permitted:
     - button fills
     - section backgrounds
     - card borders
     - icon fills used decoratively
   -------------------------------------------------------------------------- */