/*
 * Dark mode for lightworkermark.co.nz
 * Follows the visitor's device setting (Windows/macOS/iOS/Android "dark" theme) via
 * prefers-color-scheme — there is no toggle, so it always matches their PC or phone.
 *
 * tailwind.css is pre-built and its utilities live in a cascade layer, so these
 * unlayered rules win without !important. Each rule re-maps a light utility the pages
 * use to a dark equivalent; colours that already sit on dark sections (heroes, footer,
 * indigo-950 panels, text-white) are left alone. If a page starts using a new light
 * colour class, add it here too.
 */

:root { color-scheme: light dark; }

/* Both modes: pink call-to-action buttons one shade deeper (pink-600) so their white text
   meets 4.5:1 contrast — pink-500 was 3.6:1. Hover goes one shade deeper again. */
.bg-pink-500 { background-color: #db2777; }
@media (hover: hover) { .hover\:bg-pink-600:hover { background-color: #be185d; } }

/* Both modes (dark mode re-maps it again below): green accent text one shade deeper
   (emerald-700) so small green labels and links meet 4.5:1 on white. */
.text-emerald-600 { color: #047857; }

@media (prefers-color-scheme: dark) {
  :root {
    --dm-page: #0e1024;        /* page background (was slate-50) */
    --dm-surface: #161a36;     /* cards and white sections (was white) */
    --dm-surface-2: #1d2247;   /* inputs, slate-100 panels, hovers */
    --dm-text: #e2e8f0;
    --dm-text-strong: #f1f5f9;
    --dm-text-soft: #cbd5e1;
    --dm-muted: #a3b0c2;
    --dm-heading: #e0e7ff;
    --dm-link: #a5b4fc;
    --dm-link-hover: #c7d2fe;
    --dm-border: rgba(148, 163, 184, 0.16);
    --dm-border-strong: rgba(148, 163, 184, 0.26);
  }

  body { background-color: var(--dm-page); color: var(--dm-text); }

  /* Header: frosted dark instead of frosted white */
  html .glass { background: rgba(14, 16, 36, 0.92); }   /* "html" outranks each page's own .glass rule, which loads later */

  /* ---- Surfaces -------------------------------------------------------- */
  .bg-slate-50 { background-color: var(--dm-page); }
  .bg-white { background-color: var(--dm-surface); }
  .bg-slate-100 { background-color: var(--dm-surface-2); }
  .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.14); }
  .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.24); }
  .bg-pink-50 { background-color: rgba(236, 72, 153, 0.12); }
  .bg-pink-100 { background-color: rgba(236, 72, 153, 0.22); }
  .bg-purple-50 { background-color: rgba(168, 85, 247, 0.13); }
  .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.12); }
  .bg-amber-50 { background-color: rgba(245, 158, 11, 0.11); }
  .focus\:bg-white:focus { background-color: var(--dm-surface-2); }

  @media (hover: hover) {
    .hover\:bg-indigo-50:hover { background-color: rgba(99, 102, 241, 0.2); }
    .hover\:bg-slate-50:hover,
    .hover\:bg-slate-100:hover,
    .hover\:bg-slate-200:hover { background-color: var(--dm-surface-2); }
    .hover\:text-indigo-600:hover { color: var(--dm-link-hover); }
    .hover\:text-indigo-800:hover,
    .hover\:text-indigo-900:hover { color: var(--dm-heading); }
    .hover\:text-slate-600:hover,
    .hover\:text-slate-700:hover { color: var(--dm-text-strong); }
  }

  /* White pill buttons stay white so they still read as buttons */
  a.bg-white, button.bg-white { background-color: #ffffff; color: #312e81; }
  @media (hover: hover) {
    a.bg-white.hover\:bg-indigo-50:hover, button.bg-white.hover\:bg-indigo-50:hover { background-color: #eef2ff; }
  }

  /* Pale gradients (energy healing callout, workshops timeline, email sign-up) */
  .from-indigo-50 { --tw-gradient-from: #13163a; }
  .from-pink-50 { --tw-gradient-from: rgba(236, 72, 153, 0.14); }
  .via-white { --tw-gradient-via: #161a36; }
  .to-white { --tw-gradient-to: var(--dm-surface); }
  .to-purple-50 { --tw-gradient-to: #1e1640; }

  /* ---- Text -------------------------------------------------------------- */
  .text-slate-900, .text-slate-800 { color: var(--dm-text-strong); }
  .text-slate-700 { color: var(--dm-text); }
  .text-slate-600 { color: var(--dm-text-soft); }
  .text-slate-500 { color: var(--dm-muted); }
  .text-indigo-950, .text-indigo-900 { color: var(--dm-heading); }
  .text-indigo-800 { color: #c7d2fe; }
  .text-indigo-700, .text-indigo-600 { color: var(--dm-link); }
  .text-pink-600, .text-pink-700 { color: #f9a8d4; }
  .text-pink-500 { color: #f472b6; }
  .text-purple-600, .text-purple-700, .text-purple-900 { color: #d8b4fe; }
  .text-emerald-600, .text-emerald-900 { color: #6ee7b7; }
  .text-green-700 { color: #86efac; }
  .text-teal-900 { color: #99f6e4; }
  .text-cyan-900 { color: #a5f3fc; }
  .text-blue-900 { color: #bfdbfe; }
  .text-red-700 { color: #fca5a5; }
  .text-amber-950, .text-amber-900 { color: #fde68a; }
  .text-amber-800 { color: #fcd34d; }

  /* ---- Borders and focus rings ----------------------------------------- */
  .border-slate-50, .border-slate-100 { border-color: var(--dm-border); }
  .border-slate-200 { border-color: var(--dm-border-strong); }
  .border-indigo-100 { border-color: rgba(129, 140, 248, 0.22); }
  .border-indigo-200 { border-color: rgba(129, 140, 248, 0.34); }
  .border-pink-100 { border-color: rgba(244, 114, 182, 0.28); }
  .border-purple-100 { border-color: rgba(192, 132, 252, 0.28); }
  .border-green-100 { border-color: rgba(74, 222, 128, 0.25); }
  .border-amber-100 { border-color: rgba(251, 191, 36, 0.25); }
  .focus\:ring-indigo-100:focus { --tw-ring-color: rgba(99, 102, 241, 0.4); }
  .focus\:border-indigo-400:focus { border-color: #818cf8; }

  /* Form fields: readable text and placeholders on dark inputs */
  input, textarea, select { color: var(--dm-text-strong); }
  ::placeholder { color: #7c8aa5; }

  /* Long-form text (About, Privacy) */
  .prose {
    --tw-prose-body: var(--dm-text-soft);
    --tw-prose-headings: var(--dm-heading);
    --tw-prose-lead: var(--dm-text-soft);
    --tw-prose-links: var(--dm-link);
    --tw-prose-bold: var(--dm-text-strong);
    --tw-prose-counters: var(--dm-muted);
    --tw-prose-bullets: #6366f1;
    --tw-prose-hr: var(--dm-border-strong);
    --tw-prose-quotes: var(--dm-text);
    --tw-prose-quote-borders: #4f46e5;
  }

  /* EnlightenMe app page: the phone mock-up frame */
  html .phone-mockup { background: #1e1b4b; border-color: #0b0b14; }

  /* Photos: take the edge off bright images against the dark page */
  main img:not([src$=".svg"]) { filter: brightness(0.92); }
}