/* ============================================================================
   HIGHTIME LOUNGES — THEME / DESIGN TOKENS
   The single source of truth for color, type, spacing, shadow & motion.
   Inspired by nature: forest greens, copper, cream, mountain blue, sunset.
   ==========================================================================*/

:root {
  /* ---- Brand greens ---- */
  --brand:        #1aa64a;   /* signature logo green */
  --brand-dark:   #14833b;
  --brand-darker: #0f6a30;
  --brand-light:  #47c877;
  --brand-glow:   rgba(26,166,74,.35);

  /* ---- Forest surfaces (dark) ---- */
  --forest-900: #0b1d13;   /* header / footer / deepest */
  --forest-800: #102a1c;
  --forest-700: #163b28;
  --forest-600: #1d4d34;
  --forest-500: #276044;

  /* ---- Earth / warm neutrals (light) ---- */
  --cream:  #f7f2e7;   /* default page background */
  --paper:  #fffdf8;   /* cards / raised surfaces */
  --sand:   #efe6d3;
  --sand-2: #e6dabf;
  --wood:   #8c6d3f;

  /* ---- Accents ---- */
  --copper:       #c47a3d;
  --copper-dark:  #a5622c;
  --copper-light: #e0a066;
  --mountain:     #3f6f86;
  --mountain-light:#6fa0b6;
  --sunset:       #e08a4b;
  --gold:         #d8a94a;

  /* ---- Ink / text ---- */
  --ink:      #14201a;
  --ink-soft: #3d5347;
  --muted:    #6d7f74;
  --on-dark:      #f3efe2;
  --on-dark-soft: rgba(243,239,226,.72);

  /* ---- Lines & fills ---- */
  --line:      rgba(20,32,26,.12);
  --line-soft: rgba(20,32,26,.07);
  --line-dark: rgba(243,239,226,.14);
  --fill:      rgba(20,32,26,.04);

  /* ---- Legal status colors ---- */
  --status-rec:    #1aa64a;  /* recreational */
  --status-med:    #4a8db7;  /* medical only */
  --status-decrim: #d8a94a;  /* decriminalized */
  --status-cbd:    #8a9a5b;  /* cbd / low-thc */
  --status-none:   #b5544a;  /* fully illegal */

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-xs:   .78rem;
  --fs-sm:   .875rem;
  --fs-base: 1.02rem;
  --fs-md:   1.18rem;
  --fs-lg:   1.4rem;
  --fs-xl:   1.85rem;
  --fs-2xl:  2.4rem;
  --fs-3xl:  3.1rem;
  --fs-4xl:  clamp(2.6rem, 6vw, 4.6rem);
  --fs-hero: clamp(2.9rem, 7vw, 5.4rem);

  /* ---- Spacing scale ---- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  /* ---- Radius ---- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --sh-1: 0 1px 2px rgba(11,29,19,.06), 0 2px 6px rgba(11,29,19,.05);
  --sh-2: 0 4px 12px rgba(11,29,19,.08), 0 10px 30px rgba(11,29,19,.07);
  --sh-3: 0 12px 30px rgba(11,29,19,.12), 0 28px 60px rgba(11,29,19,.14);
  --sh-brand: 0 10px 30px rgba(26,166,74,.28);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.5);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1380px;
  --container-narrow: 820px;
  --header-h: 76px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .6s;
}

/* ============================================================================
   RESET & BASE
   ==========================================================================*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-weight: 450;
}

/* subtle botanical paper texture on the base background */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(26,166,74,.06), transparent 60%),
    radial-gradient(900px 500px at -5% 10%, rgba(63,111,134,.05), transparent 55%);
}
body > * { position: relative; z-index: 1; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ink);
  font-optical-sizing: auto;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { color: var(--ink-soft); }
a { color: var(--brand-dark); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--brand); }

ul, ol { padding-left: 1.1rem; }
strong, b { font-weight: 700; color: var(--ink); }
small { font-size: var(--fs-sm); }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 3px solid var(--mountain);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================================
   LAYOUT HELPERS
   ==========================================================================*/
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--dark { background: var(--forest-800); color: var(--on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4 { color: var(--paper); }
.section--dark p { color: var(--on-dark-soft); }
.section--cream { background: var(--cream); }
.section--sand { background: linear-gradient(180deg, var(--cream), var(--sand)); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 960px){ .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr;} }

.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2);} .gap-3 { gap: var(--sp-3);} .gap-4 { gap: var(--sp-4);} .gap-5{ gap: var(--sp-5);}
.hidden { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}
.mb-2{margin-bottom:var(--sp-2)}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}
.maxw-60{max-width:60ch}.maxw-50{max-width:50ch}

/* eyebrow / kicker label */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--copper-dark);
}
.eyebrow::before { content:""; width: 26px; height: 2px; background: var(--copper); border-radius: 2px; }
.section--dark .eyebrow { color: var(--copper-light); }

.lead { font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.7; }
.section--dark .lead { color: var(--on-dark-soft); }

/* skip link */
.skip-link {
  position: absolute; left: 1rem; top: -60px; z-index: 2000;
  background: var(--brand); color:#fff; padding:.6rem 1rem; border-radius: var(--r-sm);
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 1rem; color:#fff; }

/* ============================================================================
   ENTRANCE ANIMATIONS (progressive, honored by site.js observer)
   ==========================================================================*/
@keyframes fadeUp { from { opacity:0; transform: translateY(22px);} to {opacity:1; transform:none;} }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes shimmer { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 0 0 var(--brand-glow)} 50%{box-shadow:0 0 0 14px transparent} }

[data-reveal] { opacity: 0; }
[data-reveal].is-in { animation: fadeUp .8s var(--ease-out) forwards; }
[data-reveal].is-in[data-reveal="2"]{ animation-delay:.08s;}
[data-reveal].is-in[data-reveal="3"]{ animation-delay:.16s;}
[data-reveal].is-in[data-reveal="4"]{ animation-delay:.24s;}
[data-reveal].is-in[data-reveal="5"]{ animation-delay:.32s;}
[data-reveal].is-in[data-reveal="6"]{ animation-delay:.4s;}