/* --------------------------------------------------------------------
   tokens.css — Taper's design tokens.

   Loaded before base.css and themes.css, so anything here can be overridden
   by a theme and anything in base.css can refer to it.

   ## What belongs here

   The decisions that are true of Taper regardless of which theme is on: the
   flame, the typeface, the scale, the rhythm, the durations. Per-theme colour
   lives in themes.css, as it always has — this file holds only the colours
   that are part of the identity rather than part of a theme.

   ## The one rule that matters

   **Amber is not a UI colour.** `--flame` and `--flame-core` mark the reading
   position, the boundary, and the flame itself. Nothing else. A button, a
   link, a focus ring or a selected tab in amber breaks the identity, because
   the whole point is that when the reader sees amber they know what it means
   without being told.

   `--accent` stays the neutral it has always been and does the ordinary work.
   If you find yourself reaching for `--flame` to make something stand out,
   reach for weight, size or space instead.

   One exception, on purpose: the name being searched for on the character
   chart. It qualifies because it behaves like the flame and not like chrome —
   one thing at a time, only while the reader is looking for it, gone when they
   stop. A neutral outline there was genuinely missed, which is the one argument
   that should ever open this rule.
   -------------------------------------------------------------------- */

/* ================================================================== */
/* The flame                                                          */
/* ================================================================== */

:root {
  /* Identical in light and dark. A flame is the same colour in a dark room. */
  --flame: #D97A1E;
  --flame-core: #F2C14E;

  /* The boundary rule drawn across the page at the reading position. */
  --flame-rule: var(--flame);
  --flame-rule-dash: 7 6;

  /*
   * Unread text is *present but unlit* — still visibly text, never hidden or
   * blurred. 10% is low enough to read as unlit and high enough that the shape
   * of the page ahead is still there, which is the honest picture: the book
   * exists, you simply have not been there yet.
   */
  --unlit: 0.10;
}

/* ================================================================== */
/* Type                                                               */
/* ================================================================== */

/*
 * Literata, variable weight 400–600, latin and latin-ext only.
 *
 * Bundled rather than linked: Taper works with the network off, and a webfont
 * fetched from someone else's server is both a dependency and a record of
 * every reader who opened the app. 153 KB for the two subsets, cached after
 * the first load.
 *
 * `font-display: swap` deliberately — the system serif shows immediately and
 * is replaced when Literata arrives. A reader should never wait on a typeface
 * to see their own library.
 */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/literata-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /*
   * The interface is set in the same book face as the book.
   *
   * §3 of the brief: "UI chrome uses the same serif at small sizes rather than
   * introducing a sans." A reading app whose furniture is set in the system
   * interface font is telling you it is software that happens to contain a
   * book. This one is meant to read as a book that happens to be software.
   *
   * The system serif leads the fallback so the app is legible in the instant
   * before Literata arrives, and remains so if it never does.
   */
  --font-ui: 'Literata', Iowan Old Style, Palatino, 'Palatino Linotype',
    Georgia, 'Times New Roman', serif;

  /* Unchanged: identifiers in the work-document mode need to be monospaced. */
  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;

  /*
   * Literata runs small for its size, and the interface was scaled for a sans.
   * Everything is nudged up rather than the scale being rebuilt, so nothing
   * reflows unexpectedly.
   */
  --step--2: 0.72rem;
  --step--1: 0.85rem;
  --step-0: 0.97rem;
  --step-1: 1.2rem;
  --step-2: 1.6rem;
  --step-3: 2.6rem;
  --step-4: 4rem;

  /* The wordmark is always lowercase and always slightly tightened. */
  --wordmark-tracking: -0.015em;
}

/* ================================================================== */
/* Motion                                                             */
/* ================================================================== */

:root {
  /*
   * One burn cycle on the landing page. The brief asks for six to eight
   * seconds; fourteen reads as a candle and eight reads as a loading bar, so
   * this sits at the top of the range and the page has room for a slow one.
   */
  --burn-cycle: 8s;

  /*
   * The flicker is on the flame's core only — never the outer shape. An outer
   * edge that moves reads as a logo animating. A core that varies reads as a
   * flame, because that is what a flame actually does.
   */
  --flicker: 1.7s;

  /* Unchanged. Chrome should move quickly and then be still. */
  --speed: 160ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/*
 * Every duration above collapses under the two conditions that ask for
 * stillness. E-paper because motion on those screens is a full-page flash,
 * and reduced-motion because somebody asked.
 */
@media (prefers-reduced-motion: reduce) {
  :root { --burn-cycle: 0s; --flicker: 0s; }
}
[data-epaper] { --burn-cycle: 0s; --flicker: 0s; }