/* ============================================================
   Shaw Ridge Leisure Park — shared design tokens
   Fonts: Archivo (display/signage), Hanken Grotesk (body),
          Space Mono (wayfinding tags, hours, status)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* --- warm neutral base --- */
  --paper:      oklch(0.985 0.006 80);   /* warm off-white */
  --paper-2:    oklch(0.965 0.008 80);   /* card / panel    */
  --paper-3:    oklch(0.935 0.010 78);   /* hairlines/wash  */
  --ink:        oklch(0.235 0.020 60);   /* warm near-black */
  --ink-2:      oklch(0.430 0.020 60);   /* secondary text  */
  --ink-3:      oklch(0.620 0.018 60);   /* muted / meta    */
  --line:       oklch(0.890 0.012 75);   /* borders         */

  /* --- signature sunny accent (the park's "sunshine") --- */
  --sun:        oklch(0.78 0.155 70);
  --sun-deep:   oklch(0.70 0.165 58);

  /* --- wayfinding category palette (equal-ish chroma, varied hue) --- */
  --eat:        oklch(0.635 0.180 30);    /* tomato red    */
  --watch:      oklch(0.560 0.170 300);   /* cinema violet */
  --play:       oklch(0.600 0.165 250);   /* cobalt blue   */
  --stay:       oklch(0.610 0.140 150);   /* leaf green    */
  --relax:      oklch(0.690 0.110 200);   /* spa teal      */

  /* tinted washes for each category (very light) */
  --eat-wash:   oklch(0.955 0.035 35);
  --watch-wash: oklch(0.955 0.030 300);
  --play-wash:  oklch(0.955 0.030 250);
  --stay-wash:  oklch(0.955 0.030 150);
  --relax-wash: oklch(0.960 0.028 200);

  /* status */
  --open:       oklch(0.600 0.150 150);
  --closed:     oklch(0.560 0.040 40);
  --soon:       oklch(0.700 0.165 70);

  /* type */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  --maxw: 1200px;
  --radius: 14px;
  /* Shared page gutter — the home-page value, used on every page so the
     left/right padding is consistent sitewide. Override-free: pages just
     read var(--gutter). */
  --gutter: clamp(12px, 2.5vw, 36px);
  /* Shared content max-width — the home-page value. Every page's .wrap
     reads this so the centred column (and therefore the visible side
     margins) match the home page sitewide. */
  --page-max: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.02; margin: 0; }

a { color: inherit; }

img { max-width: 100%; display: block; }

/* category helper attrs: [data-cat="eat"] etc */
[data-cat="eat"]   { --c: var(--eat);   --c-wash: var(--eat-wash); }
[data-cat="watch"] { --c: var(--watch); --c-wash: var(--watch-wash); }
[data-cat="play"]  { --c: var(--play);  --c-wash: var(--play-wash); }
[data-cat="stay"]  { --c: var(--stay);  --c-wash: var(--stay-wash); }
[data-cat="relax"] { --c: var(--relax); --c-wash: var(--relax-wash); }

/* ---- shared wayfinding tag ---- */
.tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* ---- shared open/closed status pill ---- */
.status {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}
.status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
  box-shadow: 0 0 0 0 currentColor;
}
.status.is-open   { color: var(--open); }
.status.is-open .dot { animation: pulse 2.4s ease-in-out infinite; }
.status.is-soon   { color: var(--soon); }
.status.is-closed { color: var(--closed); opacity: 0.85; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--open) 55%, transparent); }
  50%      { box-shadow: 0 0 0 5px color-mix(in oklab, var(--open) 0%, transparent); }
}

/* ---- typographic logo lockup (placeholder for real mark) ---- */
.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  display: inline-grid;
}
.wordmark .l1 { font-size: 1em; }
.wordmark .l2 {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.30em;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  padding-left: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}