/* ============================================================================
   HTGF tokens — the ONE sheet for every Atlas-host surface (PWA, town pages,
   stays, compass, meal-lab, trips, review, venue pages).
   Source: Design-System/TOKENS-2026-09-08.md (owner 08.09 — "apply the
   stylesheet and colour check to the entire site and app"); values = the
   mobile app's tokens.ts light/dark themes. Fonts: Montserrat display /
   Nunito body (owner lock 17.07). No serif display face anywhere.
   Roles: mustard = ★ / verification / active / focus ONLY (never a CTA fill);
   forest = CTA; papaya + recall red = recall strip, alerts, errors ONLY.
   No hard-coded hex outside this block.
   ========================================================================== */
:root{
  /* ground + surfaces */
  --bg:#F5E9A6;              /* page ground — the founding brand-yellow */
  --bg-deep:#EEDD8C;         /* hover / alternate bands on the ground */
  --card:#FFFDF7;            /* card / surface — warm white */
  --warm:#F7EFE0;            /* inner panels, quotes, quiet fills */
  /* chrome */
  --band:#214E3B;            /* headers, tab bars, primary buttons */
  --forest:#214E3B;          /* brand green: links, outlines, headings */
  --forest-deep:#173829;     /* text, CTA hover, text on mustard */
  --forest-night:#0F241B;    /* dark-mode ground */
  /* text */
  --ink:#173829;
  --text:#173829;
  --muted:#4F6157;
  --on-band:#FAF7EF;
  --on-band-muted:rgba(250,247,239,.72);
  /* lines */
  --line:rgba(33,78,59,.16);
  --line-solid:#D9D3A8;      /* solid fallback on the ground */
  --line-card:#E6E1CF;       /* solid fallback on cards */
  /* verification / active */
  --mustard:#E8B647;
  --mustard-deep:#7A5F12;    /* mustard as text on light */
  /* CTA */
  --cta:#214E3B;
  --on-cta:#FAF7EF;
  /* recall / alert ONLY */
  --recall:#CE3B2B;
  --papaya:#FF7043;
  /* greens + warm fills */
  --sage:#8FA58A;
  --sage-tint:#DCE6DC;
  --peach:#FFD9C0;
  /* tiers — identical on every surface; ★ only from human-verified data */
  --tier-d:var(--mustard);
  --tier-p:var(--forest);
  --tier-o:var(--sage-tint);
  --tier-u:rgba(33,48,42,.35);
  /* derived tints (from the tokens above — never new colours) */
  --mustard-soft:rgba(232,182,71,.22);
  --papaya-soft:rgba(255,112,67,.14);
  --sage-soft:var(--sage-tint);
  --rose-soft:var(--peach);
  /* legacy aliases — old rules keep working, new rules use the names above */
  --cream:var(--bg);
  --paper:var(--card);
  --ghost:var(--warm);
  --soft:var(--warm);
  --rose:var(--peach);
  --red:var(--recall);
  --chip-bg:var(--sage-tint);
  --note-bg:var(--mustard-soft);
  --hdr:var(--on-band);
  --gold-line:var(--line-solid);
  /* type */
  --font-display:Montserrat,Nunito,system-ui,-apple-system,sans-serif;   /* 700/800/900 */
  --font-body:Nunito,Inter,system-ui,-apple-system,sans-serif;           /* 600/700/800 */
  --mono:ui-monospace,"SFMono-Regular",Menlo,monospace;                  /* evidence data */
  --disp:var(--font-display);
  --body:var(--font-body);
  --fs-hero:clamp(2.4rem,6.2vw,4.6rem);
  --fs-h2:clamp(1.45rem,3.2vw,2.1rem);
  --fs-h3:1.12rem;
  --fs-body:1rem;
  --fs-small:.9rem;
  --fs-fine:.82rem;
  --fs-micro:.74rem;
  --fs-eyebrow:.72rem;
  /* layout */
  --wrap-max:1160px;
  --wrap-pad:clamp(16px,4vw,40px);
  --sec-pad:clamp(32px,5vw,64px);
  --gap:16px;
  --gap-lg:clamp(16px,3vw,34px);
  /* radius — 8 inner / 12 card / 18 large / pill */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-pill:999px;
  --radius:12px;
  --radius-sm:8px;
  /* elevation */
  --shadow-sm:0 1px 3px rgba(23,56,41,.08);
  --shadow-md:0 4px 16px rgba(23,56,41,.10);
  --shadow-lg:0 8px 32px rgba(23,56,41,.14);
  --shadow:var(--shadow-md);
  --shadow-hover:0 18px 40px rgba(23,56,41,.14);
  --shadow-float:0 14px 34px rgba(23,56,41,.18);
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.15s;
  --t-med:.25s;
  --t-reveal:.6s;
  --transition:.15s ease;
}

/* ---- dark (= the app's darkTheme) ---- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F241B; --bg-deep:#173829; --card:#173829; --warm:#1B3B2C;
  --band:#173829; --forest:#8FA58A; --forest-deep:#173829;
  --ink:#F4EFE3; --text:#F4EFE3; --muted:#B9C4BB;
  --on-band:#F4EFE3; --on-band-muted:rgba(244,239,227,.72);
  --line:rgba(244,239,227,.14); --line-solid:rgba(244,239,227,.24); --line-card:rgba(244,239,227,.18);
  --mustard-deep:#E8B647;
  --cta:#FF7043; --on-cta:#FFFFFF;
  --recall:#E05A48;
  --tier-p:var(--sage); --tier-o:rgba(143,165,138,.35); --tier-u:rgba(244,239,227,.35);
  --mustard-soft:rgba(232,182,71,.18); --papaya-soft:rgba(255,112,67,.18); --sage-soft:rgba(143,165,138,.22); --rose-soft:rgba(255,217,192,.16);
  --shadow-sm:0 1px 3px rgba(0,0,0,.35); --shadow-md:0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 8px 32px rgba(0,0,0,.5);
  --shadow-hover:0 18px 40px rgba(0,0,0,.5); --shadow-float:0 14px 34px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --bg:#0F241B; --bg-deep:#173829; --card:#173829; --warm:#1B3B2C;
  --band:#173829; --forest:#8FA58A; --forest-deep:#173829;
  --ink:#F4EFE3; --text:#F4EFE3; --muted:#B9C4BB;
  --on-band:#F4EFE3; --on-band-muted:rgba(244,239,227,.72);
  --line:rgba(244,239,227,.14); --line-solid:rgba(244,239,227,.24); --line-card:rgba(244,239,227,.18);
  --mustard-deep:#E8B647;
  --cta:#FF7043; --on-cta:#FFFFFF;
  --recall:#E05A48;
  --tier-p:var(--sage); --tier-o:rgba(143,165,138,.35); --tier-u:rgba(244,239,227,.35);
  --mustard-soft:rgba(232,182,71,.18); --papaya-soft:rgba(255,112,67,.18); --sage-soft:rgba(143,165,138,.22); --rose-soft:rgba(255,217,192,.16);
  --shadow-sm:0 1px 3px rgba(0,0,0,.35); --shadow-md:0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 8px 32px rgba(0,0,0,.5);
  --shadow-hover:0 18px 40px rgba(0,0,0,.5); --shadow-float:0 14px 34px rgba(0,0,0,.5);
}
/* ---- global focus ring + reduced motion (sheet rule) ---- */
:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---- base for surfaces that link /tokens.css directly (stays, compass, meal-lab, town pages, admin shells).
   /styles.css (the PWA sheet) carries the same :root block above and its own base. ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:600;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;color:var(--forest)}
a{color:inherit}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)}