/*
  Design tokens that don't vary by theme.
  Spacing values are exact per Technical Standards §1 (8px grid).

  Typography: Fraunces (display serif, self-hosted — see fonts.css) for
  headings/wordmark, used sparingly at larger sizes; Literata (reading
  serif, self-hosted) for the Reader page and long-form book text; the
  system UI stack for chrome (nav, buttons, forms, labels), so the display
  serif's personality doesn't get diluted by overuse.
*/

:root {
    /* Spacing (8px grid) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;

    /* Type scale */
    --font-size-h1: 2.75rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.25rem;
    --font-size-body-lg: 1.125rem;
    --font-size-body: 1rem;
    --font-size-small: 0.875rem;
    --font-size-caption: 0.75rem;

    --line-height-heading: 1.15;
    --line-height-body: 1.6;

    /* UI typeface — chrome (nav, buttons, forms, labels). No system font is
       named in the source docs; a fast, always-available stack, kept plain
       on purpose so it doesn't compete with the display serif. */
    --font-family-ui: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Display typeface — page titles, section headings, the wordmark. An
       old-style serif with real ink-trap character (see fonts.css). */
    --font-family-display: "Fraunces", Georgia, "Times New Roman", serif;

    /* Reader typeface — the Reader page and other long-form book text
       (descriptions, etc.). Designed by Google specifically for on-screen
       reading comfort. */
    --font-family-reader: "Literata", Georgia, "Times New Roman", serif;

    /* Radius / shadow */
    --radius: 6px;
    --radius-lg: 10px;
    --shadow-card: 0 1px 3px rgba(30, 20, 10, 0.14), 0 1px 2px rgba(30, 20, 10, 0.08);
    --shadow-card-hover: 0 8px 20px rgba(30, 20, 10, 0.18), 0 2px 6px rgba(30, 20, 10, 0.1);

    /* Motion (issue #341) — one small, consistent timing system instead of
       each component picking its own duration. Three bands only:
       micro (press/hover feedback), standard (everyday UI transitions),
       reveal (content/page entrances). Reduced-motion handling stays
       per-effect in the consuming file (disable a translate but keep an
       opacity fade, skip a stagger entirely, etc.) rather than collapsing
       these durations globally — a blanket near-zero override would hide
       real per-effect judgment calls the app.css/motion.js reduced-motion
       blocks make instead. */
    --motion-micro: 130ms;
    --motion-standard: 200ms;
    --motion-reveal: 320ms;
    --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

    /* Loading-specific durations (issue #349 Phase B) -- separate band from
       the three above since these loop indefinitely rather than running
       once, so they're not "how fast" but "how slow it can spin/shimmer
       without looking frantic." */
    --motion-skeleton: 1.6s;
    --motion-spinner: 1.1s;

    /* Library shelf book reveal: a small set of CSS transitions (the
       revealed cover's width/left resize, the lift-shadow growth) need to
       stay roughly in sync with shelf-physics.js's own spring, which
       settles in ~780ms for a hover from rest (measured live) -- not a
       literal derived value (the spring's actual settle time is an
       emergent property of its STIFFNESS/DAMPING constants, not this
       token), just the closest of the three standard bands' neighbors
       that avoids the "finishes early, then the book keeps turning on its
       own" mismatch --motion-reveal's 320ms produced. Separate from the
       three standard bands since those are tuned for CSS-only, fixed-
       duration transitions, not for staying in step with a JS spring
       that has no single fixed duration of its own. */
    --motion-spring-sync: 700ms;
}