/* =====================================================================
   Catalogue · design tokens
   Information, filed. Light is "Reading room" (off-white paper and
   manila index cards); dark is "Night stacks". --red is the one accent
   (buttons, links, the card's top rule, the current drawer); --rule-blue
   is the ruled line on an index card; the warning band is plain-pack
   yellow with black text in both modes.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f4f2ec;
  --card: #fffefa;
  --manila: #f2e8cd;                  /* index cards */
  --manila-2: #e8dbb8;                /* the card's tab and edge */
  --well: #e9e6dc;
  --line: #d7d2c4;
  --rule-blue: #a9c0e3;               /* ruled lines on a card */
  --ink: #151515;
  --ink-2: #383733;
  --muted: #5f5d56;
  --red: #b4231b;
  --red-2: #911a14;
  --on-red: #ffffff;
  --red-soft: #f6dedb;
  --warn-bg: #ffd83d;                 /* the warning band, both modes */
  --warn-ink: #111111;
  --steel: #2c2d2f;                   /* the drawer front */
  --steel-2: #3b3c3f;
  --brass: #b58a3c;                   /* the drawer's label holder */
  --focus: #2457b3;
  --shadow-card: 0 1px 0 rgba(21, 21, 21, 0.06), 0 10px 22px -16px rgba(21, 21, 21, 0.4);
  --shadow-lift: 0 2px 0 rgba(21, 21, 21, 0.05), 0 26px 48px -26px rgba(21, 21, 21, 0.5);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Azeret Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(44px, 6.2vw, 92px);
  --fs-h2: clamp(32px, 3.9vw, 56px);
  --fs-h3: 21px;
  --fs-lead: clamp(18px, 1.35vw, 21px);
  --fs-body: 18px;
  --fs-small: 15.5px;
  --fs-label: 11.5px;

  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 3px;
  --r-m: 6px;
  --r-l: 10px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --slide: cubic-bezier(0.5, 0, 0.2, 1);
  --d-fast: 140ms;
  --d: 300ms;
  --d-slow: 650ms;
}

/* ---------- Night stacks ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #121212;
    --card: #1c1b19;
    --manila: #2a2620;
    --manila-2: #3a342a;
    --well: #171614;
    --line: #34322d;
    --rule-blue: #2f3f5c;
    --ink: #f2f0ea;
    --ink-2: #d1cec5;
    --muted: #a19d93;
    --red: #ff7a6e;
    --red-2: #ff9d93;
    --on-red: #2a0503;
    --red-soft: #3a1714;
    --focus: #8fb0ff;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 26px -16px rgba(0, 0, 0, 0.8);
    --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 54px -26px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #121212;
  --card: #1c1b19;
  --manila: #2a2620;
  --manila-2: #3a342a;
  --well: #171614;
  --line: #34322d;
  --rule-blue: #2f3f5c;
  --ink: #f2f0ea;
  --ink-2: #d1cec5;
  --muted: #a19d93;
  --red: #ff7a6e;
  --red-2: #ff9d93;
  --on-red: #2a0503;
  --red-soft: #3a1714;
  --focus: #8fb0ff;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 26px -16px rgba(0, 0, 0, 0.8);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 30px 54px -26px rgba(0, 0, 0, 0.9);
}