/* ==========================================================================
   RideOn Tour Travels — Typography Tokens
   Display: Marcellus (elegant classical serif — royal, monumental, calm)
   Body/UI:  Manrope (warm geometric sans — modern, highly legible, friendly)
   ========================================================================== */

:root {
  --font-display: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
  --font-ui: var(--font-body);
  --font-button: var(--font-body);
  --font-number: var(--font-body);

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */

  /* Letter spacing */
  --ls-tight: -0.01em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.04em; /* @kind other */
  --ls-eyebrow: 0.12em; /* @kind other */

  /* Desktop scale */
  --fs-display-xl: 4.5rem;   /* 72px — hero */
  --fs-display-lg: 3.5rem;   /* 56px — section hero */
  --fs-display-md: 2.75rem;  /* 44px — page title */
  --fs-h1: 2.25rem;          /* 36px */
  --fs-h2: 1.75rem;          /* 28px */
  --fs-h3: 1.375rem;         /* 22px */
  --fs-h4: 1.125rem;         /* 18px */
  --fs-body-lg: 1.125rem;    /* 18px */
  --fs-body: 1rem;           /* 16px */
  --fs-body-sm: 0.875rem;    /* 14px */
  --fs-caption: 0.75rem;     /* 12px */
  --fs-eyebrow: 0.8125rem;   /* 13px */

  --lh-display: 1.08; /* @kind other */
  --lh-heading: 1.2; /* @kind other */
  --lh-body: 1.6; /* @kind other */
  --lh-tight: 1.35; /* @kind other */
}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  :root {
    --fs-display-xl: 3.375rem;  /* 54px */
    --fs-display-lg: 2.75rem;   /* 44px */
    --fs-display-md: 2.25rem;   /* 36px */
    --fs-h1: 1.875rem;          /* 30px */
    --fs-h2: 1.5rem;            /* 24px */
    --fs-h3: 1.25rem;           /* 20px */
  }
}

/* Mobile (≤640px) */
@media (max-width: 640px) {
  :root {
    --fs-display-xl: 2.5rem;    /* 40px */
    --fs-display-lg: 2.125rem;  /* 34px */
    --fs-display-md: 1.75rem;   /* 28px */
    --fs-h1: 1.5rem;            /* 24px */
    --fs-h2: 1.25rem;           /* 20px */
    --fs-h3: 1.125rem;          /* 18px */
    --fs-body-lg: 1rem;
  }
}