/*
 * Design tokens.
 *
 * The colour values are lifted verbatim from the free-books stylesheet so the
 * rebuilt site is recognisably the same brand — this file changes how the
 * system is structured, not how it looks. What is new is the spacing and type
 * scale, and the fact that everything downstream is mobile-first.
 */
:root {
  color-scheme: light;

  /* ---- colour (unchanged from the original palette) ---- */
  --bg: #f7f7f5;
  --surface: #ffffff;
  --sunken: #efeeeb;
  --text: #1a1a1a;
  --text-muted: #63666b;
  --border: #e4e4e0;
  --brand: #2456a6;
  --brand-dark: #163a78;
  --free: #1a7f37;
  --price: #b3261e;

  /* Tints that were hardcoded all over the old sheet. Promoted to tokens so a
     pill, a flash and a status chip can never drift apart again. */
  --free-bg: #e7f5ec;
  --free-fg: #146c33;
  --price-bg: #fdecea;
  --price-fg: #a3261e;
  --warn-bg: #fef4e6;
  --warn-fg: #8a5a12;
  --warn-line: #f0d9b0;
  --hover: #fbfbfa;
  --zebra: #faf9f7;

  /* ---- spacing: a 4px-based scale ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;

  /* ---- type: fluid, so it scales without stepping at breakpoints ---- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs:   .75rem;
  --fs-sm:   .825rem;
  --fs-base: .925rem;
  --fs-md:   1rem;
  --fs-lg:   clamp(1.05rem, 1rem + .4vw,  1.2rem);
  --fs-xl:   clamp(1.25rem, 1.1rem + 1vw, 1.6rem);
  --fs-2xl:  clamp(1.5rem,  1.2rem + 2vw, 2.25rem);
  --fs-3xl:  clamp(1.8rem,  1.3rem + 3vw, 2.9rem);

  /* ---- shape and depth ---- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, .06), 0 12px 24px -8px rgba(16, 24, 40, .14);
  --shadow-lift: 0 10px 24px -8px rgba(16, 24, 40, .18);
  --ring: 0 0 0 3px rgba(36, 86, 166, .16);

  --max-width: 1200px;
  --measure: 68ch;          /* readable line length for prose */

  /* Breakpoints are duplicated as literals in the media queries below —
     custom properties cannot be used inside a @media condition. Keep these in
     sync by hand; they exist so the intended values are documented in one
     place. */
  --bp-sm: 30rem;   /* 480px */
  --bp-md: 48rem;   /* 768px */
  --bp-lg: 64rem;   /* 1024px */
}