/* ============================================================================
   Peptide Portal — dark theme
   Light mode is the measured live palette in tokens.css and is NEVER changed here:
   every rule below is scoped to dark mode only.

   Dark mode is on when either
     - the visitor picked it with the header toggle      -> html[data-theme="dark"]
     - they haven't picked, and their OS is set to dark   -> prefers-color-scheme
   Picking "light" with the toggle sets html[data-theme="light"], which wins over the OS.

   Hard-coded colour literals in the other stylesheets are handled by the generated
   theme-dark-literals.css (tools/theme/build_dark.py). This file holds the tokens and
   the hand-tuned exceptions.

   The token block is written twice (manual + OS) because CSS can't share one
   declaration list between a selector and a media query. Keep the two in sync.
   ============================================================================ */

:root[data-theme="dark"] {
  color-scheme: dark;

  --dp-ink:            #F2ECE6;
  --dp-ink-60:         rgba(242, 236, 230, .64);
  --dp-ink-50:         rgba(242, 236, 230, .54);
  --dp-blue:           #DC4920;            /* CTAs keep the exact brand blue */
  --dp-muted:          #ADA29A;
  --dp-alert:          #FF5A64;
  --dp-slate:          #CCC3BC;
  --dp-scrim:          rgba(0, 0, 0, .45);

  --dp-surface:        #16100C;            /* page + header             */
  --dp-surface-alt:    #221A14;            /* cards, bands              */
  --dp-surface-card:   #2A211B;
  --dp-surface-mute:   #261D18;            /* footer ground, light tabs */
  --dp-hairline:       rgba(255, 255, 255, .09);
  --dp-hair-row:       rgba(255, 255, 255, .07);
  --dp-hair-panel:     rgba(255, 255, 255, .09);
  --dp-step-bg:        #362B23;

  /* context tokens: same source token, different dark value */
  --dpx-bg-ink:        #52392C;            /* "dark" buttons/panels stay dark, not inverted */
  --dpx-fg-blue:       #FF8057;            /* blue text/links: lifted for contrast on dark */
  --dp-theme-logo:     url("../img/logo-wordmark-dark.svg");
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] {
    color-scheme: dark;

    --dp-ink:            #F2ECE6;
    --dp-ink-60:         rgba(242, 236, 230, .64);
    --dp-ink-50:         rgba(242, 236, 230, .54);
    --dp-blue:           #DC4920;
    --dp-muted:          #ADA29A;
    --dp-alert:          #FF5A64;
    --dp-slate:          #CCC3BC;
    --dp-scrim:          rgba(0, 0, 0, .45);

    --dp-surface:        #16100C;
    --dp-surface-alt:    #221A14;
    --dp-surface-card:   #2A211B;
    --dp-surface-mute:   #261D18;
    --dp-hairline:       rgba(255, 255, 255, .09);
    --dp-hair-row:       rgba(255, 255, 255, .07);
    --dp-hair-panel:     rgba(255, 255, 255, .09);
    --dp-step-bg:        #362B23;

    --dpx-bg-ink:        #52392C;
    --dpx-fg-blue:       #FF8057;
    --dp-theme-logo:     url("../img/logo-wordmark-dark.svg");
  }
}

/* --- Theme toggle (header) -------------------------------------------------
   Sized and coloured like the search button beside it. Shows the moon in light
   mode (tap for dark) and the sun in dark mode (tap for light). */
.dp-theme {
  position: relative;
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  padding: 0; border: 0; border-radius: var(--dp-r-pill);
  background: none; color: var(--dp-ink);
  cursor: pointer;
  transition: color .18s var(--dp-ease-cta);
}
.dp-theme::before { content: ""; position: absolute; inset: -6px; }   /* finger-sized hit area */
.dp-theme:hover { color: var(--dpx-fg-blue, var(--dp-blue)); }
.dp-theme:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: 2px; }
.dp-theme svg { width: 18px; height: 18px; }
.dp-theme__sun { display: none; }
:root[data-theme="dark"] .dp-theme__sun  { display: block; }
:root[data-theme="dark"] .dp-theme__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] .dp-theme__sun  { display: block; }
  :root[data-theme="dark"] .dp-theme__moon { display: none; }
}
@media (max-width: 809px) { .dp-theme { order: 2; } }

/* Smooth cross-fade only when the visitor flips the toggle, never on page load. */
html.dp-theme-anim, html.dp-theme-anim *, html.dp-theme-anim *::before, html.dp-theme-anim *::after {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease !important;
}

/* --- Dark-only exceptions ---------------------------------------------------
   Everything below is wrapped twice for the same reason as the tokens. The rules
   themselves live in one place via the :is() list. */
:root[data-theme="dark"] img[src*="/img/logo-wordmark.svg"] { content: var(--dp-theme-logo); }
:root[data-theme="dark"] img[src*="/img/footer-mark.svg"] { content: url("../img/footer-mark-dark.svg"); }

/* Molecule line drawings are black-on-transparent — flip them to light lines. */
:root[data-theme="dark"] img[src*="/img/structures/"] { filter: invert(1) hue-rotate(180deg) brightness(.92); }

@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] img[src*="/img/logo-wordmark.svg"] { content: var(--dp-theme-logo); }
  :root[data-theme="dark"] img[src*="/img/footer-mark.svg"] { content: url("../img/footer-mark-dark.svg"); }
  :root[data-theme="dark"] img[src*="/img/structures/"] { filter: invert(1) hue-rotate(180deg) brightness(.92); }
}