/* ═══════════════════════════════════════════════════════════════════════════
   HFV ARCHIVE — design tokens.

   Link this first on every page: the layer statement below fixes the cascade
   order for every other stylesheet, and layer order is set by first appearance.

   A quiet gallery after dark. Neutral charcoal grounds, so a photograph's
   colour reads true against them; off-white ink dimmed in steps; one grotesk
   (Geist) for everything and its mono for small numbers. There is no accent
   colour: the chrome is monochrome and the photographs are the only colour
   on the page.

   ── SHAPE ──────────────────────────────────────────────────────────────────
     photographs  4px   (--r-photo)
     panels       12px  (--r-panel) — the selection bar, the toast
     controls     pill  — every button and link-button

   ── MOTION ─────────────────────────────────────────────────────────────────
   Nothing moves on its own and nothing is tied to scroll. Interface motion is
   feedback to an input — a hover, a press — at most 150ms, colour and opacity
   only. The one narrative transition is the viewer's open/close morph, and
   the viewer's gestures (swipe, pinch, pull to close) follow the finger.
   prefers-reduced-motion cuts even those to a snap (the motion layer, last in
   the cascade, so the cut wins).
   ═══════════════════════════════════════════════════════════════════════════ */

@layer reset, tokens, base, chrome, home, header, chapter, downloads, viewer, motion;

/* ── registered properties ─────────────────────────────────────────────────
   --tint is a photograph's average colour, painted behind it while it loads.
   --ring is a unitless 0—1, not a percentage: dividing by a percentage in
   calc() needs Values 4 type arithmetic, and where that is unsupported the
   declaration is dropped — leaving the ring reading "full" from byte zero. */

@property --tint { syntax: "<color>";  inherits: true; initial-value: #2a2a2a; }
@property --ring { syntax: "<number>"; inherits: true; initial-value: 0; }

@layer tokens {
  :root {
    /* Ground: neutral charcoal in steps, one elevation per step. */
    --bg-0: oklch(18%   0 0);   /* #121212 */
    --bg-1: oklch(21%   0 0);
    --bg-2: oklch(25%   0 0);
    --bg-3: oklch(31%   0 0);

    /* Ink: off-white, dimmed in steps. --mute and --dim both clear AA
       against --bg-0 at the sizes they are set in. */
    --ink:  oklch(93% 0 0);
    --mute: oklch(70% 0 0);
    --dim:  oklch(58% 0 0);
    --on-ink: oklch(16% 0 0);   /* text that sits on --ink */

    /* Hairlines and washes are mixes, never new colours. */
    --line:      color-mix(in oklab, var(--ink) 12%, transparent);
    --line-soft: color-mix(in oklab, var(--ink) 7%,  transparent);
    --plate:     color-mix(in oklab, var(--ink) 6%,  transparent);
    --plate-2:   color-mix(in oklab, var(--ink) 11%, transparent);

    --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --r-photo: 4px;
    --r-panel: 12px;
    --r-pill:  999px;

    --gap: 6px;
    --pad: clamp(16px, 4.5vw, 64px);
    --measure: 1440px;
    --bar-h: 56px;

    --elev: 0 1px 2px rgb(0 0 0 / .35), 0 12px 32px rgb(0 0 0 / .35);

    --ease: cubic-bezier(.22, .8, .24, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --spring: linear(0, .35 7.5%, .82 16%, 1.02 23%, 1.06 29%, 1.02 38%, .99 52%, 1);
    --quick: 150ms;

    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);

    color-scheme: dark;
    accent-color: var(--ink);
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--bar-h) + var(--safe-t) + 16px);
    interpolate-size: allow-keywords;
  }

  body, h1, h2, h3, p, figure, dl, dd, ul, li { margin: 0; padding: 0; }
  ul { list-style: none; }
  img, svg, video { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  button, input, a { font: inherit; color: inherit; }
  /* padding:0 matters: the UA sheet gives buttons `padding: 1px 6px`, and with
     border-box sizing that leaves 6px of the placeholder tint showing down each
     side of every photograph, which reads as a grey border. */
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  dialog { border: 0; padding: 0; max-inline-size: none; max-block-size: none; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  :focus:not(:focus-visible) { outline: none; }
}