/* The hub's and the writer's shared tokens: every color, face, size and timing (dark redesign, part 1; Jax, 10/24/2026).
   Dark only on the hub and the writer; the .guest-paper scope is the light set for the guest page and the exported web page.
   canon.css and writer.css map their own names onto these. Spec: projects/code/outputs/specs/2026-10-24-redesign-1-tokens-and-motion.md. */

:root {
  color-scheme: dark;

  /* ground: Ink */
  --bg: #0b0b0c;
  --surface: #131315;
  --raise: #1a1a1d;
  --line: #242427;
  --fg: #ededee;
  --muted: #8a8a8f;
  --faint: #55555a;
  --on-fg: #0b0b0c;
  --spell: #ef7a70;
  --grammar: #e0b25c;

  /* the viewer's accent: anyone but Jax and Ryn */
  --accent: #e0a07c;
  --accent-soft: rgba(224, 160, 124, 0.16);

  /* the two writers' own colors, whoever views (the header clocks) */
  --jax: #8db4e8;
  --ryn: #8fc79c;

  /* type */
  --sans: "Inter Tight", "Suisse Intl", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --track-display: -0.045em;
  --track-h2: -0.025em;
  --text-body: 500 15px/1.5 var(--sans);
  --text-label: 500 11px/1.2 var(--sans);
  --track-label: 0.08em;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --t-fast: 160ms;
  --t-mid: 260ms;
  --t-slow: 450ms;
  --t-push: 650ms;
}

html[data-author="jax"] { --accent: #8db4e8; --accent-soft: rgba(141, 180, 232, 0.16); }
html[data-author="ryn"] { --accent: #8fc79c; --accent-soft: rgba(143, 199, 156, 0.16); }

@media (max-width: 767px) {
  :root { --track-display: -0.025em; --track-h2: -0.012em; }
}

/* the light set: guest links and the exported web page (part 4). Named .guest-paper since the writer's page is .paper. */
.guest-paper {
  color-scheme: light;
  --bg: #f3f3f2;
  --surface: #ebebea;
  --raise: #ffffff;
  --line: #dcdcda;
  --fg: #111113;
  --muted: #6b6b70;
  --faint: #a3a3a7;
  --on-fg: #f3f3f2;
  --accent: #c8463c;
  --accent-soft: rgba(200, 70, 60, 0.22);
  background: var(--bg);
  color: var(--fg);
}

::selection { background: var(--accent-soft); }

/* the small uppercase label (section names, card labels, tags) */
.label { font: var(--text-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }

/* the drawn underline: grows from the left on hover */
.ul {
  color: inherit; text-decoration: none; padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 380ms var(--ease-out);
}
.ul:hover, .ul:focus-visible { background-size: 100% 1px; }

/* page transitions: a push between the hub and the writer, a calm slide and fade everywhere else.
   motion.js tags the navigation with transitionType(); a browser without cross-document transitions loads plainly. */
@view-transition { navigation: auto; }
/* between hub pages: quick, so a page change doesn't read as a wait (10/25/2026; 200 ms out and 450 ms in until then) */
::view-transition-old(root) { animation: 120ms cubic-bezier(0.7, 0, 0.84, 0) both vt-out; }
::view-transition-new(root) { animation: 260ms var(--ease-out) both vt-in; }
html:active-view-transition-type(to-writer)::view-transition-old(root) { animation: var(--t-push) var(--ease-io) both vt-push-out-left; }
html:active-view-transition-type(to-writer)::view-transition-new(root) { animation: var(--t-push) var(--ease-io) both vt-push-in-right; }
html:active-view-transition-type(to-hub)::view-transition-old(root) { animation: var(--t-push) var(--ease-io) both vt-push-out-right; }
html:active-view-transition-type(to-hub)::view-transition-new(root) { animation: var(--t-push) var(--ease-io) both vt-push-in-left; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes vt-push-out-left { to { transform: translateX(-100%); } }
@keyframes vt-push-in-right { from { transform: translateX(100%); } }
@keyframes vt-push-out-right { to { transform: translateX(100%); } }
@keyframes vt-push-in-left { from { transform: translateX(-100%); } }

/* the line reveal (motion.js reveal) */
.mo-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.mo-line > span { display: inline-block; }
.mo-line.go > span { animation: mo-rise 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes mo-rise { from { transform: translateY(105%); } }

/* the hover preview (motion.js) */
.mo-peek {
  position: fixed; left: 0; top: 0; z-index: 200; width: 300px; max-width: calc(100vw - 32px); pointer-events: none;
  background: var(--raise); color: var(--fg); border: 1px solid var(--line); border-radius: 4px; padding: 16px 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 220ms;
}
.mo-peek.on { opacity: 1; }
.mo-peek-label { display: block; margin-bottom: 8px; font: 500 11px/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mo-peek-text { margin: 0; font: 400 14px/1.6 var(--serif); }
.mo-peek-meta { margin-top: 10px; font: 500 11px/1.3 var(--sans); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .mo-peek { display: none; }
}

/* Scroll bars, everywhere on the hub and in the writer (10/26/2026, Jax; the writer's scenes page first): a thin thumb at
   the edge that shows while its box scrolls and when the pointer is on it, and nothing otherwise. motion.js sets
   .scrolling on whatever scrolled, for a moment after. Material's own scroll-bar colors are switched off so these
   apply (Chromium ignores ::-webkit-scrollbar while scrollbar-color or scrollbar-width is set). */
@supports selector(::-webkit-scrollbar) {
  html, html * { scrollbar-width: auto !important; scrollbar-color: auto !important; }
  ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
  ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-thumb { background-color: transparent !important; border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }
  .scrolling::-webkit-scrollbar-thumb { background-color: var(--line) !important; }
  ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--muted) !important; }
}
@supports not selector(::-webkit-scrollbar) {
  html, html * { scrollbar-width: thin !important; scrollbar-color: transparent transparent !important; }
  .scrolling { scrollbar-color: var(--line) transparent !important; }
}