/*
 * theme.css — Gulab Mahal. Opens dark (a Jaipur night); a cream day-mode
 * lives under html[data-theme="light"]. Maroon ground, thin gold rules,
 * a sunset ember for the filled action.
 */

:root {
  color-scheme: dark;

  --canvas: #241419;
  --surface: #3a2c30;
  --surface-2: #453339;
  --border: #4d383d;
  --border-strong: #7a5642;
  --ink: #f3e8d6;
  --muted: #a89c93;

  --accent: #e2672e;
  --accent-hover: #c9551f;
  --accent-ink: #241419;
  --accent-text: #c9974c;
  --accent-strong: #f4a869;
  --accent-soft: #4a342f;
  --accent-border: #7a5642;

  --success: #4c8c5a;
  --success-ink: #17241a;
  --success-soft: #253527;
  --success-strong: #8ec49a;

  --warning: #cf9a3e;
  --warning-ink: #241a0d;
  --warning-soft: #3a2f1c;
  --warning-strong: #e0b567;

  --danger: #c65c46;
  --danger-ink: #2a1210;
  --danger-soft: #3c231f;
  --danger-strong: #e08b78;

  --chart-1: #e2672e;
  --chart-2: #c9974c;
  --chart-3: #e67e4e;
  --chart-4: #a85c3f;
  --chart-5: #8a6a4a;
  --chart-6: #d98b5f;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-btn: none;
  --shadow-raised: 0 24px 64px -24px color-mix(in srgb, var(--canvas) 70%, transparent);
  --card-pad: 2rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 600;
  --measure: 62ch;

  --gradient-sunset: linear-gradient(135deg, #e2672e 0%, #e67e4e 45%, #c9974c 100%);
  --gradient-dusk: linear-gradient(180deg, color-mix(in srgb, var(--canvas) 0%, transparent) 0%, color-mix(in srgb, var(--canvas) 92%, transparent) 82%, var(--canvas) 100%);

  /* Fixed light tone for type set directly over a photograph (the hero, the
     transparent nav while it rides over it) — the photo never changes with
     the mode switch, so this doesn't either. */
  --x-hero-ink: #f7ead8;
  --x-hero-muted: #e7d3ba;
  --x-hero-accent: #f4b478;
  /* A fixed dark ground for the hero's own scrim and its overlaid nav — the
     photo is darkened by the same amount whichever mode is switched on, so
     the fixed light hero text above always has something dark to sit on. */
  --x-hero-scrim: #1c0f12;
}

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

  --canvas: #faf2e6;
  --surface: #ffffff;
  --surface-2: #f4e8d6;
  --border: #e5d4b8;
  --border-strong: #c9974c;
  --ink: #2a1810;
  --muted: #79695c;

  --accent: #e2672e;
  --accent-hover: #c9551f;
  --accent-ink: #2a1810;
  --accent-text: #8a5a2c;
  --accent-strong: #8f4d17;
  --accent-soft: #f6e2c9;
  --accent-border: #e3c48f;

  --success: #2f6b3c;
  --success-ink: #ffffff;
  --success-soft: #e3efe0;
  --success-strong: #1f5c2c;

  --warning: #8a5a12;
  --warning-ink: #ffffff;
  --warning-soft: #f5e6cc;
  --warning-strong: #74480c;

  --danger: #a33326;
  --danger-ink: #ffffff;
  --danger-soft: #f6dfdb;
  --danger-strong: #8f2a1e;

  --chart-1: #e2672e;
  --chart-2: #8a5a2c;
  --chart-3: #c9974c;
  --chart-4: #b5651f;
  --chart-5: #6b4a2f;
  --chart-6: #d98b5f;

  --shadow-raised: 0 24px 64px -24px color-mix(in srgb, var(--ink) 35%, transparent);
  --gradient-dusk: linear-gradient(180deg, color-mix(in srgb, var(--canvas) 0%, transparent) 0%, color-mix(in srgb, var(--canvas) 92%, transparent) 82%, var(--canvas) 100%);
}

/*
 * app.css — Gulab Mahal's own CSS: the transparent-to-solid bar, the hero's
 * scrim and glow, the swipeable gallery strip, the tinted bands and the
 * one hero entrance. Everything else is primitives and utilities.
 */

/* ---- Nav: hero-overlay -----------------------------------------------
   Transparent and set in the hero's light tone while riding over the
   photo; once past it, a solid, blurred bar in the page's own tokens. */
.site-nav {
  color: var(--x-hero-ink);
  /* A fixed dark fade behind the bar itself — independent of the mode and
     of how bright the photo happens to be underneath it — so the wordmark
     and links always have something dark to read against while transparent. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--x-hero-scrim) 65%, transparent) 0%, color-mix(in srgb, var(--x-hero-scrim) 38%, transparent) 70%, transparent 100%);
  border-bottom: 1px solid transparent;
  transition: background-color 280ms var(--ease), background-image 280ms var(--ease), border-color 280ms var(--ease), color 280ms var(--ease), backdrop-filter 280ms var(--ease);
}
.site-nav.is-scrolled {
  color: var(--ink);
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.site-nav a, .site-nav button, .site-nav summary { text-decoration: none; }
.site-nav .nav-link { color: var(--x-hero-ink); transition: color 200ms var(--ease); }
.site-nav.is-scrolled .nav-link { color: var(--ink); }
.site-nav .nav-link:hover { color: var(--x-hero-accent); }
.site-nav.is-scrolled .nav-link:hover { color: var(--accent-text); }
.site-nav .nav-ghost { color: var(--x-hero-ink); }
.site-nav.is-scrolled .nav-ghost { color: var(--muted); }
.site-nav .nav-ghost:hover { color: var(--ink); background: color-mix(in srgb, var(--x-hero-ink) 18%, transparent); }
.site-nav.is-scrolled .nav-ghost:hover { color: var(--ink); background: var(--surface-2); }

/* ---- Hero ---------------------------------------------------------------- */
/* The hero's own flat ground, fixed (not mode-dependent): this is what the
   fixed light hero text is actually measured against underneath the photo,
   so it must never be the page's own light-mode canvas. */
.hero-ground { background-color: var(--x-hero-scrim); }
.hero-scrim {
  /* Two layers: a thin band at the very bottom that blends into the page's
     OWN canvas (so the hero meets the section below with no seam, in
     either mode), painted over a permanently dark wash of the photo (fixed,
     not mode-dependent) that is what actually keeps the fixed light hero
     text readable — a light day-mode canvas must never wash this out. */
  background:
    linear-gradient(0deg, var(--canvas) 0%, var(--canvas) 2%, transparent 20%),
    linear-gradient(180deg, color-mix(in srgb, var(--x-hero-scrim) 22%, transparent) 0%, color-mix(in srgb, var(--x-hero-scrim) 60%, transparent) 55%, color-mix(in srgb, var(--x-hero-scrim) 84%, transparent) 100%);
}
.hero-headline { color: var(--x-hero-ink); }
.hero-sub { color: var(--x-hero-muted); }
.hero-glow {
  left: 50%;
  bottom: -10%;
  width: min(60rem, 90vw);
  height: 26rem;
  transform: translateX(-50%);
  background: var(--gradient-sunset);
  opacity: 0.28;
  filter: blur(90px);
  border-radius: 999px;
}

/* One entrance, on the hero only. Rests fully visible, arrives from a
   small offset — never from opacity:0. */
.hero-in > * { opacity: 1; transform: translateY(22px); }
.hero-in.is-in > * { animation: hero-rise 760ms var(--ease-out) both; }
.hero-in.is-in > *:nth-child(2) { animation-delay: 90ms; }
.hero-in.is-in > *:nth-child(3) { animation-delay: 180ms; }
@keyframes hero-rise {
  from { opacity: 0.001; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
html.reduced-motion .hero-in > * { transform: none; animation: none; }

/* The page itself must never gain a sideways scrollbar — the gallery strip
   below is the one element deliberately wider than the screen, and it has
   to scroll WITHIN itself, never carry the page with it. Belt and braces:
   html is the actual root scroller a visitor drags, not just body. */
html, body { max-width: 100vw; overflow-x: hidden; }

/* ---- Gallery: a swipeable strip, not a grid of thumbnails ---------------- */
.gallery-strip {
  max-width: 100vw;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.gallery-strip::-webkit-scrollbar { display: none; }

/* ---- Menu band: a rose-tinted wash behind the tap-switched list --------- */
.menu-band {
  background: color-mix(in srgb, var(--accent) 7%, var(--canvas));
}

/* ---- Enquiry band: a deeper plum wash under the gold-edged card --------- */
.enquiry-band {
  background: color-mix(in srgb, var(--surface) 55%, var(--canvas));
}