/* ------------------------------------------------------------------
   Kippur Studio -- design tokens

   One accent, and it is the company colour. Everything else is neutral,
   so the teal always means something when it appears.

   Three series are fused here on purpose:
     the projection and the instrument panel are Voidality
     the paper, the leather and the gilt are Dwarkinvolk
     the sincere counting of pointless things is Super Stitious
   ------------------------------------------------------------------ */

:root {
  /* the one accent */
  --accent:        #25eab5;
  --accent-deep:   #1fb296;
  --accent-dark:   #15705f;
  --accent-pale:   #9df6de;
  --accent-glow:   rgba(37, 234, 181, 0.28);
  --accent-faint:  rgba(37, 234, 181, 0.09);

  /* the void */
  --void-0: #04070a;
  --void-1: #070c12;
  --void-2: #0b131b;
  --void-3: #111d27;
  --void-4: #1a2b38;

  /* the paper */
  --paper-0: #f3ece0;
  --paper-1: #e8dfd0;
  --paper-2: #d8ccb8;
  --ink-0:   #1b1710;
  --ink-1:   #3a3226;
  --ink-2:   #6b6052;

  /* the leather */
  --hide-0: #15110d;
  --hide-1: #221a13;
  --hide-2: #352619;
  --gilt:   #c9a84c;

  --text-0: #e9f1ee;
  --text-1: #9fb3ad;
  --text-2: #647873;

  /* Small capitals, widely spaced: field labels and the like. They read far
     worse than running text at the same lightness, so they get their own. */
  --label:  #c2d6d0;
  --line:   rgba(159, 179, 173, 0.16);

  --danger:  #ff6b5e;
  --warn:    #f0c060;
  --ok:      var(--accent);

  /* type: a serif with some history for the paper, thin mono for the readouts */
  --font-paper: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-hud:   'IBM Plex Mono', 'Cascadia Mono', Consolas, 'SF Mono', ui-monospace, monospace;
  --font-ui:    'Inter', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;

  /* motion. His rule: nothing may make the reader wait.
     state changes are near-instant, the page flutter is a fixed gesture,
     and only pulling a book off the shelf is allowed to be felt. */
  --t-tick:  90ms;
  --t-state: 150ms;
  --t-swap:  220ms;
  --t-flip:  300ms;
  --t-pull:  450ms;

  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-both: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-snap: cubic-bezier(0.34, 1.4, 0.64, 1);

  --rail: clamp(1rem, 4vw, 3.5rem);
  --maxw: 76rem;
}

/* Honour the reader's setting. Everything still works; it simply arrives. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-tick: 1ms; --t-state: 1ms; --t-swap: 1ms; --t-flip: 1ms; --t-pull: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------
   One book, one set of proportions

   The spine standing on the shelf and the object in the hand are the same
   book, so both are built from the same two ratios against its height.
   They were drifting apart before, which is why a book looked slimmer off
   the shelf than on it.
   ------------------------------------------------------------------ */
:root {
  /* Travelling between places: the one being left falls away, the one being
     arrived at comes up. Both short -- this is a join, not a feature. */
  --t-fall: 240ms;
  --t-rise: 340ms;

  --book-w: 0.72;    /* width of the board, against its height */
  --book-d: 0.165;   /* thickness, against its height          */

  /* The board showing around a page, and the margin inside the page. Both
     are used by the book as it opens and by the spread once it is open, so
     the print cannot reflow between the two. */
  --leafpad: 0.62rem;
  /* How thick the whole text block reads, at the outer edge of a page. */
  --stack: clamp(.5rem, 1.4vw, 1.1rem);
  /* One leaf, seen edge on at the outer margin of a page. */
  --leaf-thick: 0.13rem;
  --leafinner: 1.55rem 1.4rem;

  /* Lettering on a spine, against the thickness it is printed on. */
  --spine-code: 0.44;
  --spine-foot: 0.26;
}

/* ------------------------------------------------------------------
   The scrollbar, everywhere it appears (Seth, 2026-10-28).

   No track, and the accent for the thumb. The default is a pale slab down
   the edge of a very dark page, and it was the brightest thing on several
   of them.

   Both syntaxes, because they are not alternatives: `scrollbar-*` is the
   standard one Firefox implements and `::-webkit-scrollbar` is what Chrome
   and Safari still take. A browser that reads both is given the same answer
   twice; one that reads neither gets its own, which is the only honest
   fallback there is.

   ⚠️ `scrollbar-gutter: stable` on the root is what keeps the page from
   shifting sideways when a scrollbar appears and disappears between pages --
   which, on a site where the next page is often a different height, is a
   real part of "the transitions feel jumpy".
   ------------------------------------------------------------------ */

:root {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-deep) transparent;
  scrollbar-gutter: stable;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--accent-deep);
  border-radius: 999px;
  /* The border is transparent and the paint is clipped to the content box,
     so the thumb reads as a thin pill with air around it rather than a bar
     that touches both edges of the track. */
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: content-box; }

/* The paper inside a book is not the void, so its scrollbar is not the
   accent either -- it is ink on paper, as everything else on that page is. */
.leaf__body, .sc__words, .np__note {
  scrollbar-color: rgba(27, 23, 16, .32) transparent;
}