/* Sun and moon: Harbour by day, Mesh by night, both in the dark; the toggle sits in the nav. */

/* Generated by scripts/make-meshes.mjs; edit the blobs there, not here.
   Palette contrast was checked against the brightest blob of the mesh:
   body text and headings clear AAA, muted text and links clear AA. */

:root[data-skin="sunmoon"] {
  color-scheme: dark;
  --skin-radius: 0.5rem;
  --skin-bg: oklch(0.22 0.03 235);
  --skin-fg: oklch(0.9 0.02 80);
  --skin-muted: oklch(0.7 0.04 220);
  --skin-accent: oklch(0.78 0.11 195);
  --skin-accent-hover: oklch(0.86 0.11 195);
  --skin-heading: oklch(0.93 0.03 80);
  --skin-rule: oklch(0.9 0.02 80 / 0.18);
  --skin-selection: oklch(0.78 0.11 195 / 0.3);
  --look-pill: oklch(0.78 0.11 195 / 0.14);
  --look-sun: linear-gradient(170deg in oklch, oklch(0.23 0.03 240), oklch(0.19 0.04 200));
  --look-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='95'/%3E%3C/filter%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%2314121F'/%3E%3Cg filter='url(%23b)'%3E%3Cellipse cx='200' cy='150' rx='380' ry='260' fill='%233D2A66'/%3E%3Cellipse cx='800' cy='90' rx='400' ry='240' fill='%231D3A66'/%3E%3Cellipse cx='870' cy='530' rx='380' ry='260' fill='%235A2848'/%3E%3Cellipse cx='230' cy='570' rx='420' ry='240' fill='%233E2E22'/%3E%3C/g%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28' style='mix-blend-mode:soft-light'/%3E%3C/svg%3E");
  /* Each glyph in the toggle keeps its own look's accent, whichever is live. */
  --look-sun-accent: oklch(0.78 0.11 195);
  --look-moon-accent: oklch(0.8 0.13 320);
}

:root[data-skin="sunmoon"][data-mood="moon"] {
  --skin-bg: oklch(0.17 0.02 280);
  --skin-fg: oklch(0.92 0.01 280);
  --skin-muted: oklch(0.75 0.03 280);
  --skin-accent: oklch(0.8 0.13 320);
  --skin-accent-hover: oklch(0.88 0.13 320);
  --skin-heading: oklch(0.96 0.01 280);
  --skin-rule: oklch(0.92 0.01 280 / 0.18);
  --skin-selection: oklch(0.8 0.13 320 / 0.3);
  --look-pill: oklch(0.92 0.01 280 / 0.09);
}

/* Two fixed layers, one per look, crossfaded by the toggle. */

[data-skin="sunmoon"] body::before,
[data-skin="sunmoon"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  transition: opacity 700ms ease;
  pointer-events: none;
}

[data-skin="sunmoon"] body::before {
  background: var(--look-sun);
}

[data-skin="sunmoon"] body::after {
  background: var(--look-moon) center / cover no-repeat;
  opacity: 0;
}

[data-skin="sunmoon"][data-mood="moon"] body::after {
  opacity: 1;
}

[data-skin="sunmoon"] :is(body, header, main, footer, h1, h2, h3, h4, p, li, address) {
  transition: color 600ms ease, background-color 600ms ease, border-color 600ms ease;
}

[data-skin="sunmoon"] header nav > ul:last-of-type a:hover {
  background: var(--look-pill);
}

[data-skin="sunmoon"] header nav > ul:last-of-type a[aria-current="page"] {
  text-decoration: none;
  background: var(--look-pill);
}

[data-skin="sunmoon"] .entries li hgroup > :last-child {
  color: var(--skin-accent);
}

[data-skin="sunmoon"] body > footer {
  border-top-color: oklch(from var(--skin-accent) l c h / 0.3);
}

[data-skin="sunmoon"] .headshot img {
  border-radius: 0.75rem;
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.25);
}

/* The toggle: both glyphs in a pill, each in its own colour, the live one at full strength. */

[data-skin="sunmoon"] .mood {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.5rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid oklch(from var(--skin-fg) l c h / 0.34);
  border-radius: 999px;
  color: var(--skin-muted);
  cursor: pointer;
  transition: border-color 600ms ease, color 600ms ease;
}

[data-skin="sunmoon"] .mood:hover {
  border-color: var(--skin-accent);
}

[data-skin="sunmoon"] .mood:focus-visible {
  outline: 2px solid var(--skin-accent);
  outline-offset: 2px;
}

[data-skin="sunmoon"] .mood svg {
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
  transition: opacity 300ms ease;
}

[data-skin="sunmoon"] .mood .mood-sun {
  color: var(--look-sun-accent);
}

[data-skin="sunmoon"] .mood .mood-moon {
  color: var(--look-moon-accent);
}

[data-skin="sunmoon"] .mood[aria-pressed="false"] .mood-sun,
[data-skin="sunmoon"] .mood[aria-pressed="true"] .mood-moon {
  opacity: 1;
}