/* jonw.xyz — palette, reset, shared utilities.
 * Every themed color lives in a custom property so [data-mode] swaps the
 * whole scene; the 4 s day/night grade is a transition on the concrete
 * properties (fill / background-color / filter / opacity), gated by
 * html.mode-animating — see scene.css. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: Georgia, 'Times New Roman', serif;
  overflow: hidden;
  background: var(--sky-hi);
  color: var(--ink);
}

img { display: block; }

/* ---- palette ------------------------------------------------------- */

:root {
  /* day (Van Hoytema litho: cream sky, celadon water, olive banks) */
  --sky-hi: #e9dcbc;
  --sky-lo: #d6d6b2;
  --sun: #dcaf5a;
  --sun-halo: #e8cf96;
  --moon: #e6dfc4;
  --star: #cdd2df;
  --day-decor: 1;            /* sun opacity */
  --night-decor: 0;          /* moon + stars opacity */
  /* day water/banks retuned to the wide plate's palette so the bleed bands
   * continue the painted art (pale-mint bottom water, teal hills) */
  --bank-far: #8aa79c;
  --water: #c0cfc2;
  --water-glint: #eaf3e8;
  --ripple: #96b5a5;
  --bank-near: #968f63;
  --bank-near-2: #7d7550;
  --ink: #3a3a33;
  --plank-ink: rgba(58 41 22 / .88);      /* translucent — wood grain reads through */
  --plank-ink-hover: rgba(38 26 12 / .95);
  --plank-carve-hi: rgba(255 247 222 / .5);   /* lit lower lip of the cut */
  --plank-carve-lo: rgba(35 24 12 / .34);     /* shadow inside the groove */
  --ui-face: rgba(58 58 51 / .55);
  --ui-icon: #f2e8cd;
  /* traced-art layer grades — keep both modes the same 3-function list
   * or the filter transition snaps instead of easing */
  --plant-grade: brightness(1) saturate(1) hue-rotate(0deg);
  --owl-grade: brightness(1) saturate(1) hue-rotate(0deg);
  --prop-grade: brightness(1) saturate(1) hue-rotate(0deg);
  /* lace = water texture: never hue-rotate (teal must stay teal at night) */
  --lace-grade: brightness(1) saturate(1) hue-rotate(0deg);
  /* foreground band: its own grade — the pale pool water needs more
   * darkening than the props to sit down at night */
  --fg-grade: brightness(1) saturate(1) hue-rotate(0deg);
  --bg-distance: brightness(.82) saturate(.72);
  --glow: #ffe9a3;
}

[data-mode="night"] {
  --sky-hi: #232b3d;
  --sky-lo: #4a5570;
  --day-decor: 0;
  --night-decor: 1;
  --bank-far: #3a4152;
  --water: #3c4a63;
  --water-glint: #5d6c8a;
  --ripple: #55647f;
  --bank-near: #3e4356;
  --bank-near-2: #2f3345;
  --ink: #d8d3c0;
  --plank-ink: rgba(226 216 186 / .92);
  --plank-ink-hover: rgba(244 236 210 / .98);
  --plank-carve-hi: rgba(255 255 255 / .09);
  --plank-carve-lo: rgba(0 0 0 / .6);
  --ui-face: rgba(230 223 196 / .25);
  --ui-icon: #e6dfc4;
  --plant-grade: brightness(.52) saturate(.42) hue-rotate(165deg);
  --prop-grade: brightness(.55) saturate(.45) hue-rotate(160deg);
  --lace-grade: brightness(.42) saturate(.4) hue-rotate(55deg);
  --fg-grade: brightness(.38) saturate(.5) hue-rotate(180deg);
  --owl-grade: brightness(1) saturate(1) hue-rotate(0deg); /* owl art is recolor-baked */
}

/* no-JS fallback: mode from the OS color scheme */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) {
    --sky-hi: #232b3d;
    --sky-lo: #4a5570;
    --day-decor: 0;
    --night-decor: 1;
    --bank-far: #3a4152;
    --water: #3c4a63;
    --water-glint: #5d6c8a;
    --ripple: #55647f;
    --bank-near: #3e4356;
    --bank-near-2: #2f3345;
    --ink: #d8d3c0;
    --plank-ink: rgba(226 216 186 / .92);
    --plank-ink-hover: rgba(244 236 210 / .98);
    --plank-carve-hi: rgba(255 255 255 / .09);
    --plank-carve-lo: rgba(0 0 0 / .6);
    --ui-face: rgba(230 223 196 / .25);
    --ui-icon: #e6dfc4;
    --plant-grade: brightness(.52) saturate(.42) hue-rotate(165deg);
    --prop-grade: brightness(.55) saturate(.45) hue-rotate(160deg);
    --lace-grade: brightness(.42) saturate(.4) hue-rotate(55deg);
    --fg-grade: brightness(.38) saturate(.5) hue-rotate(180deg);
  }
}

/* ---- utilities ------------------------------------------------------ */

.vh {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

a { color: var(--plank-ink); }

:focus-visible { outline: 2px solid var(--ui-icon); outline-offset: 3px; }