/* ═══════════════════════════════════════════════════════════════════════
   theme.css — dark / light theme for the whole site.

   Load LAST on every page (after responsive.css).

   HOW IT WORKS
   Every colour that used to be hard-coded in the stylesheets now reads
   from a token defined here. The DARK values below are exactly the
   colours the site shipped with, so the night design is unchanged.
   <html data-theme="light"> swaps the tokens; nothing else has to know.

   TOKENS
     --bg / --deep / --char     page, alternate section, raised card
     --white / --cream / --mist primary text, secondary text, muted text
     --*-rgb                    same colours as "r,g,b" so alpha can be
                                layered:  rgb(var(--cream-rgb) / .5)
     --text-k / --line-k        alpha multipliers (light needs stronger
     --shadow-k                 secondary text + hairlines, softer shadows)
     --gold-ink / --ember-ink   brand colours as TEXT (darkened on light
                                so they stay readable)
     --ok-ink / --bad-ink / --err-ink   status text colours
   Brand FILLS (--gold, --amber, --ember) never change.
   Constants that must not change with the theme: --ink, --paper, --on-gold.

   DARK ISLANDS
   Heroes, photo cards and the un-scrolled nav sit on photographs with a
   dark gradient, so their light text must stay light in BOTH themes.
   Those areas re-declare the dark tokens locally (see the list below).
   Add a selector to that list if you build a new photo-overlay component.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ink: #0a0805;          /* constant: dark text on gold */
  --paper: #fdfaf4;        /* constant: light text on dark buttons */
  --on-gold: #0a0805;      /* constant: text placed on gold/ember fills */
}

/* ── DARK (default — the original design) ── */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0805;       --bg-rgb: 10 8 5;
  --deep: #110e09;
  --char: #1c1710;
  --white: #fdfaf4;    --white-rgb: 253 250 244;
  --cream: #F5EDD6;    --cream-rgb: 245 237 214;
  --mist: #8a7f6e;
  --gold-ink: #E8A020;
  --ember-ink: #E84320;
  --ok-ink: #2ECC71;
  --bad-ink: #E85A5A;
  --err-ink: #ff9478;
  --line-rgb: 255 255 255;
  --shadow-rgb: 0 0 0;
  --text-k: 1;  --line-k: 1;  --shadow-k: 1;
}

/* ── LIGHT ── */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #FAF6EE;       --bg-rgb: 250 246 238;
  --deep: #F1E9D8;
  --char: #FFFCF6;
  --white: #1F1810;    --white-rgb: 31 24 16;
  --cream: #2B2115;    --cream-rgb: 43 33 21;
  --mist: #6B5F4B;
  --gold-ink: #8A5200;
  --ember-ink: #B8330F;
  --ok-ink: #147038;
  --bad-ink: #B93226;
  --err-ink: #B93226;
  --line-rgb: 74 52 20;
  --shadow-rgb: 70 45 10;
  --text-k: 1.4;  --line-k: 1.5;  --shadow-k: .32;
}

/* ── DARK ISLANDS inside the light theme ──────────────────────────────── */
html[data-theme="light"] :is(
  #hs-hero, #menu-hero, #specials-hero, #gallery-hero,   /* page heroes */
  body[data-hero="dark"] #navbar:not(.scrolled),   /* nav floating over a photo hero */
  .hero-img-cell, .exp-image, .cat-card,    /* home photo cards */
  .cc-card, .highlight-card, .pastry-feature,
  .seasonal-feature, .seasonal-card, .plate-card, .gt-photo-card,
  .dp-image, .hh-visual, .ent-facility-image, .bts-video,
  .about-lead-photo, .facility-card, .room-cat-card,   /* about page */
  .swipe-hint-badge, .hv-card, .rv-card, .fp-card
) {
  --bg: #0a0805;       --bg-rgb: 10 8 5;
  --deep: #110e09;
  --char: #1c1710;
  --white: #fdfaf4;    --white-rgb: 253 250 244;
  --cream: #F5EDD6;    --cream-rgb: 245 237 214;
  --mist: #8a7f6e;
  --gold-ink: #E8A020;
  --ember-ink: #E84320;
  --ok-ink: #2ECC71;
  --bad-ink: #E85A5A;
  --err-ink: #ff9478;
  --line-rgb: 255 255 255;
  --shadow-rgb: 0 0 0;
  --text-k: 1;  --line-k: 1;  --shadow-k: 1;
  color: var(--white);   /* plain text inherits the *computed* colour, so set it here */
}

/* The mobile nav panel opens as a solid sheet, so it follows the page
   theme even while the bar behind it is floating over a hero. */
@media (max-width: 1300px) {
  html[data-theme="light"] #navbar:not(.scrolled) .nav-links {
    --bg: #FAF6EE;       --bg-rgb: 250 246 238;
    --deep: #F1E9D8;
    --char: #FFFCF6;
    --white: #1F1810;    --white-rgb: 31 24 16;
    --cream: #2B2115;    --cream-rgb: 43 33 21;
    --mist: #6B5F4B;
    --gold-ink: #8A5200;
    --line-rgb: 74 52 20;
    --shadow-rgb: 70 45 10;
    --text-k: 1.4;  --line-k: 1.5;  --shadow-k: .32;
    color: var(--white);
  }
}

/* ── LIGHT-THEME DETAILS ─────────────────────────────────────────────── */
html[data-theme="light"] body { background: var(--bg); color: var(--white); }
html[data-theme="light"] ::selection { background: rgba(232,160,32,.35); color: #1F1810; }

/* home hero: outlined headline word needs a deeper gold to read on ivory */
html[data-theme="light"] .hero-h1 em { -webkit-text-stroke-color: #9A5B00; }

/* the dark button on the gold CTA band stays dark, hover included */
html[data-theme="light"] .btn-dark:hover { background: #1c1710; }

/* white "Continue with Google" button needs an edge on a light sheet */
html[data-theme="light"] .auth-google-btn { box-shadow: inset 0 0 0 1px rgb(var(--line-rgb) / .28); }

/* brand-gold focus rings are too pale on ivory (≈2:1) — use the ink gold */
html[data-theme="light"] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--gold-ink);
}

/* loader wordmark (inline SVG, so it can't use the tokens directly) */
.lg-word { fill: var(--white); }
.lg-tag  { fill: var(--gold-ink); }

/* colour change on toggle: short, and skipped for reduced-motion users */
@media (prefers-reduced-motion: no-preference) {
  html.theme-anim *:not(.tt-pill),
  html.theme-anim *:not(.tt-pill)::before,
  html.theme-anim *:not(.tt-pill)::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease,
                fill .35s ease, box-shadow .35s ease !important;
  }
}

/* ── FOOTER TOGGLE ───────────────────────────────────────────────────── */
.footer-controls { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.theme-toggle {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  align-items: center; height: 36px; padding: 3px; flex-shrink: 0;
  background: var(--bg); border: 1px solid rgba(232,160,32,.28); border-radius: 99px;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle .tt-pill {
  position: absolute; top: 3px; left: 3px; bottom: 3px; width: calc(50% - 3px);
  background: var(--gold); border-radius: 99px; z-index: 0;
  transition: transform .35s cubic-bezier(.25,.8,.25,1);
}
.theme-toggle.is-dark .tt-pill { transform: translateX(100%); }
.theme-toggle button {
  position: relative; z-index: 1; height: 30px; padding: 0 .95rem;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: none; border: none; border-radius: 99px; cursor: pointer; white-space: nowrap;
  font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgb(var(--cream-rgb) / calc(.6 * var(--text-k)));
  transition: color .3s;
}
.theme-toggle button:hover { color: var(--gold-ink); }
.theme-toggle button.active,
.theme-toggle button.active:hover { color: var(--on-gold); }
.theme-toggle button svg { width: 14px; height: 14px; flex-shrink: 0; }
.theme-toggle button:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .theme-toggle .tt-pill, .theme-toggle button { transition: none; } }
@media (max-width: 768px) { .footer-controls { justify-content: center; } }

/* ── "TOO BRIGHT / TOO DARK?" HINT ───────────────────────────────────────
   Drawn in the OPPOSITE theme on purpose (it previews the fix), so it uses
   fixed colours rather than the theme tokens. ─────────────────────────── */
.theme-hint {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 97;
  display: flex; align-items: center; gap: .8rem;
  max-width: min(92vw, 470px); padding: .5rem .5rem .5rem .55rem;
  border: 1px solid transparent; border-radius: 99px; cursor: pointer;
  background:
    linear-gradient(var(--th-bg), var(--th-bg)) padding-box,
    linear-gradient(120deg, #E8A020, #E84320 55%, #E8A020) border-box;
  color: var(--th-text);
  box-shadow: 0 18px 44px var(--th-shadow), 0 2px 0 rgba(255,255,255,.04) inset;
  font-family: 'Inter', sans-serif;
  opacity: 0; transform: translate(-50%, 30px); pointer-events: none;
  transition: transform .65s cubic-bezier(.2,.9,.25,1), opacity .45s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-hint.is-in { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.theme-hint[data-look="night"] {
  --th-bg: #14100a; --th-text: #fdfaf4; --th-sub: #E8A020;
  --th-orb-bg: radial-gradient(circle at 30% 25%, #2a2116, #0a0805 75%); --th-orb-fg: #F4C24A;
  --th-shadow: rgba(10,8,5,.45); --th-close-bg: #14100a; --th-close-fg: #F5EDD6;
}
.theme-hint[data-look="day"] {
  --th-bg: #FFFCF6; --th-text: #1F1810; --th-sub: #8A5200;
  --th-orb-bg: radial-gradient(circle at 30% 25%, #FFE9A8, #F4C24A 80%); --th-orb-fg: #6B3E00;
  --th-shadow: rgba(70,45,10,.32); --th-close-bg: #FFFCF6; --th-close-fg: #2B2115;
}
.th-orb {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--th-orb-bg); color: var(--th-orb-fg);
  box-shadow: inset 0 0 0 1px rgba(232,160,32,.35);
}
.th-orb svg { width: 19px; height: 19px; }
.th-copy { display: flex; flex-direction: column; gap: .12rem; min-width: 0; line-height: 1.25; }
.th-copy strong { font-size: .88rem; font-weight: 600; letter-spacing: .005em; }
.th-copy span { font-size: .74rem; font-weight: 500; letter-spacing: .02em; color: var(--th-sub); }
.th-go {
  flex: 0 0 auto; width: 42px; height: 42px; margin-left: .25rem; border: none; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: #E8A020; color: #0a0805;
  box-shadow: 0 6px 16px rgba(232,160,32,.4);
  transition: transform .2s, background .2s;
}
.th-go svg { width: 19px; height: 19px; }
.th-go:hover { background: #C97B1A; transform: scale(1.07); }
.th-close {
  position: absolute; top: -9px; right: 4px; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  font-size: 1rem; line-height: 1; color: var(--th-close-fg); background: var(--th-close-bg);
  border: 1px solid rgba(232,160,32,.5); opacity: .85;
  transition: opacity .2s, transform .2s;
}
.th-close:hover { opacity: 1; transform: scale(1.1); }
.th-go:focus-visible, .th-close:focus-visible { outline: 2px solid #E84320; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .theme-hint.is-in .th-go svg { animation: thBob 1.7s ease-in-out infinite; }
  @keyframes thBob { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
  .theme-toggle.tt-attn { animation: ttRing 1.2s ease-out 2; }
  @keyframes ttRing {
    0%   { box-shadow: 0 0 0 0 rgba(232,160,32,.65); }
    100% { box-shadow: 0 0 0 16px rgba(232,160,32,0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle.tt-attn { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
}
/* phones: leave room for the floating chat / cart buttons on the right */
@media (max-width: 600px) {
  .theme-hint { left: .9rem; right: 5.4rem; max-width: none; bottom: 1rem; transform: translateY(30px); gap: .65rem; }
  .theme-hint.is-in { transform: translateY(0); }
  .th-orb { width: 36px; height: 36px; }
  .th-go { width: 40px; height: 40px; margin-left: auto; }
  .th-copy strong { font-size: .82rem; }
  .th-copy span { font-size: .7rem; }
}
/* ── LIVE STORE STATUS BADGE ──────────────────────────────────────────────
   "Open Now" / "Closed — …", driven by siteSettings/storeStatus (the Store
   Open/Closed button in the admin's top bar) through subscribeStoreStatus()
   in firebase-public-config.js. Hidden until that document exists. It has
   its own solid background so it reads on both the photo heroes and the
   plain page in either theme. Restaurant-side pages only. */
.store-status-badge {
  position: fixed; top: 84px; left: 14px; z-index: 40;
  display: none; align-items: center; gap: .5rem;
  max-width: min(80vw, 340px); padding: .38rem .85rem;
  background: var(--char); color: var(--white);
  border: 1px solid rgb(var(--line-rgb) / calc(.18 * var(--line-k))); border-radius: 99px;
  font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  box-shadow: 0 8px 22px rgb(var(--shadow-rgb) / calc(.3 * var(--shadow-k)));
  pointer-events: none;
}
.store-status-badge.ssb-visible { display: inline-flex; }
.store-status-badge .ssb-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--mist); }
.store-status-badge.open .ssb-dot { background: var(--ok-ink); box-shadow: 0 0 0 0 rgba(46,204,113,.5); }
.store-status-badge.closed .ssb-dot { background: var(--bad-ink); }
.store-status-badge #store-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .store-status-badge.open .ssb-dot { animation: ssbPulse 2s ease-out infinite; }
  @keyframes ssbPulse { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.5); } 100% { box-shadow: 0 0 0 8px rgba(46,204,113,0); } }
}
@media (max-width: 768px) { .store-status-badge { top: 72px; left: 10px; font-size: .7rem; } }