/*
 * theme.css — Aashirwad Mahal's design-system values.
 * Dark, indigo-and-marigold, glass-luxe. Opens in dark mode (:root); the
 * light set under html[data-theme="light"] is the marble-and-ink daytime
 * variant of the same palette, not an inversion of it.
 */

:root {
  color-scheme: dark;

  --canvas: #12132a;
  --surface: #2a2b3f;
  --surface-2: #23243c;
  --border: #3d3e5c;
  --border-strong: #565873;
  --ink: #f4f1ea;
  --muted: #9a989d;

  --accent: #e8793a;
  --accent-hover: #f18e56;
  --accent-ink: #1b1330;
  --accent-text: #c9a24b;
  --accent-strong: #f2b673;
  --accent-soft: #3a2c22;
  --accent-border: #6b4f2e;

  --success: #3fa66b;
  --success-ink: #0d1f14;
  --success-soft: #17301f;
  --success-strong: #86dba9;
  --warning: #d1993f;
  --warning-ink: #23160a;
  --warning-soft: #392a13;
  --warning-strong: #eab86b;
  --danger: #d1573f;
  --danger-ink: #230b05;
  --danger-soft: #3a1913;
  --danger-strong: #f2917a;

  --chart-1: #e8793a;
  --chart-2: #c9a24b;
  --chart-3: #7c9bd8;
  --chart-4: #a876c9;
  --chart-5: #5fb894;
  --chart-6: #d1573f;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 300;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.22em;

  --radius-btn: 999px;
  --radius-card: 20px;
  --radius-input: 14px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: 0 24px 60px -24px rgba(4, 4, 16, 0.65), 0 2px 10px rgba(4, 4, 16, 0.35);
  --shadow-raised: 0 32px 80px -20px rgba(4, 4, 16, 0.7);
  --shadow-btn: 0 10px 28px -10px rgba(232, 121, 58, 0.55);
  --card-pad: 2rem;
  --caps: uppercase;
  --caps-tracking: 0.22em;
  --btn-weight: 600;
  --measure: 62ch;
}

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

  --canvas: #f6efe1;
  --surface: #fffdf8;
  --surface-2: #efe4cf;
  --border: #e1d2ac;
  --border-strong: #c9b47e;
  --ink: #241f3d;
  --muted: #6b6470;

  --accent: #e8793a;
  --accent-hover: #d5692c;
  --accent-ink: #1b1330;
  --accent-text: #7f5216;
  --accent-strong: #6b4512;
  --accent-soft: #f3ddb4;
  --accent-border: #d9b877;

  --success: #1f8a4c;
  --success-ink: #ffffff;
  --success-soft: #dcf0e3;
  --success-strong: #166534;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6e3cc;
  --warning-strong: #8a3f07;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f8dcd8;
  --danger-strong: #941616;

  --chart-1: #cf6a2f;
  --chart-2: #a06c1f;
  --chart-3: #4d6bab;
  --chart-4: #7d4f9c;
  --chart-5: #2f8f6b;
  --chart-6: #b6432e;
}

/*
 * app.css — Aashirwad Mahal.
 * The hero's parallax ground, the gallery's swipe strip, the testimonial
 * dots and the segmented-menu hidden state. Tokens only.
 */

/* ---- Hero parallax --------------------------------------------------------
   app.js writes --parallax-y (a small px offset from scroll position) onto
   the [data-parallax] element as the page scrolls; nothing else on the page
   moves. The extra scale in the view keeps the edges covered while it shifts. */
[data-hero-parallax] {
  transform: translate3d(0, var(--parallax-y, 0), 0);
  will-change: transform;
}
html.reduced-motion [data-hero-parallax] {
  transform: none !important;
}

/* ---- Gallery strip ---------------------------------------------------------
   A horizontal, snap-scrolling filmstrip of past events. Scrollbar kept thin
   and tinted so it reads as part of the page, not the browser's default. */
#gallery [class*="overflow-x-auto"]::-webkit-scrollbar {
  height: 6px;
}
#gallery [class*="overflow-x-auto"]::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent-text) 45%, transparent);
  border-radius: 999px;
}

/* ---- Menu switch panels ---------------------------------------------------- */
.menu-panel.hidden {
  display: none;
}

/* ---- Testimonial rotator --------------------------------------------------- */
.testimonial-slide.hidden {
  display: none;
}
/* The button itself is a full 36px tap target; a small ::after draws the
   visible dot centered inside it, so the hit area and the mark can differ. */
.testimonial-dot {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
}
.testimonial-dot::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--canvas) 30%, transparent);
  transition: background-color 150ms var(--ease, ease), transform 150ms var(--ease, ease);
}
.testimonial-dot:hover::after {
  background: color-mix(in srgb, var(--canvas) 55%, transparent);
}
.testimonial-dot.is-active::after {
  background: var(--canvas);
  transform: scale(1.25);
}

/* ---- A faint marigold glow behind the enquiry panel, cinematic rather than
   flat — one radial wash, from the brand tokens, nothing else on the page
   carries it. */
#enquiry {
  position: relative;
}
#enquiry::before {
  content: "";
  position: absolute;
  inset: -4rem -1rem auto -1rem;
  height: 22rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
  pointer-events: none;
  z-index: -1;
}