:root {
  /* Sizes */
  --max-body-width: 48rem;
  --border-radius: 0.25rem;
  --border-width: 1px;

  /* Light mode colors */
  --light-border-color: #dbdbdb;
  --light-border-hover-color: #b5b5b5;
  --light-background-color: #f8f8f8;
  --light-highlighted-background-color: #f5f5f5;
  --light-text-color: #363636;
  --light-danger-color: #f14668;
  --light-danger-text-color: #fff;
  --light-danger-hover-color: #f03a5f;
  --light-success-color: #48c774;
  --light-success-text-color: #fff;
  --light-success-hover-color: #3ec46d;
  --light-danger-text-background-color: #fde0e6;
  --light-success-text-background-color: #effaf3;
  --light-code-text-color: #f14668;
  --light-code-background-color: #f5f5f5;
  --light-link-color: #0171ad;
  --light-link-visited-color: #0171ad;
  --light-link-hover-color: #363636;
  --light-link-active-color: #363636;

  /* Dark mode colors */
  --dark-border-color: #5f6267;
  --dark-border-hover-color: #bcbebd;
  --dark-background-color: #202124;
  --dark-highlighted-background-color: #292b2e;
  --dark-text-color: #fff;
  --dark-danger-color: #770018;
  --dark-danger-text-color: #fff;
  --dark-danger-hover-color: #6b0015;
  --dark-success-color: #006624;
  --dark-success-text-color: #fff;
  --dark-success-hover-color: #006122;
  --dark-danger-text-background-color: #770018;
  --dark-success-text-background-color: #006624;
  --dark-code-text-color: #f1a0b0;
  --dark-code-background-color: #292b2e;
  --dark-link-color: #5bb5e6;
  --dark-link-visited-color: #5bb5e6;
  --dark-link-hover-color: #fff;
  --dark-link-active-color: #fff;

  /* Cover image overlay: light mode washes white over the photo */
  --overlay-color: rgba(255, 255, 255, 0.72);
}

/* Dark mode: wash black over the photo instead */
@media (prefers-color-scheme: dark) {
  :root {
    --overlay-color: rgba(0, 0, 0, 0.72);
  }
}

/* Honour the manual dark-mode-toggle class overrides */
.holiday-css-dark  { --overlay-color: rgba(0,   0,   0,   0.72); }
.holiday-css-light { --overlay-color: rgba(255, 255, 255, 0.72); }

/* ── Background cover image ── */
body {
  background-image: url('../img/bg.jpg');
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

nav {
  background: transparent;
}

/* ── Overlay tint ── */
.overlay {
  z-index: -1;
  position: fixed;
  inset: 0;                    /* shorthand for top/right/bottom/left: 0 */
  background-color: var(--overlay-color);
  transition: background-color 0.3s ease;
}