/* ============================================================
   site-theme.css — the one soft-green background, sitewide.

   Canonical source: the homepage .mesh-gradient-bg. Every light page
   links this file LAST in <head> so it wins over whatever background
   that page declared inline.

   Change the palette here and it changes everywhere. Do not re-declare
   a page background in a page's own <style>.
   ============================================================ */

:root{
  --js-bg-base:#f8fafc;
  --js-bg-mesh:
    radial-gradient(at 10% 10%, rgba(16, 185, 129, 0.08) 0px, transparent 50%),
    radial-gradient(at 90% 15%, rgba(13, 148, 136, 0.07) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(241, 245, 249, 0.50) 0px, transparent 100%),
    radial-gradient(at 80% 85%, rgba(16, 185, 129, 0.06) 0px, transparent 50%);
}

html{background-color:var(--js-bg-base)}

/* body[class] matches the specificity of utility classes such as Tailwind's
   .bg-slate-50 on the homepage shell, so the shared background still wins. */
body,
body[class]{
  background-color:var(--js-bg-base);
  background-image:var(--js-bg-mesh);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}

/* The homepage applies the mesh to <main> as well. With the field now painted
   once on <body>, that second layer would double the tint — clear it so every
   page renders exactly one background. */
.mesh-gradient-bg{
  background-color:transparent;
  background-image:none;
}

/* Pages that ship their own auto dark mode would flip text colours against a
   background this file pins to light. Keep the whole site on one scheme. */
:root{color-scheme:light}
