/*
 * theme.css — NESTORA design tokens.
 * Sandstone daylight guest journey; Midnight Forest is the dark mode and the
 * admin console's native register. Editorial mood: hairline rules, nearly
 * square corners, shadow tier 0, a serif display over a quiet sans body.
 */

:root {
  --canvas: #e8ddc8;
  --surface: #f5f0e6;
  --surface-2: #ddcda8;
  --border: #cdbb92;
  --border-strong: #ad9868;
  --ink: #17251f;
  --muted: #53564d;

  --accent: #9f5334;
  --accent-hover: #8a4429;
  --accent-ink: #f8f4ec;
  --accent-text: #844d35;
  --accent-strong: #794731;
  --accent-soft: #ecd9c9;
  --accent-border: #d9b79c;

  --success: #5b7a52;
  --success-ink: #f8f4ec;
  --success-soft: #e1e8db;
  --success-strong: #3f5638;

  --warning: #b0782c;
  --warning-ink: #f8f4ec;
  --warning-soft: #f1e3c7;
  --warning-strong: #7a4f18;

  --danger: #a8442f;
  --danger-ink: #f8f4ec;
  --danger-soft: #f2ddd6;
  --danger-strong: #7a2e1d;

  --chart-1: #c87552;
  --chart-2: #879a82;
  --chart-3: #d6b982;
  --chart-4: #53564d;
  --chart-5: #3f5638;
  --chart-6: #844d35;

  --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: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 4px;
  --radius-card: 2px;
  --radius-input: 4px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 20px 48px -20px color-mix(in srgb, var(--ink) 45%, transparent);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 65ch;

  /* A photograph's own lighting does not change with the visitor's theme, so
     these stay literal rather than riding --ink/--canvas across modes. */
  --gradient-hero: linear-gradient(
    to top,
    rgba(23, 37, 31, 0.94) 0%,
    rgba(23, 37, 31, 0.55) 40%,
    rgba(23, 37, 31, 0.08) 78%,
    transparent 100%
  );
  --gradient-tile: linear-gradient(to top, rgba(23, 37, 31, 0.82), transparent 55%);
  --gradient-scrim: linear-gradient(#17251f, #17251f);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #14211b;
  --surface: #1e2f27;
  --surface-2: #263a30;
  --border: #35493d;
  --border-strong: #4c6455;
  --ink: #f3ead9;
  --muted: #b9c4b7;

  --accent: #a85936;
  --accent-hover: #c4734e;
  --accent-ink: #f8f4ec;
  --accent-text: #e6ab84;
  --accent-strong: #f1cdae;
  --accent-soft: #3b2a1f;
  --accent-border: #5c3f2c;

  --success: #93b47f;
  --success-ink: #12200f;
  --success-soft: #24341d;
  --success-strong: #cfe3bf;

  --warning: #d9bc86;
  --warning-ink: #241a08;
  --warning-soft: #382b14;
  --warning-strong: #efdead;

  --danger: #dd8a6c;
  --danger-ink: #220f08;
  --danger-soft: #3c241b;
  --danger-strong: #f3b9a1;

  --chart-1: #da8c64;
  --chart-2: #9db497;
  --chart-3: #e3cd9b;
  --chart-4: #b9c4b7;
  --chart-5: #93b47f;
  --chart-6: #e6ab84;
}

/*
 * app.css — NESTORA's own rules. What no primitive or utility covers:
 * the ground, the hero parallax, the glass search panel, the boarding-pass
 * confirmation card, the Midnight Forest admin sidebar, chart frames and
 * the mobile bottom bar. Tokens only — no colour literal.
 */

@utility font-display {
  font-family: var(--font-display);
}
@utility font-mono {
  font-family: var(--font-mono);
}
@utility icon-fill {
  fill: currentColor;
}

/* ---- Ground ----------------------------------------------------------- */
body {
  background-image:
    radial-gradient(ellipse 60rem 30rem at 12% -8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent),
    radial-gradient(ellipse 50rem 26rem at 100% 0%, color-mix(in srgb, var(--chart-2) 12%, transparent), transparent);
  background-attachment: fixed;
}

/* ---- Guest nav bar: transparent over the hero, solid past it ---------- */
.guest-nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.guest-nav.is-solid {
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  border-bottom-color: var(--border);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-raised);
}
.guest-nav .nav-link { color: var(--accent-ink); opacity: 0.92; }
.guest-nav.is-solid .nav-link { color: var(--ink); opacity: 1; }
.guest-nav .nav-word { color: var(--accent-ink); }
.guest-nav.is-solid .nav-word { color: var(--ink); }

/* ---- Hero photo + parallax --------------------------------------------- */
.hero-frame { position: relative; overflow: hidden; }
.hero-frame .hero-media {
  position: absolute;
  inset: -10% 0 -10% 0;
  will-change: transform;
}
.hero-frame .hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-frame .hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
}
html.reduced-motion .hero-frame .hero-media { transform: none !important; }

/* ---- Floating glass search panel --------------------------------------- */
.glass-panel {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid color-mix(in srgb, var(--surface) 40%, var(--border-strong));
  box-shadow: var(--shadow-raised);
  border-radius: var(--radius-card);
}

/* ---- Rating stars -------------------------------------------------------- */
.stars { display: inline-flex; align-items: center; gap: 0.125rem; color: var(--accent-text); }
.stars .icon { width: 0.875rem; height: 0.875rem; }

/* ---- Gallery overlap thumbnails ------------------------------------------ */
.gallery-thumb {
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-raised);
  border-radius: var(--radius-card);
}

/* ---- Booking progress rule ------------------------------------------------ */
.step-rule { background: var(--border-strong); }
.step-rule-fill { background: var(--accent); transition: width 320ms ease; }
.step-dot {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
}
.step-dot.is-active { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.step-dot.is-done { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }

/* ---- Digital boarding-pass confirmation card ------------------------------ */
.boarding-pass {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.boarding-pass::before,
.boarding-pass::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--canvas);
  border-radius: 9999px;
  transform: translateY(-50%);
}
.boarding-pass::before { left: -0.875rem; }
.boarding-pass::after { right: -0.875rem; }
.pass-tear { border-left: 2px dashed var(--border-strong); }
.qr-dots {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  width: 100%;
  aspect-ratio: 1;
}
.qr-dots span { border-radius: 1px; background: var(--ink); }
.qr-dots span[data-off="1"] { background: transparent; }

/* ---- Admin: Midnight Forest sidebar (constant register) ------------------- */
.admin-shell { min-height: 100vh; }
.admin-sidebar {
  background: var(--gradient-scrim);
  color: var(--accent-ink);
  border-right: 1px solid color-mix(in srgb, var(--accent-ink) 14%, transparent);
}
.admin-sidebar .side-link {
  color: color-mix(in srgb, var(--accent-ink) 68%, transparent);
  border-radius: var(--radius-input);
  transition: background-color 150ms ease, color 150ms ease;
}
.admin-sidebar .side-link:hover { color: var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 8%, transparent); }
.admin-sidebar .side-link.is-active {
  color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}
.admin-sidebar .side-brand { color: var(--accent-ink); }
.admin-sidebar .side-foot { border-top: 1px solid color-mix(in srgb, var(--accent-ink) 14%, transparent); }

/* ---- Metric tiles of deliberately uneven size ------------------------------ */
.metric-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.35rem;
}

/* ---- Chart frame ------------------------------------------------------------ */
.chart { position: relative; width: 100%; height: 100%; min-height: 12rem; }
.chart canvas { display: block; width: 100% !important; height: 100% !important; }

/* ---- Mobile bottom nav / sticky CTA ------------------------------------------ */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav .bn-link { color: var(--muted); }
.bottom-nav .bn-link.is-active { color: var(--accent-text); }

.sticky-cta {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
  z-index: 39;
}

/* ---- Reveal, hero only — nothing else on the page moves -------------------- */
[data-inview] { opacity: 0; transform: translateY(14px); transition: opacity 480ms ease, transform 480ms ease; }
[data-inview].is-inview { opacity: 1; transform: none; }
html.reduced-motion [data-inview] { opacity: 1; transform: none; transition: none; }

@media (width < 48rem) {
  .admin-sidebar { display: none; }
}