/* Single source of truth for the site palette.
   Change a colour here and every page picks it up. */

:root {
  --bg: #faf8f5;
  --text: #1a1a1a;
  --text-muted: #3a3a3a;
  --text-soft: #666;
  --border: #e8e0d5;
  --section-title: #aaa;
  --hover: #888;
  --link: #295f7c;
  --link-hover: #1a4055;
  --grid: #e8e0d5;
  --gallery-bg: #ede8e1;
  --tag-bg: #f0ece6;
  --tag-text: #999;
  --pfp-bg: #e8e0d5;
}

html[data-theme="dark"] {
  --bg: #212226;
  --text: #e2e4e9;
  --text-muted: #b8bcc8;
  --text-soft: #7a7e8a;
  --border: #2e3038;
  --section-title: #5a5e6a;
  --hover: #c8ccd8;
  --link: #a0b4cc;
  --link-hover: #bfcfe0;
  --grid: #2e3038;
  --gallery-bg: #1c1d21;
  --tag-bg: #1c1d21;
  --tag-text: #7a7e8a;
  --pfp-bg: #1c1d21;
}

/* Smooth page changes between pages of the site (supported browsers only) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }

/* Images fade in once they have loaded (class added by a small inline script) */
.fade-imgs img { opacity: 0; transition: opacity 0.45s ease; }
.fade-imgs img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fade-imgs img { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}