/* ═══════════════════════════════════════════════════════════════
   Time-of-Day Theme System — additive overlay
   Applied via  html[data-tempo-time="day | afternoon | night"]
   Does NOT modify any existing CSS file.
   ═══════════════════════════════════════════════════════════════ */

/* ── Smooth colour cross-fade on theme switch ──────────────────── */

body,
.site-nav,
.moods,
.events,
.reserve,
.newsletter,
.site-footer,
.page-inner__section--dark,
.page-whats-on__gallery {
  transition: background-color 1200ms ease, border-color 600ms ease, color 600ms ease;
}

/* ── DAY  (05:00 – 13:00) ─────────────────────────────────────── */
/*   Base palette is the day palette — no overrides needed.        */

/* ── AFTERNOON  (13:00 – 18:00) ───────────────────────────────── */
/* Palette deepens toward sand/golden-hour warmth — it doesn't switch. */
/* Background steps from cream to cream-dark, accent lifts to sunset-  */
/* terracotta: terracotta clay lit by golden-hour light.               */

html[data-tempo-time="afternoon"] {
  /* Background — one step deeper than Day's cream, still light, on-brand */
  --color-bg:              var(--tempo-cream-dark);
  --color-bg-alt:          #E6DCC8;
  --color-nav-bg:          rgba(237, 231, 222, 0.92);

  /* Accent — terracotta (#7c3b3b) lifted with sunset warmth */
  --color-accent:          #C85A28;
  --color-accent-hover:    #A04220;
  --tempo-terracotta:      #C85A28;

  /* Gallery frame border catches the sunset hue through terracotta */
  --tempo-frame-border:    var(--tempo-terracotta);
}

/* Afternoon — event-type pages: these hardcode a pure-cream rgba wash, which
   now reads slightly lighter than Afternoon's deepened cream-dark background.
   Nudge them to match so there's no seam. */
html[data-tempo-time="afternoon"] .page-event-type__breadcrumb {
  background: rgba(237, 231, 222, 0.97);
}
html[data-tempo-time="afternoon"] .et__capacity-head,
html[data-tempo-time="afternoon"] .et__floorplan-placeholder {
  background: rgba(200, 90, 40, 0.06);
}

/* Afternoon — CTA button contrast fix (WCAG 1.4.3): cream text (--color-text-inverse,
   unchanged) on Afternoon's #C85A28 accent measures 3.84:1 against the 4.5:1 required
   for normal text — fails. Darkening the accent ~14% for just these two buttons (not the
   shared --color-accent token, to avoid touching links/borders/other consumers elsewhere)
   keeps the same terracotta-sunset hue and reaches 4.95:1. */
html[data-tempo-time="afternoon"] .hero__cta-primary,
html[data-tempo-time="afternoon"] .reserve-cta__primary {
  background: #AC4D22;
  border-color: #AC4D22;
}

/* Afternoon — footer "Reserve a table" button: this one is an outline
   button (--color-accent as TEXT on --color-bg, not as a filled
   background), so it's a different failure — #C85A28 text on Afternoon's
   #EDE7DE background measures 3.45:1, still below 4.5:1. Reuses the
   existing --color-accent-hover token (#A04220, same hue family, already
   defined above) rather than introducing a new color — 5.19:1. */
html[data-tempo-time="afternoon"] .site-footer__reserve-btn {
  color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Afternoon — newsletter */
html[data-tempo-time="afternoon"] .newsletter__input {
  border-bottom-color: rgba(200, 90, 40, 0.18);
}
html[data-tempo-time="afternoon"] .newsletter__input:focus {
  border-bottom-color: rgba(200, 90, 40, 0.55);
}
html[data-tempo-time="afternoon"] .newsletter__btn {
  background: #C85A28;
}
html[data-tempo-time="afternoon"] .newsletter__btn:hover:not(:disabled) {
  background: #A04220;
}
html[data-tempo-time="afternoon"] .newsletter__success {
  color: #C85A28;
}

/* ── AFTER HOURS  (00:00 – 04:59) ────────────────────────────── */
/* Vernissage Electric palette — electric violet + full-saturation  */
/* accents. Typography: Barlow Condensed (display) + DM Sans (body) */

html[data-tempo-time="after-hours"] {
  /* Backgrounds — absolute midnight with violet undertone */
  --color-bg:             #05030A;
  --color-bg-alt:         #0A061A;

  /* Text — cool violet-white */
  --color-text-primary:   #F2EEF8;
  --color-text-secondary: rgba(242, 238, 248, 0.65);
  --color-text-muted:     rgba(242, 238, 248, 0.38);
  --color-text-inverse:   #05030A;

  /* Borders — violet-tinted */
  --color-border:         rgba(112, 0, 255, 0.10);
  --color-border-strong:  rgba(112, 0, 255, 0.35);
  --color-border-accent:  rgba(112, 0, 255, 0.40);

  /* Accent — electric violet */
  --color-accent:         #7000FF;
  --color-accent-hover:   #9B00FF;

  /* Brand tokens — electric remapping */
  --tempo-terracotta:     #FF3D00;
  --tempo-amber:          #FF7800;
  --tempo-sand:           #0A061A;

  /* Nav */
  --color-nav-bg:         rgba(5, 3, 10, 0.97);

  /* Artwork frame */
  --tempo-frame-border:   rgba(112, 0, 255, 0.30);
  --tempo-frame-canvas:   #0F0920;

  /* Typography — Vernissage Electric */
  --font-display: 'Barlow Condensed', ui-sans-serif, sans-serif;
  --font-accent:  'Barlow Condensed', ui-sans-serif, sans-serif;
  --font-body:    'DM Sans', ui-sans-serif, sans-serif;

  /* Primitive token overrides — several hero/section elements reference these
     directly (var(--tempo-ink), var(--tempo-cream)) instead of semantic tokens.
     Override here so hardcoded evening-act colours also adopt After Hours palette. */
  --tempo-ink:          #05030A;
  --tempo-cream:        #F2EEF8;
  --tempo-cream-dark:   #0A061A; /* café artwork bg: warm cream-dark → midnight */
  --tempo-sage:         #7000FF; /* gallery frame: sage green → electric violet */
  --color-section-dark: #0A061A;

  /* Secondary accent — electric yellow for standout text, links, eyebrows */
  --color-accent-electric: #F5E000;
}

/* After Hours — body safety net */
html[data-tempo-time="after-hours"] body {
  background-color: #05030A;
  color: #F2EEF8;
}

/* After Hours — heading weight + tracking for Barlow Condensed */
html[data-tempo-time="after-hours"] h1 {
  font-weight: 900;
  letter-spacing: -0.01em;
}
html[data-tempo-time="after-hours"] h2 {
  font-weight: 800;
  letter-spacing: 0em;
}
html[data-tempo-time="after-hours"] h3 {
  font-weight: 700;
  letter-spacing: 0em;
}

/* After Hours — eyebrows: electric yellow accent + Barlow Condensed 700 */
html[data-tempo-time="after-hours"] [class*="__eyebrow"] {
  color: #F5E000;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* After Hours — small caps labels / col heads: font-weight only (color stays muted) */
html[data-tempo-time="after-hours"] [class*="__label-mode"],
html[data-tempo-time="after-hours"] [class*="__col-head"] {
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* After Hours — section heads, info labels, image captions */
html[data-tempo-time="after-hours"] [class*="__section-head"],
html[data-tempo-time="after-hours"] [class*="__info-label"],
html[data-tempo-time="after-hours"] [class*="__img-caption"] {
  font-weight: 700;
}

/* After Hours — nav + CTA buttons: Barlow Condensed 700 for electric impact */
html[data-tempo-time="after-hours"] .site-nav__menu-trigger,
html[data-tempo-time="after-hours"] .site-nav__reserve,
html[data-tempo-time="after-hours"] .site-drawer__cta,
html[data-tempo-time="after-hours"] .hero__cta-primary,
html[data-tempo-time="after-hours"] .hero__cta-secondary,
html[data-tempo-time="after-hours"] .reserve-cta__primary,
html[data-tempo-time="after-hours"] .reserve-cta__secondary,
html[data-tempo-time="after-hours"] .site-footer__reserve-btn,
html[data-tempo-time="after-hours"] .site-footer__newsletter-btn,
html[data-tempo-time="after-hours"] .page-inner__cta-primary,
html[data-tempo-time="after-hours"] .page-inner__cta-secondary {
  font-weight: 700;
}

/* After Hours — CTA button contrast fix (WCAG 1.4.3): the near-black text
   (--color-text-inverse: #05030A) on the #7000FF accent measures 3.05:1 against the 4.5:1
   required for normal text — fails. Whitening just the text for these two buttons (leaving
   the shared --color-accent purple untouched everywhere else) reaches 6.70:1 while keeping
   the exact brand-purple background hue. */
html[data-tempo-time="after-hours"] .hero__cta-primary,
html[data-tempo-time="after-hours"] .reserve-cta__primary {
  color: #FFFFFF;
}

/* After Hours — major page/section titles: Barlow Condensed 800 */
html[data-tempo-time="after-hours"] .page-inner__title,
html[data-tempo-time="after-hours"] .page-inner__section-title,
html[data-tempo-time="after-hours"] .reserve-cta__title,
html[data-tempo-time="after-hours"] .site-footer__statement-text,
html[data-tempo-time="after-hours"] .page-whats-on__title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* After Hours — hero bleed: Barlow Condensed 900 (font-accent now = Barlow) */
html[data-tempo-time="after-hours"] .hero__bleed-line {
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* After Hours — hero tagline: bold condensed but readable */
html[data-tempo-time="after-hours"] .hero__tagline {
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.01em;
}

/* After Hours — reserve body text: DM Sans 400 (font-body override doesn't change weight) */
html[data-tempo-time="after-hours"] .reserve-cta__body {
  font-family: var(--font-body);
  font-weight: 400;
}

/* After Hours — moods ghost text: deep violet, weight 700 for ink mass visibility */
html[data-tempo-time="after-hours"] .moods__bleed-line {
  color: rgba(112, 0, 255, 0.30);
  font-weight: 700;
}

/* After Hours — moods frame colours + unified surface #0F0920 */
html[data-tempo-time="after-hours"] .moods__frame[data-frame="cafe"] {
  --frame-clr: #7000FF;
  --artwork-bg: #0F0920;
}
html[data-tempo-time="after-hours"] .moods__frame[data-frame="gallery"] {
  --frame-clr: #F5E000;
  --artwork-bg: #0F0920;
}
html[data-tempo-time="after-hours"] .moods__frame[data-frame="bar"] {
  --frame-clr: rgba(112, 0, 255, 0.55);
  --artwork-bg: #0F0920;
}
html[data-tempo-time="after-hours"] .moods__frame[data-frame="events"] {
  --frame-clr: rgba(112, 0, 255, 0.70);
  --artwork-bg: #0F0920;
}

/* After Hours — mat surface: #0F0920 (replaces warm cream in both moods and event cards) */
html[data-tempo-time="after-hours"] .moods__mat,
html[data-tempo-time="after-hours"] .event-card__mat {
  background: #0F0920;
}

/* After Hours — event card artwork bg: #0F0920 for all interior types */
html[data-tempo-time="after-hours"] .event-card[data-interior="dark"],
html[data-tempo-time="after-hours"] .event-card[data-interior="sand"],
html[data-tempo-time="after-hours"] .event-card[data-interior="cream"] {
  --artwork-bg: #0F0920;
}

/* After Hours — moods frame hover glow: warm amber → electric violet */
html[data-tempo-time="after-hours"] .moods__frame:hover .moods__frame-art {
  box-shadow:
    0 0 0 2px var(--frame-clr),
    0 0 28px 10px rgba(112, 0, 255, 0.22),
    0 0 64px 28px rgba(112, 0, 255, 0.09),
    0 20px 60px rgba(0, 0, 0, 0.40);
}

/* After Hours — moods frontal flood: warm amber wash → violet wash */
html[data-tempo-time="after-hours"] .moods__artwork::after {
  background: radial-gradient(
    ellipse 70% 70% at 50% 50%,
    rgba(112, 0, 255, 0.28) 0%,
    rgba(112, 0, 255, 0.10) 46%,
    transparent 72%
  );
}

/* After Hours — frame number ghost */
html[data-tempo-time="after-hours"] .moods__num {
  color: rgba(112, 0, 255, 0.08);
}
html[data-tempo-time="after-hours"] .moods__frame[data-frame="bar"] .moods__num {
  color: rgba(112, 0, 255, 0.10);
}

/* After Hours — events section borders */
html[data-tempo-time="after-hours"] .events {
  border-top-color:    rgba(112, 0, 255, 0.10);
  border-bottom-color: rgba(112, 0, 255, 0.10);
}

/* After Hours — event cards with light interiors */
html[data-tempo-time="after-hours"] .event-card[data-interior="sand"] .event-card__title-bar,
html[data-tempo-time="after-hours"] .event-card[data-interior="cream"] .event-card__title-bar {
  background: linear-gradient(to top, rgba(5, 3, 10, 0.92) 0%, transparent 100%);
}
html[data-tempo-time="after-hours"] .event-card[data-interior="sand"] .event-card__title,
html[data-tempo-time="after-hours"] .event-card[data-interior="cream"] .event-card__title {
  color: #F2EEF8;
}
html[data-tempo-time="after-hours"] .event-card[data-interior="sand"] .event-card__date-reveal,
html[data-tempo-time="after-hours"] .event-card[data-interior="cream"] .event-card__date-reveal {
  background: linear-gradient(to bottom, rgba(5, 3, 10, 0.82) 0%, transparent 100%);
}
html[data-tempo-time="after-hours"] .event-card[data-interior="sand"] .event-card__month,
html[data-tempo-time="after-hours"] .event-card[data-interior="cream"] .event-card__month {
  color: #7000FF;
}
html[data-tempo-time="after-hours"] .event-card[data-interior="sand"] .event-card__time,
html[data-tempo-time="after-hours"] .event-card[data-interior="cream"] .event-card__time {
  color: rgba(242, 238, 248, 0.55);
}

/* After Hours — event card frame borders (hardcoded var(--tempo-terracotta) → violet) */
html[data-tempo-time="after-hours"] .event-card__frame-art {
  border-color: #7000FF;
}
html[data-tempo-time="after-hours"] .event-card:hover .event-card__frame-art {
  box-shadow:
    0 0 0 2px rgba(112, 0, 255, 0.50),
    0 -10px 24px 2px rgba(112, 0, 255, 0.18),
    0 20px 64px rgba(0, 0, 0, 0.40);
}

/* After Hours — event card downlight: warm amber → electric violet */
html[data-tempo-time="after-hours"] .event-card::before {
  background: radial-gradient(
    ellipse 26% 13% at 50% var(--dl-cone-cy, 43px),
    rgba(112, 0, 255, 0.32) 0%,
    rgba(112, 0, 255, 0.18) 50%,
    rgba(112, 0, 255, 0.05) 80%,
    transparent 95%
  );
}
html[data-tempo-time="after-hours"] .event-card::after {
  box-shadow:
    0 0 0 1.5px rgba(90, 60, 120, 0.50),
    inset 0 -8px 12px rgba(112, 0, 255, 0.55),
    0  6px 20px  5px rgba(112, 0, 255, 0.55),
    0 14px 52px 18px rgba(112, 0, 255, 0.30),
    0  0   14px  4px rgba(112, 0, 255, 0.25);
}
html[data-tempo-time="after-hours"] .event-card__artwork::after {
  background: radial-gradient(
    ellipse 80% 90% at 50% -12%,
    rgba(112, 0, 255, 0.32) 0%,
    rgba(112, 0, 255, 0.12) 38%,
    transparent 68%
  );
}

/* After Hours — category ghost text (var(--tempo-terracotta) → violet) */
html[data-tempo-time="after-hours"] .event-card__category-ghost {
  color: #7000FF;
}

/* After Hours — What's On page gallery background (hardcoded #F0EBE3 → midnight) */
html[data-tempo-time="after-hours"] .page-whats-on__gallery {
  background: #0A061A;
}

/* After Hours — section label rule (hardcoded dark ink → violet) */
html[data-tempo-time="after-hours"] .page-whats-on__section-label::before,
html[data-tempo-time="after-hours"] .page-whats-on__coming-soon-label::before {
  background: rgba(112, 0, 255, 0.35);
}

/* After Hours — events carousel nav (hover uses var(--tempo-terracotta) → violet) */
html[data-tempo-time="after-hours"] .events__nav-btn:hover:not(:disabled),
html[data-tempo-time="after-hours"] .moods__nav-btn:hover:not(:disabled) {
  border-color: #7000FF;
  color: #7000FF;
}
html[data-tempo-time="after-hours"] .events__dot--active,
html[data-tempo-time="after-hours"] .moods__dot--active {
  background: #7000FF;
}

/* After Hours — list bullets + em-dash markers */
/* Base dot (inner-page.css uses var(--color-text-muted) = 38% cool white — near-invisible on midnight) */
html[data-tempo-time="after-hours"] .page-inner__section-body ul li::before,
html[data-tempo-time="after-hours"] .page-inner__feature-item::before {
  color: #7000FF;
}
/* Bar em-dash (var(--tempo-amber) = #FF7800 orange → electric yellow fits bar energy) */
html[data-tempo-time="after-hours"] .page-bar .page-inner__feature-item::before {
  color: #F5E000;
}
/* Gallery em-dash (var(--tempo-terracotta) = #FF3D00 orange-red → violet) */
html[data-tempo-time="after-hours"] .page-gallery .page-inner__feature-item::before {
  color: #7000FF;
}
/* Venue floor plan em-dash (var(--tempo-terracotta) = #FF3D00 → violet) */
html[data-tempo-time="after-hours"] .venue-floorplan__feature-item::before {
  color: #7000FF;
}
/* Café menu-list: already var(--tempo-sage) = #7000FF via token override ✓ */

/* After Hours — newsletter form */
html[data-tempo-time="after-hours"] .newsletter__input {
  border-bottom-color: rgba(112, 0, 255, 0.22);
}
html[data-tempo-time="after-hours"] .newsletter__input:focus {
  border-bottom-color: rgba(112, 0, 255, 0.65);
}
html[data-tempo-time="after-hours"] .newsletter__btn {
  background: #7000FF;
  color: #F2EEF8;
}
html[data-tempo-time="after-hours"] .newsletter__btn:hover:not(:disabled) {
  background: #9B00FF;
}
html[data-tempo-time="after-hours"] .newsletter__error {
  color: #FF3D00;
}
html[data-tempo-time="after-hours"] .newsletter__success {
  color: #00E87A;
}

/* After Hours — electric yellow: standout text, links, emphasis */
/* Newsletter footer link (uses var(--color-accent) → violet; override to yellow) */
html[data-tempo-time="after-hours"] .site-footer__newsletter-btn {
  color: #F5E000;
}
/* Footer link hover */
html[data-tempo-time="after-hours"] .site-footer__col-link:hover {
  color: #F5E000;
}
/* Footer "Reserve a table" button — var(--color-accent) text (violet) on
   var(--color-bg) is 2.97:1, below the 4.5:1 text-contrast minimum;
   yellow reads at >10:1 and matches the newsletter-btn override above. */
html[data-tempo-time="after-hours"] .site-footer__reserve-btn {
  color: #F5E000;
  border-color: #F5E000;
}
html[data-tempo-time="after-hours"] .site-footer__reserve-btn:hover {
  background: #F5E000;
  color: #05030A;
}
/* Footer hours mode label ("Café", "Bar") */
html[data-tempo-time="after-hours"] .site-footer__hours-mode {
  color: #F5E000;
}
/* Emphasis/italic text within statements and major headings */
html[data-tempo-time="after-hours"] .site-footer__statement-text em,
html[data-tempo-time="after-hours"] .reserve-cta__title em,
html[data-tempo-time="after-hours"] .page-inner__title em,
html[data-tempo-time="after-hours"] .page-inner__section-title em,
html[data-tempo-time="after-hours"] h1 em,
html[data-tempo-time="after-hours"] h2 em,
html[data-tempo-time="after-hours"] h3 em {
  color: #F5E000;
  font-style: normal; /* Barlow Condensed: drop italic — use weight contrast instead */
}
/* Footer divider dot */
html[data-tempo-time="after-hours"] .site-footer__divider {
  color: #F5E000;
}

/* After Hours — hero evening subtle text: boost opacity (warm cream at low opacity
   is illegible on the deepest midnight bg; switch to cool violet-white at higher opacity) */
html[data-tempo-time="after-hours"] .hero[data-tempo-act="evening"] .hero__eyebrow {
  color: rgba(242, 238, 248, 0.72);
}
html[data-tempo-time="after-hours"] .hero[data-tempo-act="evening"] .hero__tagline {
  color: rgba(242, 238, 248, 0.82);
}
html[data-tempo-time="after-hours"] .hero[data-tempo-act="evening"] .hero__descriptor {
  color: rgba(242, 238, 248, 0.58);
}

/* After Hours — tempo-frame canvas */
html[data-tempo-time="after-hours"] .tempo-frame--placeholder .tempo-frame__label {
  color: rgba(242, 238, 248, 0.45);
}
html[data-tempo-time="after-hours"] .tempo-frame--placeholder .tempo-frame__caption {
  color: rgba(242, 238, 248, 0.36);
  border-top-color: rgba(112, 0, 255, 0.12);
}

/* After Hours — inner-page shared elements */
html[data-tempo-time="after-hours"] .page-inner__section--alt {
  background: rgba(112, 0, 255, 0.03);
}
html[data-tempo-time="after-hours"] .page-inner__section-head::before,
html[data-tempo-time="after-hours"] .page-inner__eyebrow::before {
  background: rgba(112, 0, 255, 0.25);
}
html[data-tempo-time="after-hours"] .page-inner__img-placeholder {
  border-color: rgba(112, 0, 255, 0.12);
}
html[data-tempo-time="after-hours"] .page-inner__img-placeholder::before {
  border-color: rgba(112, 0, 255, 0.08);
}

/* After Hours — café matcha frames */
html[data-tempo-time="after-hours"] .page-cafe__matcha-frame {
  --tempo-frame-canvas: #0F0920;
}

/* After Hours — bar signature alternating frames */
html[data-tempo-time="after-hours"] .page-bar__sig-item:nth-child(2) .page-bar__sig-frame,
html[data-tempo-time="after-hours"] .page-bar__sig-item:nth-child(4) .page-bar__sig-frame,
html[data-tempo-time="after-hours"] .page-bar__sig-item:nth-child(6) .page-bar__sig-frame {
  --tempo-frame-canvas: #0F0920;
}

/* After Hours — bar signature carousel dots */
html[data-tempo-time="after-hours"] .page-bar__signatures-dot {
  background: rgba(112, 0, 255, 0.18);
}
html[data-tempo-time="after-hours"] .page-bar__signatures-dot.is-active {
  background: #7000FF;
}

/* After Hours — venue floor plan */
html[data-tempo-time="after-hours"] .venue-floorplan__tabs {
  background: #0A061A;
  border-top-color:    rgba(112, 0, 255, 0.10);
  border-bottom-color: rgba(112, 0, 255, 0.07);
}
html[data-tempo-time="after-hours"] .venue-floorplan__tab {
  color: rgba(242, 238, 248, 0.38);
  border-bottom-color: transparent;
}
html[data-tempo-time="after-hours"] .venue-floorplan__tab.is-active {
  color: #7000FF;
  border-bottom-color: #7000FF;
}
html[data-tempo-time="after-hours"] .venue-floorplan__mini-detail {
  background: #0A061A;
  border-top-color: rgba(112, 0, 255, 0.10);
}
html[data-tempo-time="after-hours"] .venue-floorplan__popup {
  background: #0A061A;
  border-color: rgba(112, 0, 255, 0.20);
  box-shadow:
    0 4px 24px rgba(112, 0, 255, 0.12),
    0 1px 6px  rgba(0, 0, 0, 0.30);
}
html[data-tempo-time="after-hours"] .fp-floor .fp-floor-label--right {
  fill: rgba(242, 238, 248, 0.38);
}
html[data-tempo-time="after-hours"] .fp-floor:hover .fp-floor-label--right,
html[data-tempo-time="after-hours"] .fp-floor.is-active .fp-floor-label--right {
  fill: rgba(112, 0, 255, 0.85);
}
html[data-tempo-time="after-hours"] .venue-floorplan {
  background: #05030A;
  border-top-color:    rgba(112, 0, 255, 0.10);
  border-bottom-color: rgba(112, 0, 255, 0.10);
}
html[data-tempo-time="after-hours"] .venue-floorplan::before {
  background-image:
    linear-gradient(rgba(112, 0, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 0, 255, 0.05) 1px, transparent 1px);
}
html[data-tempo-time="after-hours"] .venue-floorplan__building {
  background: #0A061A;
  border-right-color: rgba(112, 0, 255, 0.10);
}
html[data-tempo-time="after-hours"] .venue-floorplan__svg-wrap {
  background: #0A061A;
  border-color: rgba(112, 0, 255, 0.14);
  box-shadow:
    0 2px 20px rgba(112, 0, 255, 0.10),
    0 1px 4px  rgba(0, 0, 0, 0.30),
    inset 0 0 0 1px rgba(112, 0, 255, 0.05);
}
html[data-tempo-time="after-hours"] .venue-floorplan__svg-wrap::after {
  color: rgba(242, 238, 248, 0.28);
  border-top-color: rgba(112, 0, 255, 0.10);
}
html[data-tempo-time="after-hours"] .venue-floorplan__detail {
  background: #0A061A;
}
html[data-tempo-time="after-hours"] .fp-walls rect,
html[data-tempo-time="after-hours"] .fp-walls path { stroke: rgba(242, 238, 248, 0.45); }
html[data-tempo-time="after-hours"] .fp-foundation  { stroke: rgba(242, 238, 248, 0.45); }
html[data-tempo-time="after-hours"] .fp-detail       { stroke: rgba(112, 0, 255, 0.20); }
html[data-tempo-time="after-hours"] .fp-detail-dash  { stroke: rgba(112, 0, 255, 0.12); }
html[data-tempo-time="after-hours"] .fp-floor-line   { stroke: rgba(242, 238, 248, 0.25); }
html[data-tempo-time="after-hours"] .fp-window {
  stroke: rgba(112, 0, 255, 0.30);
  fill:   rgba(112, 0, 255, 0.05);
}
html[data-tempo-time="after-hours"] .fp-door {
  stroke: rgba(242, 238, 248, 0.25);
  fill:   rgba(112, 0, 255, 0.05);
}
html[data-tempo-time="after-hours"] .fp-arch    { stroke: rgba(242, 238, 248, 0.22); }
html[data-tempo-time="after-hours"] .fp-counter {
  stroke: rgba(112, 0, 255, 0.22);
  fill:   rgba(112, 0, 255, 0.04);
}
html[data-tempo-time="after-hours"] .fp-seat    { stroke: rgba(112, 0, 255, 0.16); }
html[data-tempo-time="after-hours"] .fp-stair   { stroke: rgba(242, 238, 248, 0.16); }
html[data-tempo-time="after-hours"] .fp-dim-line { stroke: rgba(112, 0, 255, 0.14); }
html[data-tempo-time="after-hours"] .fp-outdoor-element {
  fill:   rgba(112, 0, 255, 0.04);
  stroke: rgba(112, 0, 255, 0.20);
}
html[data-tempo-time="after-hours"] .fp-level-label { fill: rgba(242, 238, 248, 0.32); }
html[data-tempo-time="after-hours"] .fp-floor-label { fill: rgba(242, 238, 248, 0.25); }
html[data-tempo-time="after-hours"] .fp-floor:hover .fp-level-label,
html[data-tempo-time="after-hours"] .fp-floor.is-active .fp-level-label {
  fill: rgba(112, 0, 255, 0.85);
}
html[data-tempo-time="after-hours"] .fp-floor:hover .fp-floor-label,
html[data-tempo-time="after-hours"] .fp-floor.is-active .fp-floor-label {
  fill: rgba(155, 0, 255, 0.72);
}
html[data-tempo-time="after-hours"] .fp-floor:hover .fp-zone-border,
html[data-tempo-time="after-hours"] .fp-floor.is-active .fp-zone-border {
  stroke: rgba(112, 0, 255, 0.50);
}
html[data-tempo-time="after-hours"] .fp-floor:hover .fp-zone-hit,
html[data-tempo-time="after-hours"] .fp-floor.is-active .fp-zone-hit {
  fill: rgba(112, 0, 255, 0.08);
}
html[data-tempo-time="after-hours"] .fp-floor:hover .fp-floor-bg,
html[data-tempo-time="after-hours"] .fp-floor.is-active .fp-floor-bg {
  fill: rgba(112, 0, 255, 0.06);
}

/* After Hours — hero overrides */
html[data-tempo-time="after-hours"] .hero[data-tempo-act="evening"] {
  background: #05030A;
}
/* Bleed line: electric violet at 45% opacity — vivid but not overwhelming */
html[data-tempo-time="after-hours"] .hero[data-tempo-act="evening"] .hero__bleed-line,
html[data-tempo-time="after-hours"] .hero[data-tempo-act="afternoon"] .hero__bleed-line,
html[data-tempo-time="after-hours"] .hero[data-tempo-act="morning"] .hero__bleed-line {
  color: rgba(112, 0, 255, 0.45);
}
/* CTA secondary: violet ghost border instead of hardcoded cream rgba */
html[data-tempo-time="after-hours"] .hero[data-tempo-act="evening"] .hero__cta-secondary {
  border-color: rgba(112, 0, 255, 0.45);
}
html[data-tempo-time="after-hours"] .hero__scroll-hint span {
  background: rgba(112, 0, 255, 0.35);
}

/* After Hours — event-type pages (corporate-events, weddings, etc.)
   These elements hardcode rgba(247,243,238,...) / rgba(123,59,59,...) washes
   in event-type.css and events-pages.css instead of theme tokens, so they
   never adapted to any theme. Overriding them directly here. */
html[data-tempo-time="after-hours"] .page-event-type__breadcrumb {
  background: rgba(5, 3, 10, 0.97);
}
html[data-tempo-time="after-hours"] .et__capacity-head,
html[data-tempo-time="after-hours"] .et__floorplan-placeholder {
  background: rgba(112, 0, 255, 0.04);
}
html[data-tempo-time="after-hours"] .et__capacity-row--highlight {
  background: rgba(112, 0, 255, 0.08);
}
html[data-tempo-time="after-hours"] .et__why-point-num {
  color: rgba(242, 238, 248, 0.14);
}

/* ── NIGHT  (18:00 – 05:00) ───────────────────────────────────── */

html[data-tempo-time="night"] {
  /* Backgrounds — intimate near-black */
  --color-bg:              #0E0C0A;
  --color-bg-alt:          #161210;

  /* Text — warm off-white */
  --color-text-primary:    #F0EBE3;
  --color-text-secondary:  rgba(240, 235, 227, 0.65);
  --color-text-muted:      rgba(240, 235, 227, 0.38);

  /* Borders */
  --color-border:          rgba(240, 235, 227, 0.07);
  --color-border-strong:   rgba(240, 235, 227, 0.16);

  /* Accent — warm gallery gold */
  --color-accent:          #C49A3A;
  --color-accent-hover:    #A87E28;
  --tempo-amber:           #C49A3A;
  --tempo-sand:            #2E2820;
  --tempo-terracotta:      #C49A3A;

  /* Nav */
  --color-nav-bg:          rgba(14, 12, 10, 0.92);

  /* Artwork canvas + border — lifted espresso so amber downlight reads */
  --tempo-frame-border:    rgba(196, 154, 58, 0.30);
}

/* Night — body (safety net if base.css doesn't use var) */
html[data-tempo-time="night"] body {
  background-color: #0E0C0A;
  color: #F0EBE3;
}

/* Night — moods ghost text */
html[data-tempo-time="night"] .moods__bleed-line {
  color: rgba(240, 235, 227, 0.06);
}

/* Night — frame number ghost (overrides hardcoded rgba(26,24,22,0.12)) */
html[data-tempo-time="night"] .moods__num {
  color: rgba(240, 235, 227, 0.07);
}
html[data-tempo-time="night"] .moods__frame[data-frame="bar"] .moods__num {
  color: rgba(240, 235, 227, 0.09);
}

/* Night — events section borders */
html[data-tempo-time="night"] .events {
  border-top-color:    rgba(240, 235, 227, 0.07);
  border-bottom-color: rgba(240, 235, 227, 0.07);
}

/* Night — event cards with light interiors (sand / cream)
   Flip title gradient and text to read on dark page background */
html[data-tempo-time="night"] .event-card[data-interior="sand"] .event-card__title-bar,
html[data-tempo-time="night"] .event-card[data-interior="cream"] .event-card__title-bar {
  background: linear-gradient(to top, rgba(14, 12, 10, 0.88) 0%, transparent 100%);
}
html[data-tempo-time="night"] .event-card[data-interior="sand"] .event-card__title,
html[data-tempo-time="night"] .event-card[data-interior="cream"] .event-card__title {
  color: #F0EBE3;
}
html[data-tempo-time="night"] .event-card[data-interior="sand"] .event-card__date-reveal,
html[data-tempo-time="night"] .event-card[data-interior="cream"] .event-card__date-reveal {
  background: linear-gradient(to bottom, rgba(14, 12, 10, 0.78) 0%, transparent 100%);
}
html[data-tempo-time="night"] .event-card[data-interior="sand"] .event-card__month,
html[data-tempo-time="night"] .event-card[data-interior="cream"] .event-card__month {
  color: #C49A3A;
}
html[data-tempo-time="night"] .event-card[data-interior="sand"] .event-card__time,
html[data-tempo-time="night"] .event-card[data-interior="cream"] .event-card__time {
  color: rgba(240, 235, 227, 0.55);
}

/* Night — list bullets + em-dash markers */
/* Base dot (var(--color-text-muted) = 38% warm white — near-invisible on dark bg) → amber */
html[data-tempo-time="night"] .page-inner__section-body ul li::before,
html[data-tempo-time="night"] .page-inner__feature-item::before {
  color: #C49A3A;
}
/* Café menu-list: var(--tempo-sage) = #6B7B5E sage green on dark bg — dim, match amber */
html[data-tempo-time="night"] .page-cafe__menu-list .page-inner__feature-item::before {
  color: #C49A3A;
}
/* Gallery: var(--tempo-terracotta) in night = #C49A3A already ✓ */
/* Bar: var(--tempo-amber) = #C49A3A already ✓ */
/* Venue: var(--tempo-terracotta) = #C49A3A already ✓ */

/* Night — CTA button contrast fix (WCAG 1.4.3, found while auditing the after-hours/
   afternoon variants of the same rule): cream text (--color-text-inverse, unchanged) on
   Night's #C49A3A gold accent measures only 2.37:1. Switching just these two buttons' text
   to the base ink color (dark text reads naturally on a warm gold swatch) reaches 6.77:1
   while leaving the gold background hue untouched. */
html[data-tempo-time="night"] .hero__cta-primary,
html[data-tempo-time="night"] .reserve-cta__primary {
  color: #1A1816;
}

/* Night — newsletter form */
html[data-tempo-time="night"] .newsletter__input {
  border-bottom-color: rgba(196, 154, 58, 0.22);
}
html[data-tempo-time="night"] .newsletter__input:focus {
  border-bottom-color: rgba(196, 154, 58, 0.65);
}
html[data-tempo-time="night"] .newsletter__btn {
  background: #C49A3A;
  color: #0E0C0A;
}
html[data-tempo-time="night"] .newsletter__btn:hover:not(:disabled) {
  background: #A88030;
}
html[data-tempo-time="night"] .newsletter__error {
  color: #E88080;
}
html[data-tempo-time="night"] .newsletter__success {
  color: #C49A3A;
}

/* ── Night — tempo-frame placeholders ─────────────────────────
   --color-bg-alt goes to #161210 in night mode, making placeholder
   canvases near-black. Override via --tempo-frame-canvas token to
   a warm espresso so the amber downlight reads correctly at night. */

html[data-tempo-time="night"] {
  --tempo-frame-canvas: #2D2924; /* warm espresso gallery wall */
}

html[data-tempo-time="night"] .tempo-frame--placeholder .tempo-frame__label {
  color: rgba(240, 235, 227, 0.45);
}

html[data-tempo-time="night"] .tempo-frame--placeholder .tempo-frame__caption {
  color: rgba(240, 235, 227, 0.36);
  border-top-color: rgba(240, 235, 227, 0.10);
}

/* ── Night — inner-page shared elements ────────────────────────
   Several elements in inner-page.css use hardcoded rgba(26,24,22)
   ink that goes invisible on dark backgrounds. Override here. */

/* section--alt has a hardcoded cream bg that looks murky in night mode */
html[data-tempo-time="night"] .page-inner__section--alt {
  background: rgba(240, 235, 227, 0.03);
}

/* Decorative rule lines — hardcoded dark rgba, invisible in night */
html[data-tempo-time="night"] .page-inner__section-head::before,
html[data-tempo-time="night"] .page-inner__eyebrow::before {
  background: rgba(240, 235, 227, 0.18);
}

/* Image placeholder frame border */
html[data-tempo-time="night"] .page-inner__img-placeholder {
  border-color: rgba(240, 235, 227, 0.08);
}
html[data-tempo-time="night"] .page-inner__img-placeholder::before {
  border-color: rgba(240, 235, 227, 0.06);
}

/* ── Night — café matcha frames ────────────────────────────────
   Default canvas (#2D2924) sits too close to the near-black
   section--dark background (#161210). Lift canvas to a lighter
   espresso so each frame reads as a distinct object. */
html[data-tempo-time="night"] .page-cafe__matcha-frame {
  --tempo-frame-canvas: #3A3028;
}

/* ── Night — bar signature alternating frames ──────────────────
   nth-child(2/4/6) use rgba(20,15,10,0.90) which is almost
   invisible on the night section--alt background. Lift to a
   readable dark espresso. */
html[data-tempo-time="night"] .page-bar__sig-item:nth-child(2) .page-bar__sig-frame,
html[data-tempo-time="night"] .page-bar__sig-item:nth-child(4) .page-bar__sig-frame,
html[data-tempo-time="night"] .page-bar__sig-item:nth-child(6) .page-bar__sig-frame {
  --tempo-frame-canvas: #362D28;
}

/* ── Night — bar signature carousel dots ───────────────────────
   Dots use hardcoded rgba(26,24,22,0.18) — invisible on dark bg. */
html[data-tempo-time="night"] .page-bar__signatures-dot {
  background: rgba(240, 235, 227, 0.16);
}
html[data-tempo-time="night"] .page-bar__signatures-dot.is-active {
  background: var(--color-accent);
}


/* ── Night — venue floor plan ──────────────────────────────────
   All fp-* SVG classes use rgba(26,24,22) ink which is invisible
   on a dark background. Flip to cream-on-dark here. */

/* Mobile tab bar + mini-detail strip use var(--tempo-cream) hardcoded */
html[data-tempo-time="night"] .venue-floorplan__tabs {
  background: #1C1814;
  border-top-color:    rgba(240, 235, 227, 0.07);
  border-bottom-color: rgba(240, 235, 227, 0.05);
}

html[data-tempo-time="night"] .venue-floorplan__tab {
  color: rgba(240, 235, 227, 0.38);
  border-bottom-color: transparent;
}

html[data-tempo-time="night"] .venue-floorplan__tab.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

html[data-tempo-time="night"] .venue-floorplan__mini-detail {
  background: #1C1814;
  border-top-color: rgba(240, 235, 227, 0.07);
}

/* Desktop hover popup */
html[data-tempo-time="night"] .venue-floorplan__popup {
  background: #1C1814;
  border-color: rgba(240, 235, 227, 0.12);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.30),
    0 1px 6px  rgba(0, 0, 0, 0.18);
}

/* Right-side floor labels — hardcoded fill:#000000 invisible on dark board */
html[data-tempo-time="night"] .fp-floor .fp-floor-label--right {
  fill: rgba(240, 235, 227, 0.45);
}
html[data-tempo-time="night"] .fp-floor:hover .fp-floor-label--right,
html[data-tempo-time="night"] .fp-floor.is-active .fp-floor-label--right {
  fill: rgba(196, 154, 58, 0.82);
}

html[data-tempo-time="night"] .venue-floorplan {
  background: var(--color-bg);
  border-top-color:    rgba(240, 235, 227, 0.07);
  border-bottom-color: rgba(240, 235, 227, 0.07);
}

/* Graph-paper grid: flip to light lines */
html[data-tempo-time="night"] .venue-floorplan::before {
  background-image:
    linear-gradient(rgba(240, 235, 227, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 235, 227, 0.04) 1px, transparent 1px);
}

/* Building board + SVG wrap: warm near-black */
html[data-tempo-time="night"] .venue-floorplan__building {
  background: #1C1814;
  border-right-color: rgba(240, 235, 227, 0.07);
}

html[data-tempo-time="night"] .venue-floorplan__svg-wrap {
  background: #1C1814;
  border-color: rgba(240, 235, 227, 0.10);
  box-shadow:
    0 2px 20px rgba(0, 0, 0, 0.30),
    0 1px 4px  rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(240, 235, 227, 0.04);
}

html[data-tempo-time="night"] .venue-floorplan__svg-wrap::after {
  color: rgba(240, 235, 227, 0.28);
  border-top-color: rgba(240, 235, 227, 0.08);
}

/* Detail panel: match board colour */
html[data-tempo-time="night"] .venue-floorplan__detail {
  background: #1C1814;
}

/* SVG structural lines → cream */
html[data-tempo-time="night"] .fp-walls rect,
html[data-tempo-time="night"] .fp-walls path { stroke: rgba(240, 235, 227, 0.55); }

html[data-tempo-time="night"] .fp-foundation  { stroke: rgba(240, 235, 227, 0.55); }
html[data-tempo-time="night"] .fp-detail       { stroke: rgba(240, 235, 227, 0.18); }
html[data-tempo-time="night"] .fp-detail-dash  { stroke: rgba(240, 235, 227, 0.11); }
html[data-tempo-time="night"] .fp-floor-line   { stroke: rgba(240, 235, 227, 0.32); }

html[data-tempo-time="night"] .fp-window {
  stroke: rgba(240, 235, 227, 0.28);
  fill:   rgba(240, 235, 227, 0.04);
}
html[data-tempo-time="night"] .fp-door {
  stroke: rgba(240, 235, 227, 0.28);
  fill:   rgba(240, 235, 227, 0.04);
}
html[data-tempo-time="night"] .fp-arch    { stroke: rgba(240, 235, 227, 0.28); }
html[data-tempo-time="night"] .fp-counter {
  stroke: rgba(240, 235, 227, 0.20);
  fill:   rgba(240, 235, 227, 0.04);
}
html[data-tempo-time="night"] .fp-seat   { stroke: rgba(240, 235, 227, 0.14); }
html[data-tempo-time="night"] .fp-stair  { stroke: rgba(240, 235, 227, 0.16); }
html[data-tempo-time="night"] .fp-dim-line { stroke: rgba(240, 235, 227, 0.14); }

/* Outdoor terrace elements (trees, furniture, paving lines):
   hardcoded dark fills invisible in night mode — flip to cream-on-dark */
html[data-tempo-time="night"] .fp-outdoor-element {
  fill: rgba(240, 235, 227, 0.05);
  stroke: rgba(240, 235, 227, 0.22);
}

html[data-tempo-time="night"] .fp-level-label { fill: rgba(240, 235, 227, 0.32); }
html[data-tempo-time="night"] .fp-floor-label { fill: rgba(240, 235, 227, 0.28); }

/* Night active/hover: amber-gold accent */
html[data-tempo-time="night"] .fp-floor:hover .fp-level-label,
html[data-tempo-time="night"] .fp-floor.is-active .fp-level-label {
  fill: rgba(196, 154, 58, 0.82);
}
html[data-tempo-time="night"] .fp-floor:hover .fp-floor-label,
html[data-tempo-time="night"] .fp-floor.is-active .fp-floor-label {
  fill: rgba(196, 154, 58, 0.72);
}
html[data-tempo-time="night"] .fp-floor:hover .fp-zone-border,
html[data-tempo-time="night"] .fp-floor.is-active .fp-zone-border {
  stroke: rgba(196, 154, 58, 0.48);
}
html[data-tempo-time="night"] .fp-floor:hover .fp-zone-hit,
html[data-tempo-time="night"] .fp-floor.is-active .fp-zone-hit {
  fill: rgba(196, 154, 58, 0.08);
}
html[data-tempo-time="night"] .fp-floor:hover .fp-floor-bg,
html[data-tempo-time="night"] .fp-floor.is-active .fp-floor-bg {
  fill: rgba(196, 154, 58, 0.08);
}

/* ── HERO overrides ─────────────────────────────────────────────
   hero.js sets data-tempo-act on .hero independently via real clock.
   The switcher now overrides data-tempo-act via JS syncHero(), but
   CSS guards here prevent flash if there's any timing gap.
   ──────────────────────────────────────────────────────────────── */

/* Day + hero-morning (base) → already correct: cream bg, terracotta bleed via --color-accent */

/* Afternoon — hero evening-act conflict: bg should be day cream, not dark ink */
html[data-tempo-time="afternoon"] .hero[data-tempo-act="evening"] {
  background: var(--color-bg);
}
html[data-tempo-time="afternoon"] .hero[data-tempo-act="evening"] .hero__bleed-line {
  color: var(--color-accent);
}
html[data-tempo-time="afternoon"] .hero[data-tempo-act="evening"] .hero__eyebrow,
html[data-tempo-time="afternoon"] .hero[data-tempo-act="evening"] .hero__descriptor {
  color: var(--color-text-muted);
}
html[data-tempo-time="afternoon"] .hero[data-tempo-act="evening"] .hero__tagline {
  color: var(--color-text-secondary);
}
html[data-tempo-time="afternoon"] .hero[data-tempo-act="evening"] .hero__tagline em {
  color: var(--color-text-primary);
}
html[data-tempo-time="afternoon"] .hero[data-tempo-act="evening"] .hero__cta-secondary {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
html[data-tempo-time="afternoon"] .hero[data-tempo-act="evening"] .hero__scroll-hint span {
  background: var(--color-border-strong);
}

/* Night — hero evening-act: swap hardcoded ink bg for theme dark bg */
html[data-tempo-time="night"] .hero[data-tempo-act="evening"] {
  background: var(--color-bg);
}

/* Night — hero bleed: replace dim terracotta with warm gold accent
   Covers both evening-act and afternoon-act (if JS sync hasn't fired yet) */
html[data-tempo-time="night"] .hero[data-tempo-act="evening"] .hero__bleed-line,
html[data-tempo-time="night"] .hero[data-tempo-act="afternoon"] .hero__bleed-line,
html[data-tempo-time="night"] .hero[data-tempo-act="morning"] .hero__bleed-line {
  color: var(--color-accent);
}

/* Night — hero scroll hint */
html[data-tempo-time="night"] .hero__scroll-hint span {
  background: rgba(240, 235, 227, 0.16);
}