/* ============================================================
   Ask 4 B — Custom color scheme
   White background · soft yellow page panels ·
   green brand + links · purple subtitles.
   Loaded after the compiled Tailwind CSS; !important wins.
   ============================================================ */

:root{
  --c-white:#ffffff;
  --c-yellow:#f9e9a0;        /* soft butter yellow for panels   */
  --c-yellow-border:#ecd77e; /* slightly deeper yellow for edges*/
  --c-green:#2e7d4f;         /* rich emerald — brand, links, btn*/
  --c-green-dark:#1f5d39;    /* hover / pressed                 */
  --c-purple:#7e4fa8;        /* amethyst — subtitles            */
  --c-lavender:#c9a8e0;      /* light purple for text on photos */
}

/* Page base — white everywhere */
html,body{ background:var(--c-white) !important; }

/* ---- Backgrounds: cream -> white --------------------------- */
.bg-cream{ background-color:var(--c-white) !important; }
.bg-cream\/5{ background-color:rgba(255,255,255,.05) !important; }
.bg-cream\/90{ background-color:rgba(255,255,255,.9) !important; }   /* frosted sticky header */

/* Light text (on green buttons / dark photo) stays white */
.text-cream{ color:var(--c-white) !important; }
.text-cream\/85{ color:rgba(255,255,255,.85) !important; }
.border-cream\/15{ border-color:rgba(255,255,255,.15) !important; }

/* Hero gradient: white fading into the soft yellow */
.from-cream{
  --tw-gradient-from:var(--c-white) var(--tw-gradient-from-position) !important;
  --tw-gradient-to:rgba(255,255,255,0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important;
}
.via-cream{
  --tw-gradient-to:rgba(255,255,255,0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops:var(--tw-gradient-from),var(--c-white) var(--tw-gradient-via-position),var(--tw-gradient-to) !important;
}

/* ---- Surfaces: sand -> soft yellow ------------------------- */
.bg-sand{ background-color:var(--c-yellow) !important; }
.bg-sand\/30{ background-color:rgba(249,233,160,.45) !important; }
.hover\:bg-sand:hover{ background-color:var(--c-yellow) !important; }
.to-sand\/50{ --tw-gradient-to:rgba(249,233,160,.55) var(--tw-gradient-to-position) !important; }

.border-sand{ border-color:var(--c-yellow-border) !important; }
.border-sand\/60{ border-color:rgba(236,215,126,.6) !important; }
.border-sand\/70{ border-color:rgba(236,215,126,.7) !important; }

/* .text-sand is only used for the eyebrow over the dark photo —
   give it a light lavender so it reads against the image */
.text-sand{ color:var(--c-lavender) !important; }

/* ---- Green: primary (sageDeep) ----------------------------- */
.bg-sageDeep{ background-color:var(--c-green) !important; }
.bg-sageDeep\/95{ background-color:rgba(46,125,79,.95) !important; }
.text-sageDeep{ color:var(--c-green) !important; }
.border-sageDeep\/15{ border-color:rgba(46,125,79,.18) !important; }
.border-sageDeep\/30{ border-color:rgba(46,125,79,.35) !important; }
.ring-sageDeep\/15{ --tw-ring-color:rgba(46,125,79,.15) !important; }
.hover\:border-sageDeep:hover{ border-color:var(--c-green) !important; }

/* ---- Purple: subtitles / eyebrows (terracotta) ------------- */
.text-terracotta{ color:var(--c-purple) !important; }

/* ---- "Ask 4 B" brand + links -> green ---------------------- */
/* Header logo */
header a[href="/"]{ color:var(--c-green) !important; }
/* Header nav text links (leave the green "Book" pill alone) */
header nav a:not([class*="sageDeep"]){ color:var(--c-green) !important; }
header nav a:not([class*="sageDeep"]):hover{ color:var(--c-green-dark) !important; }
/* Footer brand wordmark */
footer p.text-ink{ color:var(--c-green) !important; }
/* Footer links */
footer a{ color:var(--c-green) !important; }
footer a:hover{ color:var(--c-green-dark) !important; }