/* ============================================================
   LUXCHAIR — Design tokens & base styles
   Palette: graphite / champagne-bronze / cool titanium
   Type: Fraunces (display) + Inter (body) + IBM Plex Mono (specs)
   ============================================================ */

:root {
  --bg: #0b0c0e;
  --bg-elevated: #16181c;
  --bg-glass: rgba(22, 24, 28, 0.55);
  --line: rgba(237, 235, 230, 0.08);
  --line-strong: rgba(237, 235, 230, 0.16);
  --text: #edebe6;
  --text-dim: #8a8d91;
  --bronze: #b08d57;
  --bronze-bright: #d4b483;
  --titanium: #8b97a3;
  --danger: #c05a4a;

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; } /* Lenis handles smooth scroll */

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

.font-mono { font-family: var(--font-mono); }

a { color: inherit; text-decoration: none; }

::selection { background: var(--bronze); color: #0b0c0e; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; }

/* ---- Glassmorphism ---- */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: all 0.4s var(--ease-luxury);
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary {
  background: linear-gradient(135deg, var(--bronze-bright), var(--bronze));
  color: #0b0c0e;
  font-weight: 600;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -8px rgba(176, 141, 87, 0.5); }
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--bronze); color: var(--bronze-bright); }

/* ---- Hero canvas sequence ---- */
#hero-sequence-section {
  position: relative;
  height: 100vh;
  background: var(--bg);
}
#hero-canvas-wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#hero-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-overlay-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12vh;
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
.hero-overlay-text > * { pointer-events: auto; }

.hero-progress-track {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 2px;
  background: var(--line-strong);
  z-index: 5;
  border-radius: 2px;
  overflow: hidden;
}
.hero-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--bronze-bright);
}

/* floating particles */
.particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,180,131,0.9), rgba(212,180,131,0));
  pointer-events: none;
}

/* ---- Reveal-on-scroll base state (GSAP sets from) ---- */
.reveal-up { opacity: 0; transform: translateY(40px); }

/* ---- Section eyebrow ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bronze-bright);
}

/* ---- Spec dial (signature element echo, used in cards) ---- */
.spec-dial {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- Status badges (customer account order history) ---- */
.badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 0.7rem; font-family: var(--font-mono); }
.badge-pending { background: rgba(139,151,163,0.15); color: var(--titanium); }
.badge-confirmed { background: rgba(176,141,87,0.15); color: var(--bronze-bright); }
.badge-processing { background: rgba(139,151,163,0.15); color: var(--titanium); }
.badge-shipped { background: rgba(176,141,87,0.2); color: var(--bronze-bright); }
.badge-delivered { background: rgba(96,165,130,0.15); color: #7fd9a4; }
.badge-cancelled { background: rgba(192,90,74,0.15); color: var(--danger); }