/* ============================================
   ADVANCED HEALING — Design System Tokens
   Light Cream + Gold/Emerald Luxury Wellness
   ============================================ */

:root {
  /* === COLOR PALETTE === */
  /* Backgrounds — warm cream, light and airy */
  --bg-primary: #faf7f2;
  --bg-secondary: #f3ede4;
  --bg-tertiary: #ebe4d9;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.7);
  --bg-glass-strong: rgba(255, 255, 255, 0.9);

  /* Accent Colors — warm gold & organic tones */
  --gold: #8B6914;
  --gold-light: #a17c34;
  --gold-dark: #6b4f0e;
  --emerald: #5cb8a3;
  --emerald-light: #7dd4bf;
  --emerald-dark: #3d9985;
  --blue: #6b8ccc;
  --blue-light: #8aaade;
  --cyan: #5eb8c9;
  --purple: #9678c4;
  --purple-light: #c4a0d4;
  --pink: #e8b4c8;

  /* Text Colors — darker for strong readability on cream */
  --text-primary: #121018;
  --text-secondary: #4a4460;
  --text-tertiary: #6b6580;
  --text-accent: var(--gold);
  --text-link: var(--emerald-dark);

  /* Gradients — cream bg + gold accents */
  --gradient-gold: linear-gradient(135deg, #8B6914 0%, #a17c34 50%, #8B6914 100%);
  --gradient-emerald: linear-gradient(135deg, #5cb8a3 0%, #7dd4bf 50%, #5cb8a3 100%);
  --gradient-hero: linear-gradient(180deg, rgba(250,247,242,0) 0%, rgba(250,247,242,0.6) 50%, #faf7f2 100%);
  --gradient-card: linear-gradient(135deg, rgba(201,168,76,0.06) 0%, rgba(92,184,163,0.03) 100%);
  --gradient-text: linear-gradient(135deg, #6b4f0e, #8B6914, #6b4f0e);
  --gradient-border: linear-gradient(135deg, rgba(201,168,76,0.4), rgba(92,184,163,0.2));
  --gradient-section: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
  --gradient-cta: linear-gradient(135deg, #8B6914 0%, #6b4f0e 100%);

  /* === TYPOGRAPHY === */
  --font-heading: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes — Fluid with clamp() */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  --text-lg: clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
  --text-xl: clamp(1.15rem, 1rem + 0.5vw, 1.35rem);
  --text-2xl: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
  --text-3xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  --text-4xl: clamp(2.2rem, 1.6rem + 2vw, 3.25rem);
  --text-5xl: clamp(2.8rem, 2rem + 2.5vw, 4.25rem);
  --text-6xl: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem);

  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;

  /* === 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;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Container */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 960px;
  --container-padding: clamp(1rem, 3vw, 3rem);

  /* === BORDERS === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  --border-subtle: 1px solid #e8e0d8;
  --border-accent: 1px solid rgba(201, 168, 76, 0.3);
  --border-glass: 1px solid #e8e0d8;

  /* === SHADOWS — soft and light === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.1);
  --shadow-glow-gold: 0 0 30px rgba(201, 168, 76, 0.15);
  --shadow-glow-emerald: 0 0 30px rgba(92, 184, 163, 0.15);
  --shadow-glow-blue: 0 0 30px rgba(107, 140, 204, 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.04);

  /* === GLASSMORPHISM — light version === */
  --glass-blur: blur(20px);
  --glass-blur-strong: blur(40px);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: #e8e0d8;

  /* === TRANSITIONS === */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 700ms;

  /* === Z-INDEX SCALE === */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-max: 999;
}

/* ============================================
   DARK MODE OVERRIDES
   ============================================ */
[data-theme="dark"] {
  --bg-primary: #1a1726;
  --bg-secondary: #221e2e;
  --bg-tertiary: #2a2538;
  --bg-card: rgba(34, 30, 46, 0.9);
  --bg-card-hover: rgba(42, 37, 56, 0.95);
  --bg-glass: rgba(26, 23, 38, 0.7);
  --bg-glass-strong: rgba(26, 23, 38, 0.9);

  --text-primary: #f0ede6;
  --text-secondary: #b8b2c4;
  --text-tertiary: #8a839a;

  --gradient-hero: linear-gradient(180deg, rgba(26,23,38,0) 0%, rgba(26,23,38,0.6) 50%, #1a1726 100%);
  --gradient-card: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, rgba(92,184,163,0.04) 100%);
  --gradient-text: linear-gradient(135deg, #d4a853, #f0d590, #d4a853);
  --gradient-section: linear-gradient(180deg, #1a1726 0%, #221e2e 50%, #1a1726 100%);
  --gradient-cta: linear-gradient(135deg, #c9a84c 0%, #a17c34 100%);
  --gold: #c9a84c;
  --gold-light: #d4a853;
  --gold-dark: #a17c34;

  --border-subtle: 1px solid rgba(255,255,255,0.08);
  --border-accent: 1px solid rgba(201,168,76,0.3);
  --border-glass: 1px solid rgba(255,255,255,0.06);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-xl: 0 16px 64px rgba(0,0,0,0.4);
  --shadow-glow-gold: 0 0 30px rgba(201,168,76,0.2);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.2);

  --glass-bg: rgba(26,23,38,0.7);
  --glass-border: rgba(255,255,255,0.08);
}

/* Dark mode — hero highlight stays gold but lighter for dark bg */
[data-theme="dark"] .hero__title span.highlight {
  color: #d4a853;
  -webkit-text-fill-color: #d4a853;
}

/* Dark mode — trust bar, cards, footer adapt */
[data-theme="dark"] .trust-bar {
  background: var(--bg-secondary);
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .feature-card,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .phone-cta {
  background: var(--bg-card) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .feature-card:hover,
[data-theme="dark"] .glass-card:hover {
  border-color: rgba(201,168,76,0.3) !important;
}
[data-theme="dark"] .footer {
  background: var(--bg-secondary);
}
[data-theme="dark"] .footer__bottom {
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .navbar.scrolled {
  background: rgba(26,23,38,0.95) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] .product-card {
  background: var(--bg-card) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .product-card:hover {
  border-color: rgba(201,168,76,0.3) !important;
}

/* Dark mode — contact form inputs */
[data-theme="dark"] .contact__form input,
[data-theme="dark"] .contact__form textarea {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--text-primary);
}

/* Dark mode — mesh gradient */
[data-theme="dark"] .mesh-gradient::before,
[data-theme="dark"] .mesh-gradient::after {
  opacity: 0.15;
}

/* Dark mode toggle button */
.theme-toggle {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
  margin-right: 0.5rem;
}
.theme-toggle:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(201,168,76,0.08);
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease-bounce);
}
.theme-toggle:hover svg {
  transform: rotate(20deg);
}
/* Show/hide sun/moon icons */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }