/* =======================================================
   THEAROMAVERSE — NUCLEAR DESIGN SYSTEM v4.0
   Complete Production-Ready Architecture
   Mobile-First | Dark Luxury | Editorial Minimalism
   Built for TheAromaverse.in
   ======================================================= */

/* -------------------------------------------------------
   1. DESIGN TOKENS
------------------------------------------------------- */
:root {
  /* Colors */
  --bg-primary: #050505;
  --bg-secondary: #0b0b0b;
  --bg-tertiary: #111111;
  --bg-elevated: #161616;
  --bg-glass: rgba(255, 255, 255, 0.035);

  --text-primary: #f5f5f2;
  --text-muted: rgba(255, 255, 255, 0.64);
  --text-subtle: rgba(255, 255, 255, 0.48);
  --text-disabled: rgba(255, 255, 255, 0.32);

  --highlight: #d6c6a5;
  --highlight-dark: #b8a47e;
  --highlight-subtle: rgba(214, 198, 165, 0.12);

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-gold: rgba(214, 198, 165, 0.25);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.035);
  --glass-bg-hover: rgba(255, 255, 255, 0.055);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-border-hover: rgba(255, 255, 255, 0.18);
  --glass-blur: 24px;

  /* Typography */
  --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;

  /* Fluid Typography (Mobile First) */
  --text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.35rem + 0.55vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.65rem + 0.85vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.95rem + 1.2vw, 3.25rem);
  --text-5xl: clamp(2.75rem, 2.35rem + 1.8vw, 4.25rem);
  --text-6xl: clamp(3.25rem, 2.7rem + 2.5vw, 5.5rem);

  /* Letter Spacing */
  --tracking-tighter: -0.045em;
  --tracking-tight: -0.028em;
  --tracking-normal: -0.01em;

  /* Line Heights */
  --leading-tight: 0.92;
  --leading-snug: 1.08;
  --leading-relaxed: 1.65;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Motion */
  --duration-fast: 280ms;
  --duration-base: 320ms;
  --duration-slow: 420ms;
  --duration-slower: 620ms;

  --ease-luxury: cubic-bezier(0.23, 1.0, 0.32, 1);
  --ease-physical: cubic-bezier(0.32, 0.72, 0, 1);

  /* Shadows */
  --shadow-soft: 0 10px 30px -15px rgba(0,0,0,0.6);
  --shadow-lux: 0 30px 70px -20px rgba(0,0,0,0.75);
  --shadow-glass: 0 8px 32px -8px rgba(0,0,0,0.5);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-full: 9999px;
}

/* -------------------------------------------------------
   2. BASE STYLES
------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  font-feature-settings: "kern" "liga" "tnum";
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tighter);
  margin: 0;
}

.display-title {
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.section-title {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--highlight);
  font-weight: 500;
}

/* -------------------------------------------------------
   3. GLASSMORPHISM SYSTEM
------------------------------------------------------- */
.glass,
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-glass);
  transition: all var(--duration-base) var(--ease-luxury);
  position: relative;
  overflow: hidden;
}

.glass:hover,
.glass-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lux);
}

.glass::before,
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.06), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* -------------------------------------------------------
   4. BUTTON SYSTEM
------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  font-weight: 500;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-luxury);
  border: 1px solid transparent;
  min-height: 52px;
  cursor: pointer;
}

.btn-primary {
  background: var(--text-primary);
  color: var(--bg-primary);
}

.btn-primary:hover {
  background: var(--highlight);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  border-color: var(--highlight);
  color: var(--highlight);
}

.btn-gold {
  background: transparent;
  color: var(--highlight);
  border-color: var(--highlight);
}

.btn-gold:hover {
  background: var(--highlight);
  color: var(--bg-primary);
}

/* -------------------------------------------------------
   5. FORM ELEMENTS
------------------------------------------------------- */
.input, textarea, select {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  transition: all var(--duration-base) var(--ease-luxury);
  min-height: 52px;
  width: 100%;
}

.input:focus, textarea:focus {
  outline: none;
  border-color: var(--highlight);
  box-shadow: 0 0 0 4px var(--highlight-subtle);
}

/* -------------------------------------------------------
   6. PRODUCT CARD BASE
------------------------------------------------------- */
.product-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-base) var(--ease-luxury);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card:hover {
  border-color: var(--highlight);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lux);
}

.product-card img {
  transition: transform var(--duration-slower) var(--ease-luxury);
}

.product-card:hover img {
  transform: scale(1.04);
}

/* -------------------------------------------------------
   7. REVEAL ANIMATIONS
------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-slow) var(--ease-luxury),
              transform var(--duration-slow) var(--ease-luxury);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------
   8. MOBILE FIRST UTILITIES
------------------------------------------------------- */
@media (max-width: 768px) {
  .display-title { font-size: var(--text-4xl); }
  .section-title { font-size: var(--text-3xl); }
  .btn { min-height: 56px; }
}

/* -------------------------------------------------------
   9. ACCESSIBILITY
------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .product-card, .glass, .btn {
    transition: none !important;
    transform: none !important;
  }
}

:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 4px;
}