/* =====================================================================
   LUMIFARO, Design system stylesheet
   Shared across all pages. Pair with assets/js/lumifaro-tailwind.js
   (Tailwind config) and assets/js/lumifaro.js (behaviours).
   ===================================================================== */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ---- Theme tokens (R G B triplets, consumed via rgb(var(--x) / alpha)) ---- */
:root {
  --c-ink: 59 59 58;          /* #3b3b3a primary text */
  --c-slate: 111 111 109;     /* #6f6f6d muted text */
  --c-paper: 255 255 255;     /* page / nav background */
  --c-mist: 244 245 241;      /* #F4F5F1 alternating sections / inputs */
  --c-surface: 255 255 255;   /* cards / panels */
  --c-line: 0 0 0;            /* borders & rings (used at low alpha) */
  --c-brand-light: 238 246 226;
  /* Unifying warm/beige photo grade, harmonises all scene photos into one "shoot" */
  --warm-grade: sepia(.4) saturate(.66) brightness(1.08) contrast(.92);
}
.dark {
  --c-ink: 232 234 229;       /* light foreground text */
  --c-slate: 165 170 161;     /* muted text */
  --c-paper: 16 18 17;        /* near-black page / nav */
  --c-mist: 28 31 29;         /* slightly raised dark sections */
  --c-surface: 34 38 35;      /* cards a touch lighter than page */
  --c-line: 235 238 232;      /* borders/rings become light */
  --c-brand-light: 38 54 33;  /* deep green tint */
}

/* smooth cross-theme transition */
body, header, section, footer, .reveal, input, textarea, button, a, figure, blockquote, p, h1, h2, h3, span, div {
  transition: background-color .4s ease, border-color .4s ease, color .4s ease, box-shadow .4s ease;
}

/* keep product cutouts readable on any theme (forced soft-light backing), warm beige to match the photo grade */
.media-light { background-color: #efe8db; }

/* Reusable warm/beige grade for scene photography (team, lifestyle shots) */
.tone-warm { filter: var(--warm-grade); }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- Hotspot pulse dots (home lookbook) ---- */
.hotspot-dot {
  position: relative;
  width: 20px; height: 20px;
  border-radius: 9999px;
  background: #7fbc3d;
  box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 4px 14px rgba(0,0,0,.35);
  cursor: pointer;
}
.hotspot-dot::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: #7fbc3d;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.8); opacity: 0;   }
  100% { transform: scale(2.8); opacity: 0;   }
}

/* ---- Carousel cross-fade (home lookbook) ---- */
.slide-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s ease;
  filter: var(--warm-grade);
}
.slide-img.is-active { opacity: 1; }

/* ---- Per-room hotspot groups (home lookbook) ---- */
.hs-group {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.hs-group.is-active { opacity: 1; visibility: visible; }
.hotspot { pointer-events: auto; }

/* Preview card reveal */
.hotspot .preview {
  opacity: 0; visibility: hidden;
  transform: translateY(8px) scale(.97);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
  pointer-events: none;
  bottom: calc(100% + 12px);            /* default: open above the dot */
}
.hotspot .preview.preview-below { bottom: auto; top: calc(100% + 12px); }
.hotspot:hover .preview,
.hotspot:focus-within .preview {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ---- Theme toggle (nav) ---- */
.theme-toggle {
  position: relative; width: 58px; height: 30px; border-radius: 9999px;
  background: rgb(var(--c-mist)); border: 1px solid rgb(var(--c-line) / .12);
  cursor: pointer; flex: none; transition: background-color .4s ease, border-color .4s ease;
}
.theme-toggle .knob {
  position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 9999px; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.16,1,.3,1), background-color .35s ease;
  color: #689f30;
}
.dark .theme-toggle { background: #2a2f2b; }
.dark .theme-toggle .knob { transform: translate(28px, -50%); background: #7fbc3d; color: #16120a; }
.theme-toggle .knob svg { width: 14px; height: 14px; }
.theme-toggle .ico-sun  { display: block; }
.theme-toggle .ico-moon { display: none; }
.dark .theme-toggle .ico-sun  { display: none; }
.dark .theme-toggle .ico-moon { display: block; }

/* keep accent legible on dark backgrounds */
.dark .text-brand-dark { color: #a4d977; }

/* ---- Slide indicator dots ---- */
.dot-ind { width: 8px; height: 8px; border-radius: 9999px; background: rgb(var(--c-line) / .2); transition: all .35s ease; }
.dot-ind.is-on { width: 22px; background: #7fbc3d; }

/* Testimonials track */
.t-track { scroll-snap-type: x mandatory; }
.t-card  { scroll-snap-align: start; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Animated underline for text links */
.link-underline { background-image: linear-gradient(currentColor,currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s cubic-bezier(.16,1,.3,1); }
.link-underline:hover { background-size: 100% 1px; }