/* ═══════════════════════════════════════════════════════════════
   MUI 無為 — Light mode
   Surface / text tokens are the Mui app's light palette
   (mui-supper-club-mobile/src/theme/colors.ts → export const light).
   Gold is the app family darkened just enough to clear WCAG AA on
   cream, because the same token is used for links and small labels.

   Loaded after every page's inline <style>. All rules here are
   higher-specificity than the originals, so load order doesn't matter.
   ═══════════════════════════════════════════════════════════════ */

:root { color-scheme: dark; }

html[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — app: bg / surface1 / surface2 / surface3 */
  --black: #f5f2ed;
  --black-rich: #ffffff;
  --black-soft: #ffffff;
  --charcoal: #ffffff;
  --graphite: #e2ddd4;

  /* Text — dim → primary (app: textDim / textMuted / text) */
  --ash: #736d67;
  --stone: #6b6560;
  --silver: #55504a;
  --mist: #3d3833;
  --cream: #2b2724;
  --white: #1a1a1a;

  /* Gold — app #a08040 family, darkened for AA on cream */
  --gold: #87682a;
  --gold-light: #6b5220;
  --gold-dim: #7a6234;
  --accent: #7a6448;
}

body { transition: background-color 0.35s ease, color 0.35s ease; }

/* ── Theme toggle (both modes) ───────────────────────────────── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  cursor: pointer;
  padding: 0;
  transition: all 0.4s var(--ease-luxury);
}

.theme-toggle:hover {
  border-color: var(--gold);
  background: rgba(196, 162, 101, 0.1);
}

html[data-theme="light"] .theme-toggle:hover {
  background: rgba(160, 128, 64, 0.12);
}

html:not([data-theme="light"]) .theme-toggle .tt-moon { display: none; }
html[data-theme="light"] .theme-toggle .tt-sun { display: none; }

@media (max-width: 768px) {
  .nav-actions { gap: 1.1rem; }
}

/* ═══ Light-mode fixes for hard-coded (non-token) colours ═══ */

/* Cursor — `difference` blending inverts on a light page */
html[data-theme="light"] .cursor { mix-blend-mode: multiply; }
html[data-theme="light"] .cursor.hovering { background: rgba(160, 128, 64, 0.16); }

/* Nav + mobile menu scrims */
html[data-theme="light"] .nav {
  background: rgba(245, 242, 237, 0.88);
  /* Inset for the same reason as the dark hairline — see the .nav rule in each page. */
  box-shadow: inset 0 -1px 0 rgba(135, 104, 42, 0.18);
}
/* The homepage nav floats over the hero until you scroll; every other
   page's nav is solid from the start, and a floating nav carries no hairline. */
html[data-theme="light"] body:has(.hero) .nav:not(.scrolled) { background: transparent; box-shadow: none; }
html[data-theme="light"] .mobile-menu { background: rgba(245, 242, 237, 0.98); }

/* ── Homepage: hero ── */
/* The hero clip is shown at its original colour in BOTH themes — no filter,
   no scrim, no grain. Legibility is handled entirely by halos on the type. */
html[data-theme="light"] .hero-vertical-right { color: rgba(26, 26, 26, 0.28); }

/* ── Homepage: philosophy ── */
/* Gold hairlines on white lose contrast faster than they do on near-black —
   these run higher than their dark-mode counterparts to land in the same place. */
html[data-theme="light"] .philosophy-circle { border-color: rgba(135, 104, 42, 0.7); }
html[data-theme="light"] .philosophy-circle::before { border-color: rgba(135, 104, 42, 0.45); }
html[data-theme="light"] .philosophy-orbit { border-color: rgba(135, 104, 42, 0.35); }
html[data-theme="light"] .philosophy-mark { opacity: 0.7; }

/* ── Photo tiles: brighten the image, flip the caption scrim to cream ── */
html[data-theme="light"] .cuisine-card-img { filter: brightness(1) saturate(0.85); }
html[data-theme="light"] .cuisine-card:hover .cuisine-card-img { filter: brightness(1.05) saturate(1); }
html[data-theme="light"] .cuisine-card-content {
  background: linear-gradient(to top, rgba(245, 242, 237, 0.98) 0%, rgba(245, 242, 237, 0.94) 32%, rgba(245, 242, 237, 0.55) 70%, rgba(245, 242, 237, 0) 100%);
}

html[data-theme="light"] .sig-card-img { filter: brightness(1) saturate(0.95); }
html[data-theme="light"] .sig-card:hover .sig-card-img { filter: brightness(1.05) saturate(1.05); }
html[data-theme="light"] .sig-card-overlay {
  background: linear-gradient(to top, rgba(245, 242, 237, 0.98) 0%, rgba(245, 242, 237, 0.94) 45%, rgba(245, 242, 237, 0.6) 78%, rgba(245, 242, 237, 0) 100%);
}
/* --white is near-black in light mode; the badge still needs white on vermillion */
html[data-theme="light"] .sig-badge.new { color: #ffffff; }

html[data-theme="light"] .feat-image img { filter: brightness(1) saturate(0.95); }
html[data-theme="light"] .ambiance-img { filter: brightness(1.02) saturate(0.9); }
html[data-theme="light"] .venue-gallery-grid .gallery-item img { filter: brightness(0.97); }
html[data-theme="light"] .venue-gallery-grid .gallery-item:hover img { filter: brightness(1.04); }
html[data-theme="light"] .tier-card-image,
html[data-theme="light"] .space-grid-item img { filter: brightness(1); }

/* ── Homepage: fire → sea ── */
html[data-theme="light"] .fs-fire img { filter: brightness(1.02) saturate(0.85) contrast(0.95); }
html[data-theme="light"] .fs-sea img { filter: brightness(1.05) saturate(0.8); }
html[data-theme="light"] .fs-vignette {
  background: none;
}
html[data-theme="light"] .fs-kanji-fire {
  color: rgba(135, 104, 42, 0.22);
  text-shadow: 0 0 80px rgba(160, 128, 64, 0.25);
}
html[data-theme="light"] .fs-kanji-sea { color: rgba(70, 110, 150, 0.2); }

/* ── Giant kanji watermarks ── */
html[data-theme="light"] .omakase::before,
html[data-theme="light"] .legal-hero::before,
html[data-theme="light"] .events-hero::before,
html[data-theme="light"] .membership-hero::before {
  color: rgba(135, 104, 42, 0.07);
}
/* These two are the brush-calligraphy 無為 and are painted with a mask, so the
   tint lives on background rather than color. */
html[data-theme="light"] .events-cta::before,
html[data-theme="light"] .membership-cta::before {
  background: rgba(135, 104, 42, 0.07);
}

/* ── Hairlines that were white- or gold-on-black at very low alpha ── */
html[data-theme="light"] .menu-item,
html[data-theme="light"] .footer-bottom,
html[data-theme="light"] .tier-card-benefits li,
html[data-theme="light"] .offerings-grid li,
html[data-theme="light"] .comparison-table tbody td {
  border-bottom-color: rgba(160, 128, 64, 0.18);
}
html[data-theme="light"] .footer-bottom { border-top-color: rgba(160, 128, 64, 0.18); }
html[data-theme="light"] .menu-divider-v { background: rgba(135, 104, 42, 0.22); }
html[data-theme="light"] .faq-item { border-bottom-color: rgba(135, 104, 42, 0.22); }
html[data-theme="light"] .footer { border-top-color: rgba(135, 104, 42, 0.2); }
html[data-theme="light"] .deco-line { background: rgba(135, 104, 42, 0.18); }
html[data-theme="light"] .legal-section h2 { border-bottom-color: rgba(135, 104, 42, 0.28); }
html[data-theme="light"] .legal-section a { border-bottom-color: rgba(135, 104, 42, 0.45); }

/* ── Tinted panels: 3–6% gold is invisible on cream ── */
html[data-theme="light"] .legal-highlight,
html[data-theme="light"] .app-steps li,
html[data-theme="light"] .deletion-note,
html[data-theme="light"] .support-contact-card,
html[data-theme="light"] .sms-consent {
  background: rgba(160, 128, 64, 0.09);
}
html[data-theme="light"] .support-contact-card,
html[data-theme="light"] .sms-sample {
  border-color: rgba(135, 104, 42, 0.25);
}
html[data-theme="light"] .comparison-table tbody tr:hover { background: rgba(160, 128, 64, 0.08); }
html[data-theme="light"] .opening-banner {
  background: linear-gradient(180deg, rgba(160, 128, 64, 0.12) 0%, transparent 100%);
  border-top-color: rgba(135, 104, 42, 0.25);
  border-bottom-color: rgba(135, 104, 42, 0.25);
}

/* ── Gold glow on the reservation CTA ── */
html[data-theme="light"] .reservation-cta:hover {
  box-shadow: 0 8px 30px rgba(135, 104, 42, 0.28);
}

/* ── Mermaid mark in the nav lockup ──────────────────────────────
   Painted with background + mask rather than <img> so it inherits
   var(--gold) and recolours itself in light mode for free.        */
.nav-mark {
  width: 1.03rem;          /* mark is 0.47:1 — width tracks height */
  height: 2.2rem;
  flex-shrink: 0;
  background: var(--gold);
  -webkit-mask: url('images/mermaid-mark.png') center / contain no-repeat;
          mask: url('images/mermaid-mark.png') center / contain no-repeat;
}
@media (max-width: 768px) {
  .nav-mark { height: 1.8rem; width: 0.85rem; }
}

/* ═══ Hero legibility ═════════════════════════════════════════════
   NOT theme-scoped, deliberately. The hero clip is now shown ungraded
   with nothing painted over it, so the backdrop is byte-identical in
   both themes — which means the type over it must be too. Measured on
   the footage: the centre is blazing (L≈0.41–0.47) while the outer ring
   and the bottom are dark (L≈0.08–0.12). So the centre column is dark,
   the surrounding chrome is light, and each carries an opposing halo for
   the frames where the bright centre drifts underneath.
   Only applies while the nav floats over the hero; once it scrolls and
   gains its own background, the normal per-theme colours resume. */

/* — centre column: white with a real shadow stack —
   White on the blazing centre only works with a genuine dark aura behind it,
   not a single drop shadow, so each of these carries four stacked shadows at
   widening radii. Subtitle and tagline are scaled +30%: the clamps are the
   originals multiplied through, so the responsive behaviour is preserved
   (1.1/2.2vw/1.5 -> 1.43/2.86vw/1.95, 0.95/1.3vw/1.15 -> 1.235/1.69vw/1.495).
   MUI keeps its own size, including its mobile overrides. */
.hero-kanji {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0,0,0,1),
    0 0 3px rgba(0,0,0,0.98),
    0 0 6px rgba(0,0,0,0.95),
    0 0 12px rgba(0,0,0,0.9),
    0 0 24px rgba(0,0,0,0.8),
    0 0 60px rgba(0,0,0,0.6);
}
.hero-subtitle {
  color: #ffffff;
  font-size: clamp(1.43rem, 2.86vw, 1.95rem);
  text-shadow:
    0 1px 2px rgba(0,0,0,1),
    0 0 3px rgba(0,0,0,0.98),
    0 0 6px rgba(0,0,0,0.95),
    0 0 12px rgba(0,0,0,0.9),
    0 0 24px rgba(0,0,0,0.8),
    0 0 44px rgba(0,0,0,0.6);
}
.hero-tagline {
  color: #ffffff;
  font-size: clamp(1.235rem, 1.69vw, 1.495rem);
  text-shadow:
    0 1px 2px rgba(0,0,0,1),
    0 0 3px rgba(0,0,0,0.98),
    0 0 6px rgba(0,0,0,0.95),
    0 0 12px rgba(0,0,0,0.9),
    0 0 24px rgba(0,0,0,0.8),
    0 0 36px rgba(0,0,0,0.6);
}
.hero-line {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

/* — chrome on the dark ring: light with a dark halo — */
body:has(.hero) .nav:not(.scrolled) .nav-logo {
  color: #f7f4ef;
  text-shadow: 0 1px 14px rgba(0,0,0,0.95), 0 0 28px rgba(0,0,0,0.8);
}
body:has(.hero) .nav:not(.scrolled) .nav-links a {
  color: #f7f4ef;
  /* the nav band's backdrop swings through the loop as the dome brightens, so
     this needs a real halo rather than a drop shadow to hold its worst frame */
  text-shadow: 0 1px 12px rgba(0,0,0,0.95), 0 0 26px rgba(0,0,0,0.85);
}
body:has(.hero) .nav:not(.scrolled) .nav-links a:hover { color: #e2c489; }
body:has(.hero) .nav:not(.scrolled) .nav-reserve,
body:has(.hero) .nav:not(.scrolled) .theme-toggle {
  color: #e2c489;
  border-color: rgba(226,196,137,0.5);
  text-shadow: 0 1px 14px rgba(0,0,0,0.7);
}
body:has(.hero) .nav:not(.scrolled) .nav-toggle span { background: #f5f3ef; }
/* nav-mark is the mermaid lockup added alongside this work; harmless if absent */
body:has(.hero) .nav:not(.scrolled) .nav-mark { background: #e2c489; }

.hero-scroll span {
  color: #e0dbd2;
  text-shadow: 0 1px 16px rgba(0,0,0,0.8);
}
.hero-scroll-line {
  background: linear-gradient(to bottom, rgba(226,196,137,0.85), transparent);
}
.hero-vertical-right { color: rgba(245,243,239,0.26); }

/* — fire → sea: fog is off, so the photos read as a dark cinematic band — */
html[data-theme="light"] .fs-label {
  color: #e2c489;
  text-shadow: 0 1px 12px rgba(0,0,0,0.95), 0 0 30px rgba(0,0,0,0.7);
}
html[data-theme="light"] .fs-title {
  color: #f5f3ef;
  text-shadow: 0 2px 30px rgba(0,0,0,0.8), 0 0 70px rgba(0,0,0,0.55);
}
html[data-theme="light"] .fs-sub {
  color: #efeae3;
  /* sits directly over the brightest part of the plate — needs a real halo,
     not just a drop shadow, to hold its own */
  text-shadow: 0 1px 10px rgba(0,0,0,0.95), 0 0 26px rgba(0,0,0,0.85), 0 0 55px rgba(0,0,0,0.6);
}

/* ═══ 無為 set in brush calligraphy ═══════════════════════════════
   Masked rather than <img> so it takes currentColor — every instance
   therefore inherits whatever colour its existing rule already resolves
   to, in either theme, with no per-instance overrides. height:1em means
   all the existing font-size rules keep working untouched.
   Kept as an accessible image: aria-label carries the characters, so
   screen readers and search engines still get 無為 as text. */
.kanji-mark {
  display: inline-block;
  height: 1em;
  aspect-ratio: 1173 / 563;
  vertical-align: -0.14em;
  background: currentColor;
  -webkit-mask: url('images/mui-kanji.png') center / contain no-repeat;
          mask: url('images/mui-kanji.png') center / contain no-repeat;
}

/* ── Phones get the portrait hero cut ──────────────────────────────
   The landscape clip is 2.33:1; object-fit:cover on a portrait phone crops
   it to a narrow centre sliver, which is why there is a separate 0.75:1
   cut. The <source> swap happens in index.html (media on <source> is only
   honoured inside <picture>); this just keeps the CSS poster in step. */
@media (max-width: 768px) {
  .hero-bg { background-image: url('images/hero-dome-mobile.jpg'); }
}