/* Samuel's Bookman — design tokens + base typography.
 *
 * A descendant of the Swiss / International Typographic Style: one grotesk
 * family (Inter, self-hosted OFL variable font — app/assets/fonts), a real
 * grid, hairline rules as structure, flush-left hierarchy carried by size
 * and weight, generous white space, no shadows or ornament, one cool accent.
 * The comic subject shows only through the generated covers (books.css),
 * which are typographic posters in a curated six-tone palette.
 * Dark mode inverts paper/ink via prefers-color-scheme only — no toggle.
 * Component styles: layout.css / books.css / forms.css / components.css
 * (Propshaft bundles every file in this directory via stylesheet_link_tag :app).
 */

@font-face {
  font-family: "Inter";
  src: url("/assets/Inter-Variable-d09d67ef.ttf") format("truetype-variations"), url("/assets/Inter-Variable-d09d67ef.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --surface: #f3f3f1;       /* panels, placeholders' neutral */
  --ink: #111111;
  --muted: #676767;         /* 5.7:1 on paper */
  --rule: rgba(17, 17, 17, 0.18);   /* hairlines */
  --rule-strong: #111111;
  --accent: #1f3bd9;        /* cobalt — interactive; 7:1 on paper */
  --accent-ink: #ffffff;
  --signal: #d8261c;        /* state: on loan, errors, destructive */
  --border: var(--rule);
  /* Cover poster tones (series-keyed, see BooksHelper#cover_placeholder). */
  --tone-0: #1f3bd9; --tone-0-ink: #ffffff;
  --tone-1: #d8261c; --tone-1-ink: #ffffff;
  --tone-2: #111111; --tone-2-ink: #ffffff;
  --tone-3: #e0b400; --tone-3-ink: #111111;
  --tone-4: #1d6b4f; --tone-4-ink: #ffffff;
  --tone-5: #5b2a86; --tone-5-ink: #ffffff;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101010;
    --surface: #1c1c1c;
    --ink: #ececea;
    --muted: #a3a3a0;
    --rule: rgba(236, 236, 234, 0.2);
    --rule-strong: #ececea;
    --accent: #8b9cff;
    --accent-ink: #101010;
    --signal: #ff6b62;
    --tone-2: #ececea; --tone-2-ink: #101010;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  font-feature-settings: "tnum" 1, "cv11" 1;   /* tabular figures; single-storey a off */
}

/* Hierarchy by size and weight only. Tight tracking at display sizes. */
h1, h2, h3 { font-weight: 600; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.03em; margin: 0.3em 0 0.5em; }
h2 { font-size: 1.15rem; letter-spacing: -0.01em; margin: 2.2rem 0 0.8rem; }

/* Section eyebrow: small tracked caps over a top rule — the Swiss column
   head. Used where a section needs a label rather than a headline. */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

sup { color: var(--muted); font-size: 0.75em; }
.muted { color: var(--muted); font-size: 0.9em; }

img { max-width: 100%; }

/* Screen-reader-only text (labels that the visual design carries otherwise). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}