/* =============================================================
   Crevita — "Modern Glass / DTC" redesign layer
   Loaded LAST on every page. Additive & reversible: delete this
   file + its <link> tags to fully restore the previous design.
   Content is unchanged; this only restyles the UI.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600;6..12,700&display=swap');

/* ---- 1. Design tokens (cascade site-wide via CSS variables) ---- */
:root {
  /* New DTC-friendly type pairing */
  --ff-head: 'Rubik', 'Playfair Display', Georgia, serif;
  --ff-body: 'Nunito Sans', 'Inter', system-ui, sans-serif;

  /* Warm glass palette — keeps Crevita gold/brown identity */
  --glass-bg:        rgba(255, 252, 246, 0.62);
  --glass-bg-strong: rgba(255, 252, 246, 0.82);
  --glass-bg-dim:    rgba(255, 249, 240, 0.45);
  --glass-border:    rgba(255, 255, 255, 0.65);
  --glass-border-lo: rgba(184, 113, 42, 0.16);
  --glass-blur:      16px;

  /* Softer, layered depth for floating glass surfaces */
  --shadow-xs: 0 1px 3px rgba(61,31,10,0.05);
  --shadow-sm: 0 4px 18px rgba(61,31,10,0.07), 0 1px 2px rgba(61,31,10,0.04);
  --shadow-md: 0 14px 40px rgba(61,31,10,0.10), 0 2px 8px rgba(61,31,10,0.05);
  --shadow-lg: 0 28px 70px rgba(61,31,10,0.14), 0 6px 18px rgba(61,31,10,0.06);

  /* Rounder, more contemporary radii */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
}

/* Dark mode glass tokens — the base tokens above are translucent WHITE, which
   turned every card/navbar into muddy taupe with washed-out text in dark mode.
   These warm-dark, translucent values make cards read as proper frosted-dark
   glass; card text already adapts via --text/--brown/--muted. */
body.dark {
  --glass-bg:        rgba(38, 24, 13, 0.50);
  --glass-bg-strong: rgba(26, 17, 9, 0.82);
  --glass-bg-dim:    rgba(24, 15, 8, 0.40);
  --glass-border:    rgba(232, 201, 154, 0.12);
  --glass-border-lo: rgba(232, 201, 154, 0.08);
}

/* ---- 2. Ambient gradient backdrop (what makes glass read) ---- */
html { background: #FBF6EE; }
/* Dark mode: html carries the page base colour. body's dark gradient uses
   background-attachment:fixed and doesn't tile past the first viewport, so the
   html background must also darken or the light cream bleeds through below the fold.
   (:has covers first paint before JS toggles the class; .dark covers the toggle.) */
html.dark,
html:has(body.dark) { background: #0C0704; }
body {
  background:
    radial-gradient(60vw 60vw at 8% -6%,  rgba(212,145,58,0.20), transparent 60%),
    radial-gradient(55vw 55vw at 100% 4%, rgba(255,183,120,0.18), transparent 62%),
    radial-gradient(70vw 70vw at 50% 108%, rgba(184,113,42,0.14), transparent 60%),
    linear-gradient(180deg, #FDF9F2 0%, #F7EFE2 100%);
  background-attachment: fixed;
}
body.dark {
  background:
    radial-gradient(60vw 60vw at 8% -6%,  rgba(184,113,42,0.22), transparent 60%),
    radial-gradient(55vw 55vw at 100% 4%, rgba(120,70,25,0.20), transparent 62%),
    linear-gradient(180deg, #140C06 0%, #0C0704 100%);
  background-attachment: fixed;
}

/* ---- 3. Headings: tighten for the geometric Rubik face ---- */
h1, h2, h3, .logo { letter-spacing: -0.015em; }

/* ---- 4. Navbar — deeper frosted glass, floating feel ---- */
.navbar {
  background: var(--glass-bg-strong);
  backdrop-filter: saturate(140%) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(140%) blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 6px 30px rgba(61,31,10,0.06);
}
.navbar.nav-scrolled {
  background: var(--glass-bg-strong);
  box-shadow: 0 10px 34px rgba(61,31,10,0.10) !important;
}

/* ---- 5. Cards → frosted glass tiles ---- */
.product-card, .bs-card, .wc-card, .why-card, .testimonial-card,
.trust-card, .journal-card, .marketplace-card, .popup-card,
.why-makhana-card, .nl-benefit, .referral-card {
  background: var(--glass-bg) !important;
  backdrop-filter: saturate(130%) blur(12px);
  -webkit-backdrop-filter: saturate(130%) blur(12px);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-md) !important;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.28s cubic-bezier(0.4,0,0.2,1);
}
.product-card:hover, .bs-card:hover, .wc-card:hover, .why-card:hover,
.testimonial-card:hover, .trust-card:hover, .journal-card:hover,
.marketplace-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ---- 6. Buttons — DTC pill, gradient primary, glass secondary ---- */
.btn {
  border-radius: var(--r-full);
  letter-spacing: 0.04em;
  transition: transform 0.2s ease, box-shadow 0.25s ease,
              background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* Caramel gradient tuned so #fff text clears WCAG AA (4.5:1) across the whole
   surface — the brighter gold stops failed contrast for white button text. */
.btn-primary {
  background: linear-gradient(135deg, #A25E1E 0%, #7B4F28 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(123,79,40,0.32);
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8E531C 0%, #6E4522 100%);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(123,79,40,0.40);
}
.btn-outline {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--glass-border-lo);
  color: var(--brown);
}
.btn-outline:hover {
  background: var(--glass-bg-strong);
  color: var(--brown);
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* ---- 6b. Outline buttons on DARK surfaces → translucent glass + light text
   (a light glass fill would leave light-on-light text; these sections are dark) ---- */
.hero-slide .btn-outline,
.first-crunch-box .btn-outline,
.referral-section .btn-outline,
.trust-section .btn-outline {
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(246, 239, 227, 0.55);
  color: #F6EFE3;
}
.hero-slide .btn-outline:hover,
.first-crunch-box .btn-outline:hover,
.referral-section .btn-outline:hover,
.trust-section .btn-outline:hover {
  background: rgba(255, 255, 255, 0.24);
  color: #fff;
  border-color: #fff;
}

/* ---- 7. Inputs — soft glass fields ---- */
.form-group input, .form-group textarea, .form-group select,
.popup-form input, input[type="text"], input[type="email"],
input[type="tel"], input[type="search"], textarea, select {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-lo);
  border-radius: var(--r-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-group input:focus, .form-group textarea:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,113,42,0.16);
}

/* ---- 8. Footer — DARK frosted panel (footer text is light, designed for a
   dark surface; a light panel would make it invisible) ---- */
.footer {
  background: linear-gradient(180deg, rgba(45,26,13,0.90), rgba(28,17,9,0.94));
  backdrop-filter: saturate(130%) blur(12px);
  -webkit-backdrop-filter: saturate(130%) blur(12px);
  border-top: 1px solid rgba(212,145,58,0.28);
}

/* ---- 9. Interaction hygiene (skill checklist) ---- */
a, button, .btn, [role="button"], .product-card a, label[for] { cursor: pointer; }

/* ---- 10. Accessibility: honor reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .product-card, .bs-card, .wc-card, .why-card, .testimonial-card,
  .trust-card, .journal-card, .marketplace-card, .btn, .btn-primary,
  .btn-outline { transition: none !important; }
  .product-card:hover, .bs-card:hover, .btn-primary:hover,
  .btn-outline:hover { transform: none !important; }
}