/* ============================================================
   HealthyGreens: dark mode + theme toggle
   Loaded after style.css. Everything is scoped to html[data-theme="dark"],
   which the inline script in base.html sets before the page renders.
   ============================================================ */

/* ---------- Theme toggle button ---------- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width: 42px; height: 42px; border-radius: 50%; cursor:pointer;
  background: transparent; border: 1.5px solid var(--line); color: var(--ink);
  transition: border-color .2s ease, background .2s ease;
}
.theme-toggle:hover{ border-color: var(--ink); }
.theme-toggle:focus-visible{ outline: 3px solid var(--clay); outline-offset: 2px; }
.theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }

/* Mobile: style.css hides .nav-cta; keep it for the toggle only, next to the menu button */
@media (max-width: 900px){
  .nav-cta{ display:flex; margin-left:auto; margin-right: 6px; order: 1; }
  .nav-cta .btn{ display:none; }
  .nav-toggle{ order: 2; }
}

/* ---------- Dark palette ---------- */
html[data-theme="dark"]{
  color-scheme: dark;              /* dark scrollbars, form controls, dropdowns */

  --ink:        #E8EEF3;           /* headings, strong text */
  --ink-70:     #A9BACA;           /* body text */
  --charcoal:   #D5DEE6;
  --slate:      #8E9CAA;
  --paper:      #0F1A24;           /* page background */
  --sand:       #142230;           /* alternate sections */
  --surface:    #172634;           /* cards, inputs (were white) */
  --deep:       #0A131B;           /* footer, code blocks, dark bands */
  --line:       #27394A;

  --forest-dark:#5FCB83;           /* green text/links: lighter for contrast */
  --clay-dark:  #F2906B;
  --mint:       #163726;
  --mint-deep:  #1F4A31;
  --peach:      #3A241B;
}

/* Surfaces that were hard-coded white */
html[data-theme="dark"] :is(.feature-card, .disease-card, .chip, .endpoint-bar, .copy-btn, .table-wrap,
  .try-card, .dropzone .dz-icon, .dropzone.has-image, .crop-chips span),
html[data-theme="dark"] .form-field :is(input, select, textarea){
  background: var(--surface);
}

/* Things that used --ink as a dark background, which is now light */
html[data-theme="dark"] :is(.site-footer, .section-ink, .code-block){ background: var(--deep); }
html[data-theme="dark"] .code-block{ border: 1px solid var(--line); }
html[data-theme="dark"] .step-num,
html[data-theme="dark"] .chip.active{ background: var(--forest); border-color: var(--forest); color:#fff; }
html[data-theme="dark"] .btn-outline:hover{ background: var(--ink); color: var(--paper); }

/* Header */
html[data-theme="dark"] .site-header{ background: rgba(15,26,36,0.88); }
/* The navy leaf disappears on a dark header: give the logo a light badge, like the footer does */
html[data-theme="dark"] .site-header .brand img{ background: #E8EEF3; border-radius: 10px; padding: 3px; }

/* Softer photos and illustrations so they don't glare on a dark page */
html[data-theme="dark"] :is(.rounded-media, .hero-media) img{ filter: brightness(.9); }

/* API docs status pill */
html[data-theme="dark"] .status-pill.warn{ background:#3A2E14; color:#F0C674; border-color:#5A4718; }
html[data-theme="dark"] .status-pill.err{ color:#FF8A80; border-color:#5A2A22; }
html[data-theme="dark"] .field-error{ color:#FF8A80; }

/* "Submitted!" popup (styled inline in base.html) */
html[data-theme="dark"] .modal-box{ background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
html[data-theme="dark"] .modal-box h3{ color: var(--ink); }
html[data-theme="dark"] .modal-box p{ color: var(--ink-70); }