/* ==========================================================================
   Himalayan Trails — public design tokens

   A mature outdoor/editorial system: deep pine for dark ground, warm paper for
   content, a single clay accent for action. Deliberately narrow — every extra
   colour is one more way for the site to look generic.
   ========================================================================== */

:root {
  /* ---- Palette ----------------------------------------------------------- */
  --ht-pine-950: #0b1611;
  --ht-pine-900: #12231b;
  --ht-pine-800: #1a3327;
  --ht-pine-700: #234534;
  --ht-pine-600: #2f5c45;
  --ht-pine-500: #3f7458;
  --ht-pine-300: #8fb7a2;
  --ht-pine-100: #dbe8e0;

  --ht-clay-700: #8c4d1c;
  --ht-clay-600: #a85f27;
  --ht-clay-500: #c1762f;
  --ht-clay-400: #d99a55;
  --ht-clay-100: #f6e7d6;

  --ht-paper: #fbf8f3;
  --ht-paper-warm: #f5efe4;
  --ht-sand: #ece3d4;
  --ht-stone-400: #b9b0a1;
  --ht-stone-300: #d8d1c4;
  --ht-stone-200: #e7e1d6;

  --ht-ink: #14201a;
  --ht-ink-soft: #3c4a42;
  --ht-ink-muted: #6b7770;
  --ht-white: #ffffff;

  --ht-success: #2f6b45;
  --ht-success-soft: #e3f0e7;
  --ht-warning: #96591a;
  --ht-warning-soft: #fbeed8;
  --ht-danger: #9a3324;
  --ht-danger-soft: #f8e4e0;

  /* ---- Semantic roles ---------------------------------------------------- */
  --ht-surface: var(--ht-paper);
  --ht-surface-alt: var(--ht-paper-warm);
  --ht-surface-card: var(--ht-white);
  --ht-surface-dark: var(--ht-pine-900);

  --ht-text: var(--ht-ink);
  --ht-text-soft: var(--ht-ink-soft);
  --ht-text-muted: var(--ht-ink-muted);
  --ht-text-inverse: #f2efe8;
  --ht-text-inverse-muted: rgb(242 239 232 / 0.68);

  --ht-border: var(--ht-stone-300);
  --ht-border-soft: var(--ht-stone-200);
  --ht-border-inverse: rgb(255 255 255 / 0.14);

  --ht-accent: var(--ht-clay-600);
  --ht-accent-hover: var(--ht-clay-700);
  --ht-accent-contrast: #fffaf4;

  --ht-focus: var(--ht-clay-500);

  /* ---- Typography -------------------------------------------------------- */
  --ht-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --ht-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid display scale — clamps keep 320px readable and 2560px controlled. */
  --ht-display-1: clamp(2.5rem, 1.55rem + 4.75vw, 5.25rem);
  --ht-display-2: clamp(2rem, 1.45rem + 2.75vw, 3.5rem);
  --ht-display-3: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
  --ht-display-4: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);

  --ht-text-2xs: 0.6875rem;
  --ht-text-xs: 0.75rem;
  --ht-text-sm: 0.8125rem;
  --ht-text-base: 0.9375rem;
  --ht-text-md: 1rem;
  --ht-text-lg: 1.0625rem;
  --ht-text-xl: 1.1875rem;
  --ht-text-2xl: 1.375rem;

  --ht-leading-tight: 1.08;
  --ht-leading-snug: 1.28;
  --ht-leading-normal: 1.55;
  --ht-leading-relaxed: 1.7;

  --ht-tracking-caps: 0.14em;
  --ht-tracking-tight: -0.015em;

  /* ---- Spacing ----------------------------------------------------------- */
  --ht-space-1: 0.25rem;
  --ht-space-2: 0.5rem;
  --ht-space-3: 0.75rem;
  --ht-space-4: 1rem;
  --ht-space-5: 1.25rem;
  --ht-space-6: 1.5rem;
  --ht-space-8: 2rem;
  --ht-space-10: 2.5rem;
  --ht-space-12: 3rem;
  --ht-space-16: 4rem;
  --ht-space-20: 5rem;

  /* Section rhythm scales with the viewport so the page never feels airless on
     mobile or cavernous on a 2560px monitor. */
  --ht-section-y: clamp(3.5rem, 2.25rem + 5vw, 7rem);
  --ht-section-y-tight: clamp(2.5rem, 1.75rem + 3vw, 4.5rem);

  /* ---- Layout ------------------------------------------------------------ */
  --ht-shell: 78rem;          /* 1248px — the main content measure */
  --ht-shell-wide: 90rem;     /* 1440px — full-bleed media sections */
  --ht-shell-narrow: 46rem;   /* 736px — prose measure */
  --ht-gutter: clamp(1.125rem, 0.5rem + 2.5vw, 2.75rem);

  --ht-header-utility-h: 2.25rem;
  --ht-header-main-h: 4.75rem;
  --ht-header-h: calc(var(--ht-header-utility-h) + var(--ht-header-main-h));

  /* ---- Radii & elevation ------------------------------------------------- */
  --ht-radius-xs: 3px;
  --ht-radius-sm: 5px;
  --ht-radius-md: 8px;
  --ht-radius-lg: 14px;
  --ht-radius-pill: 999px;

  --ht-shadow-sm: 0 1px 2px rgb(20 32 26 / 0.06);
  --ht-shadow-md: 0 6px 20px -8px rgb(20 32 26 / 0.18), 0 2px 6px -2px rgb(20 32 26 / 0.08);
  --ht-shadow-lg: 0 26px 60px -24px rgb(20 32 26 / 0.34);

  /* ---- Motion ------------------------------------------------------------ */
  --ht-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ht-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ht-duration-fast: 160ms;
  --ht-duration-base: 280ms;
  --ht-duration-slow: 600ms;

  /* ---- Layers ------------------------------------------------------------ */
  --ht-z-sticky-cta: 60;
  --ht-z-float: 70;
  --ht-z-header: 100;
  --ht-z-scrim: 110;
  --ht-z-drawer: 120;
  --ht-z-skip: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ht-duration-fast: 0ms;
    --ht-duration-base: 0ms;
    --ht-duration-slow: 0ms;
  }
}