/* Dark theme for the FFXIV screenshots page.
   Loaded as a disabled stylesheet and switched on by the Light/Dark button.
   The site's own look is treated as the light theme, so this file only needs
   to deepen the background and panels while keeping the pink accents, the
   frosted glass, the rounded corners and the soft shadows. */

body {
  background-color: #2b2b34;
}

/* the main frosted box and the per-set boxes go darker */

.container,
.set-box,
.card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

.card:hover {
  border-color: #ff7eb6;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}

/* text drops to a softer, dimmer tone so it does not glare on the dark ground */

.title,
.subtitle,
.preview-title,
.set-title,
.set-toggle,
.box-desc,
.set-desc,
.card .caption,
.lightbox .meta {
  color: #dcd8d8;
}

.box-desc,
.set-desc,
.card .caption {
  color: rgba(220, 216, 216, 0.78);
}

.set-toggle:hover,
.set-toggle:focus {
  color: #ffffff;
}

/* the pink accents stay exactly as they are, so the theme keeps its identity */

.title-o,
.subtitle .accent,
.preview-title .accent,
.set-toggle .accent,
.set-title .accent,
.lightbox .meta .accent,
.card .date {
  color: #ff7eb6;
}

/* the pictures get a darker frame and a deeper shadow */

.card img {
  border-color: rgba(255, 255, 255, 0.12);
  background: #1c1c22;
}

.lightbox img {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
}

/* the pink buttons keep their colour, only the shadow deepens */

.button_1,
.controls button,
.close,
.set-hint,
.card button::after {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}

/* in dark mode the switch becomes a dark button with light text */

.mode-toggle {
  color: #ffffff;
  background-color: #1c1c22;
  border-color: rgba(255, 255, 255, 0.35);

  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.mode-toggle:hover {
  background-color: #2c2c34;
}