/* ── Index (home) dark theme ──
   Re-skins the shared stylesheet into a mainly-black homepage: near-black
   backgrounds, warm-white text, coral kept as the single pop accent.
   Loaded AFTER style.css and only on index.html, so the product/legal
   pages keep their own themes. */

:root {
  --cream:    #0c0c0d;  /* page background — near-black */
  --cream-2:  #161617;  /* lifted dark surface */
  --ink:      #0c0c0d;  /* dark sections blend into the page */
  --ink-deep: #000000;
  --muted:    #a1a0a6;  /* neutral grey body text */
  --card-bg:  #161617;
  --border:   #26262a;

  /* Accent — Wholistic app pine green, lifted slightly for legibility on black */
  --accent:      #2f7d5e;
  --accent-dark: #276a4f;
  --accent-soft: #dce7de;

  --shadow-soft: 0 12px 34px rgba(0, 0, 0, .5);
  --shadow-lift: 0 20px 50px rgba(0, 0, 0, .65);
}

body { color: #f4f2ec; }

/* ── NAV ── */
nav {
  background: rgba(12, 12, 13, .72);
  border-bottom-color: #1f1f22;
}
nav.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
.nav-logo { color: #f4f2ec; }
.nav-links a { color: #a1a0a6; }
.nav-links a:hover,
.nav-links a.active { color: #fff; background: rgba(63, 161, 120, .18); }

/* ── HERO ── */
.hero { background: #0c0c0d; }
.hero-bg {
  background:
    radial-gradient(ellipse at 78% 12%, rgba(63, 161, 120, .24) 0%, transparent 46%),
    radial-gradient(ellipse at 25% 88%, rgba(47, 125, 94, .12) 0%, transparent 52%),
    #0c0c0d;
}
.hero h1 { color: #ffffff; }
.hero p  { color: #b9b8bd; }

/* ── SECTIONS ── */
.section-title { color: #f4f2ec; }
.section-body  { color: #a1a0a6; }

/* ── PRODUCT CARDS ── */
.product-card {
  background: #161617;
  border-color: #26262a;
}
.product-card:hover { border-color: rgba(63, 161, 120, .5); }
.product-card h3 { color: #f4f2ec; }
.product-card p  { color: #a1a0a6; }
.product-card-icon { background: #201f22; }

/* Hover accent line reads green→light-green instead of coral→gold */
.product-card::after { background: linear-gradient(90deg, var(--accent), #5cbf92); }

/* ── BUTTONS ── keep the coral shadow off; use a green glow ── */
.btn { box-shadow: 0 8px 22px rgba(47, 125, 94, .40); }
.btn:hover { box-shadow: 0 12px 28px rgba(47, 125, 94, .50); }

/* ── FOOTER ── */
footer {
  background: #0c0c0d;
  border-top: 1px solid #1f1f22;
  color: #8a898f;
}