/* *************************************************************************** */
/* Dark mode - redefines the theme's --ip-* tokens (see
   web/themes/custom/radix_starterkit/src/scss/_variables.scss): every
   component already reads var(--ip-*), so redefining the tokens re-colors
   the whole site for free, with no per-component rule needed.

   Two ways in:
   - Automatic: @media (prefers-color-scheme: dark), unless the user has
     explicitly forced light mode (html.light-mode) via the toggle below.
   - Manual: html.dark-mode, set by the toggle button regardless of the
     system preference.

   The class lives on <html>, not <body> - see dark_mode_page_attachments()
   in dark_mode.module, which sets it before <body> even exists, to avoid a
   flash of the wrong theme on navigation. js/dark-mode.js keeps later
   toggle clicks on the same element.

   Every selector here also requires body:not(.a11y-contrast) - a one-way,
   commented reference to the (separate) accessibility module's high
   contrast mode. High contrast is its own fixed, WCAG-driven palette
   (black/white/yellow) that must never blend with dark mode's palette;
   this exclusion means turning on contrast fully replaces dark mode rather
   than layering on it, regardless of which was toggled first, with neither
   module's JS needing to know about the other.

   --ip-white/--ip-black are deliberately NOT redefined here (same call as
   accessibility-contrast.css) - each is also used as a fixed "text/surface
   on top of a colored or photo background" literal (e.g. the accent-button
   hover text, the teaser type-badge chip) that must stay white regardless
   of theme. The two spots below that use --ip-white as a plain panel/card
   background - not a photo/accent overlay - get a small explicit override
   instead of changing the shared token.
*/
/* *************************************************************************** */

@media (prefers-color-scheme: dark) {
  html:not(.light-mode) body:not(.a11y-contrast) {
    --ip-accent-dark: #ffab5c;
    --ip-text: #e8e8e8;
    --ip-text-secondary: #b0b0b0;
    --ip-form-description-color: #b0b0b0;
    --ip-base: #a7a9aa;
    --ip-surface-muted: #242424;
    --ip-content-panel: #242424;
    --ip-placeholder-bg: #2a2a2a;
    --ip-border: #3a3a3a;
    --ip-border-hover: rgba(255, 255, 255, 0.25);
    --ip-block-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
    --ip-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.55);
    --ip-shadow-color: rgba(0, 0, 0, 0.6);
    --ip-overlay-dark: rgba(0, 0, 0, 0.6);
    --ip-panel: #1a1a1a;

    background-color: var(--ip-panel);
    color: var(--ip-text);
  }

  /* "Czytaj więcej" pill (front page/Aktualności teaser lists) and the
     /projekty row cards - both hardcode --ip-white as a plain card
     background (see _node-teaser.scss/_node-simple-list.scss), which reads
     as invisible-on-white text once the page around them goes dark.
     !important because %teaser-list-rows compiles the button rule with
     page-scoping classes prepended (.view-aktualnosci.view-display-id-
     page_1 .node--teaser .links.inline a, etc. - see @extend in
     _node-teaser.scss), which outranks a plain ancestor class on
     specificity alone. */
  html:not(.light-mode) body:not(.a11y-contrast) .node--teaser .links.inline a,
  html:not(.light-mode) body:not(.a11y-contrast) .node--prosta-lista,
  html:not(.light-mode) body:not(.a11y-contrast) .node--prosta-lista-panel {
    background-color: var(--ip-content-panel) !important;
  }

  /* Toolbar icons (this module's own moon icon, plus the accessibility
     module's A-/A/A+, contrast, outline, letter spacing, reset) are
     <img>-loaded SVGs with a hardcoded black stroke (raster <img> can't
     pick up currentColor from the page), invisible against the now-dark
     toolbar. .accessibility-control__button is a cross-module reference,
     same reasoning as the body:not(.a11y-contrast) guard above - the whole
     toolbar goes dark together, not just this module's own button. */
  html:not(.light-mode) body:not(.a11y-contrast) .dark-mode-toggle__button img,
  html:not(.light-mode) body:not(.a11y-contrast) .accessibility-control__button img,
  html:not(.light-mode) body:not(.a11y-contrast) .navbar-toggler-icon {
    filter: invert(1) brightness(1.7);
  }

  /* Person/research-group profile sidebar: card_bg.png is an opaque WHITE
     decorative graphic covering the whole card (background-size: cover),
     so it masks the now-dark --ip-content-panel underneath it entirely.
     !important because #person-sidebar/#group-sidebar are ID selectors in
     _node-person.scss/_node-research-group.scss - no plain class
     combination outranks an ID. */
  html:not(.light-mode) body:not(.a11y-contrast) #person-sidebar,
  html:not(.light-mode) body:not(.a11y-contrast) #group-sidebar {
    background-image: none !important;
  }
}

html.dark-mode body:not(.a11y-contrast) {
  --ip-accent-dark: #ffab5c;
  --ip-text: #ffffff;
  --ip-text-secondary: #b0b0b0;
  --ip-form-description-color: #b0b0b0;
  --ip-base: #a7a9aa;
  --ip-surface-muted: #242424;
  --ip-content-panel: #121212;
  --ip-placeholder-bg: #2a2a2a;
  --ip-border: #3a3a3a;
  --ip-border-hover: rgba(255, 255, 255, 0.25);
  --ip-block-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  --ip-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.55);
  --ip-shadow-color: rgba(0, 0, 0, 0.6);
  --ip-overlay-dark: rgba(0, 0, 0, 0.6);
  --ip-panel: #121212;

  background-color: var(--ip-panel);
  color: var(--ip-text);
}

html.dark-mode body:not(.a11y-contrast) .node--teaser .links.inline a,
html.dark-mode body:not(.a11y-contrast) .node--prosta-lista,
html.dark-mode body:not(.a11y-contrast) .node--prosta-lista-panel {
  background-color: var(--ip-content-panel) !important;
}

html.dark-mode body:not(.a11y-contrast) .dark-mode-toggle__button img,
html.dark-mode body:not(.a11y-contrast) .accessibility-control__button img,
html.dark-mode body:not(.a11y-contrast) .navbar-toggler-icon {
  filter: invert(1) brightness(1.7);
}

html.dark-mode body:not(.a11y-contrast) #person-sidebar,
html.dark-mode body:not(.a11y-contrast) #group-sidebar {
  background-image: none !important;
}

/* *************************************************************************** */
/* Toggle button - sized/positioned to match the accessibility module's
   toolbar buttons (same toolbar row), duplicated rather than shared so this
   module doesn't depend on the accessibility library being loaded. */
/* *************************************************************************** */

.dark-mode-toggle__button {
  width: 30px;
  height: 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0;

  background: transparent;
  border: 0;

  cursor: pointer;
}

.dark-mode-toggle__button img {
  width: 20px;
  height: 20px;
  display: block;
}

.dark-mode-toggle__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* High contrast mode replaces dark mode (see js/dark-mode.js, which sets
   disabled): keep the icon visible on the black background, but dimmed. The
   accessibility module's yellow icon filter doesn't cover this button. */
body.a11y-contrast .dark-mode-toggle__button img {
  filter: invert(1);
  opacity: 0.5;
}

.dark-mode-toggle__button:disabled {
  cursor: not-allowed;
}

.dark-mode-toggle__button:hover {
  background: transparent;
  border: 0;
}