/* tokens.css — the design system, one source.
 *
 * Palette is sampled from IDB's own mark and carried over from the board deck
 * (deliverables/idb-book-report-2026-09/theme.typ:10-18). Do not add a literal
 * colour anywhere in app.css — every colour is a token or a color-mix() of tokens.
 *
 * THE RULE, carried from the deck: crimson means "look here", never "bad".
 * Declines are grey. There is no green/red convention, because a red that means
 * the brand cannot also mean negative.
 */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-500.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-700.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  /* ---- ink ---- */
  --ink:        #111318;
  --ink-soft:   #5B6068;
  --ink-mute:   #8A8D93;

  /* ---- structure ---- */
  --line:       #E6E8EB;
  --field:      #C9CDD2;
  --panel:      #F7F8F9;
  --bg:         #FFFFFF;

  /* ---- subject ----
   * The brand is black and white. There is no accent hue: emphasis comes from
   * a solid black fill against grey, and from weight. "Look here" is black;
   * everything de-emphasised is grey. Nothing on this dashboard is ever
   * coloured to mean good or bad. */
  --accent:     #111318;
  --accent-hi:  #4A4E55;
  --accent-lo:  #000000;

  /* ---- type ---- */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-micro: 11px;
  --fs-label: 12px;
  --fs-small: 13px;
  --fs-body:  15px;
  --fs-lead:  18px;
  --fs-h3:    22px;
  --fs-h2:    30px;
  --fs-h1:    42px;
  --fs-num:   40px;
  --fs-hero:  60px;

  /* ---- rhythm ---- */
  --gap:      24px;
  --gap-sm:   12px;
  --gap-lg:   40px;
  --radius:   10px;
  --radius-sm: 6px;
  --pad-card: 26px;

  /* ---- elevation: the deck has no blur, so neither do we ---- */
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
            0 6px 18px color-mix(in srgb, var(--ink) 4%, transparent);

  --maxw: 1360px;
}