/* Design tokens for pages on the new shell: every color, size and space lives here (spec 3.2).
   Paper is the default appearance. Ink applies to any element with data-theme="dark", and to
   data-theme="system" (or no data-theme) when the system is dark. The stored values stay
   light | dark | system because pages not yet on the shell read the same storage. */

:root,
[data-theme="light"],
[data-theme="system"] {
  --paper: #ebe6de;
  --ink: #2c2925;
  --muted: #5d574f;
  --hair: rgba(44, 41, 37, .2);
  --fill: rgba(44, 41, 37, .12);
  --box: rgba(240, 236, 229, .35);
  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #1b1917;
  --ink: #e6e0d6;
  --muted: #a0998e;
  --hair: rgba(230, 224, 214, .2);
  --fill: rgba(230, 224, 214, .14);
  --box: rgba(30, 28, 26, .35);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]),
  [data-theme="system"] {
    --paper: #1b1917;
    --ink: #e6e0d6;
    --muted: #a0998e;
    --hair: rgba(230, 224, 214, .2);
    --fill: rgba(230, 224, 214, .14);
    --box: rgba(30, 28, 26, .35);
    color-scheme: dark;
  }
}

:root {
  --font-display: "Cormorant Garamond", "Cormorant Garamond Fallback", Georgia, serif;
  --font-reading: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", Menlo, Consolas, monospace;
  --label-size: clamp(10px, 1.05vw, 13px);
  --label-tracking: .2em;
  --reading-size: 18.5px;
  --reading-leading: 1.62;
  --measure: 65ch;
  --edge-block: 5.5vh;
  --edge-inline: 5%;
  --mark-size: 16px; /* the mark top left: 4px cells; 5px cells from 64rem up */
  /* Wide screens: how far in from each side the page keeps clear of the corners. The longest corner
     label is the switches, up to "Paper  Motion · off": 16 label widths of mono text. */
  --corner-reach: calc(var(--edge-inline) + 16 * var(--label-size) + var(--space-5));
  /* Narrow screens: the top veil (base.css) is opaque past the corner labels, then fades. */
  --veil-top: calc(var(--edge-block) + 1.75rem);
  --veil-fade: 2rem;
  --mask-solid: #000; /* the opaque end of a mask gradient: only its alpha counts */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --fill-fade: .15s;
  --display-size: clamp(26px, 3.6vw, 52px); /* the threshold line */
  --title-size: clamp(28px, 2.9vw, 44px); /* a chapter's title */
  --chapter-measure: 40rem; /* a chapter's column */
  --fade: .7s; /* cross-fades: Come in and chapter changes (shell.js and come-in.js wait this long) */
}

@media (max-width: 40rem) {
  :root {
    --reading-size: 17.5px;
  }
}

@media (min-width: 64rem) {
  :root {
    --mark-size: 20px;
  }
}