/* ==========================================================================
   Vietnam Backstreet Tours — design tokens
   Layout & rhythm follow loveholidays; palette is our own "Hanoi vintage".
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour */
  --c-primary: #0E4F4A;
  --c-primary-dark: #0A3A36;
  --c-primary-soft: #E3EFED;
  --c-accent: #F2B33D;
  --c-accent-soft: #FCEFD3;
  --c-cta: #C2481F;
  --c-cta-hover: #A93C18;
  --c-bg: #FFFFFF;
  --c-bg-soft: #F7F2E9;
  --c-text: #1F2328;
  --c-muted: #5E6670;
  --c-border: #E4DED3;
  --c-success: #1E7B4F;
  --c-rating: #00AA6C;
  --c-paper: #FAF8F4;   /* warm off-white surface (home-2/3, menus) */
  --c-ink: #10312E;     /* deep green-black for headings on light */
  --c-line: #E6E1D8;    /* hairline borders */
  --c-logo-brown: #5C1D12;  /* text logo, sampled from logo-vbt2.png */
  --c-logo-orange: #E07818;

  /* Type */
  --ff-head: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --ff-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h3: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .75rem;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sh-1: 0 2px 12px rgba(16, 24, 40, .08);
  --sh-2: 0 8px 28px rgba(16, 24, 40, .12);

  /* Space (8px scale) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-8: 64px;
  --s-10: 80px;
  --section-gap: var(--s-6);

  --container: 1200px;
  --gutter: 16px;

  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section-gap: var(--s-10);
  }
}