/* ------ Design tokens ------ */
:root {
  /* Sunset palette (approved spec §5) */
  --sunset-orange: #F5A623;
  --sunset-pink:   #FF6B8A;
  --sunset-deep:   #C14A4A;
  --sand-cream:    #FFF3E0;
  --sand-warm:     #E8C99B;
  --ink-deep:      #1A0A15;
  --gold-glow:     #FFD166;
  --night-deep:    #2A0E1A;

  /* Opening daylight color (start of scroll) */
  --day-sky:       #4DC8FF;

  /* Typography */
  --font-display:  'Fraunces', Georgia, serif;
  --font-hero:     'Playfair Display', 'Fraunces', Georgia, serif;
  --font-body:     'Inter', system-ui, sans-serif;

  /* Spacing tokens */
  --s-xs: 0.5rem;
  --s-sm: 1rem;
  --s-md: 1.5rem;
  --s-lg: 2.5rem;
  --s-xl: 4rem;

  /* Z-index scale */
  --z-scene: 1;
  --z-logo: 5;
  --z-ui: 10;
  --z-grain: 90;
  --z-modal: 100;
  --z-cookie: 150;
  --z-skip: 200;

  /* Border-radius scale — use these instead of magic numbers when adding
     new components. Existing rules retain their explicit values for now;
     migrate opportunistically to keep diffs small. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Breakpoint reference values (CSS vars cannot be used inside @media
     queries — these tokens exist only for documentation + JS use via
     getComputedStyle. When adding @media rules, match these widths.):
       sm: 480px   (small phones / max-width fallback layouts)
       md: 768px   (tablet portrait / desktop hover-capable)
       lg: 1024px  (laptop)
       xl: 1280px  (desktop wide) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ------ Body ------ */
body {
  font-family: var(--font-body);
  color: var(--ink-deep);
  background-color: var(--day-sky); /* Start of day narrative */
  overflow-x: hidden;
  /* will-change is set by JS on animated elements, not here */
}

/* ------ Typography utilities ------ */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.label {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
}

/* ------ Scene base ------ */
.scene {
  position: relative;
  /* 100% (not 100vw) so we don't include the scrollbar gutter, which on
     some platforms causes a 15–17px horizontal scroll. */
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

/* ------ Skip-to-content link (a11y) ------ */
/* Off-screen until keyboard-focused; jumps the user past the persistent
   quick-nav and beach chapter into the bar (where the actual menu lives). */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;          /* above modal (100) so screen-reader users always reach it */
  padding: 10px 16px;
  background: var(--ink-deep);
  color: var(--gold-glow);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid var(--gold-glow);
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
}

/* Lenis smooth scroll — required styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }