/* truemanity studio — design tokens (visual-bible.md §2, v1.1)
   THE PRINT (the director, 2026-11-11: "replace this in the design kit globally"): the stock is printed paper, not a
   screen. Paper B, neutral white; ink a dark warm grey; reds as pigment; a printed black for the dark stock. Each
   changed line names its old value. The paper, the ink filter and the camera are in paper.css and print.js.
   Measured values are pixel medians of REF-01…REF-13; values marked "choice" are design decisions.
   HARM-03's dark-world palette is Case 01 content (see --case01-*), never studio UI colour. */

@font-face { font-family: "Inter"; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* — Wall (the gallery room) — */
  --wall-ambient: #E3E6ED;   /* REF-02, 56% — outer gallery wall */
  --wall-lit: #EBEDF2;       /* REF-03, 55% — wall inside the window light shaft (REF-12) */
  --wall-shadow: #C8CDD6;    /* choice — shadowed wall outside the shaft */
  --wall-dark: #16191D;      /* REF-11, 22% — slate wall below the horizon cut */

  /* — Paper (every screen inside the screen) — */
  --paper-board: #F5F4F2;    /* REF-06 71% / REF-04 — mounted board, cool matte rag · print 2026-11-11: neutral white, paper B, was #F2F3F6 */
  --paper-card: #FAF9F8;     /* REF-01, 30% — elevated card on a board · print 2026-11-11: neutral white, paper B, was #F9FAFD */
  --paper-tint: #ECEBE8;     /* REF-10, 66% — secondary board surface (palette / material sections) · print 2026-11-11: neutral white, paper B, was #E8EBF3 */
  --paper-dark: #151412;     /* REF-09, 92% — dark monolith board · print 2026-11-11: a printed black, was #0B0A0A */
  --card-dark: #100F0E;      /* REF-12, 10% — deep carbon story card · print 2026-11-11: a printed black, was #05090B */

  /* — Reds (instruments of measurement, never fill) — */
  --datum-red: #A81B21;      /* REF-04 — datum line, cut markers, active nodes · print 2026-11-11: pigment, was #C41622 */
  --timeline-red: #BC352F;   /* REF-06 — 1px process thread on light boards · print 2026-11-11: pigment, was #E9453F */
  --horizon-red: #9A041A;    /* REF-11 — full-viewport cut between light and dark worlds */
  --laser-red-dark: #9A2A2B; /* REF-09 — datum line across --paper-dark · print 2026-11-11: pigment, was #A42C2D */
  --ink-red-dark: #913425;   /* REF-12 / REF-13 — terracotta body type on --card-dark */
  --swatch-crimson: #9A2D28; /* REF-02 / REF-03 — physical material swatch */

  /* — Ink — */
  --ink-primary: #2A2826;    /* REF-13 — headlines, body, brackets · print 2026-11-11: offset black on rag, was #161717 */
  --ink-secondary: #5E5A55;  /* choice — mono metadata, counters, leader captions · print 2026-11-11: offset grey on rag, was #686C73 */
  --ink-on-dark: #E6E2DB;    /* REF-11 — white ink on --paper-dark · print 2026-11-11: warm white ink, was #ECEFF4 */

  /* — Hairlines — */
  --hairline-light: #D5D4D1; /* choice — 1px apertures and rules on light paper · print 2026-11-11: neutral, was #D2D6DF */
  --hairline-dark: #24272C;  /* choice — 1px apertures and ticks on dark paper */
  --mark: rgba(34, 33, 35, 0.40); /* choice — the drafting line: crosses, crop marks, brackets, dimension lines · print 2026-11-11, was rgba(22, 23, 23, 0.34) */

  /* — Case 01 content swatches (HARM-03, the dark world's measured sheet) — content only — */
  --case01-black: #0B0B0C;
  --case01-note-white: #F2EFE9;
  --case01-note-grey: #B0AB99;
  --case01-bow-wood: #D4A15C;
  --case01-oxblood: #700412;
  --case01-blood-red: #B51212;

  /* — Type families (chosen by the director, 2026-10-23: Inter · JetBrains Mono · Newsreader;
       the uppercase label style — wordmark and section labels — in Instrument Sans) — */
  --font-sans: "Inter", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-label: "Instrument Sans", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-serif: "Newsreader", "Cormorant Garamond", Georgia, serif;

  /* — Type scale (desktop) — */
  /* type-display: one style, for the hero statement only (the director, 2026-10-23) */
  --type-display-size: 48px;   --type-display-weight: 500; --type-display-tracking: -0.03em; --type-display-leading: 1.06;
  --type-title-size: 26px;     --type-title-weight: 500; --type-title-tracking: -0.02em;  --type-title-leading: 1.20;
  --type-card-serif-size: 21px; --type-card-serif-weight: 400; --type-card-serif-tracking: -0.01em; --type-card-serif-leading: 1.25;
  --type-body-size: 15.5px;    --type-body-weight: 400;  --type-body-tracking: -0.005em; --type-body-leading: 1.45;
  --type-card-body-size: 13px; --type-card-body-weight: 400; --type-card-body-tracking: 0em; --type-card-body-leading: 1.42;
  --type-label-size: 11px;     --type-label-weight: 600; --type-label-tracking: 0.10em;  --type-label-leading: 1.20;
  --type-mono-size: 11px;      --type-mono-weight: 400;  --type-mono-tracking: 0.04em;   --type-mono-leading: 1.35;

  /* — Spacing — */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* — The room and the board — */
  --wall-margin-x: clamp(32px, 4vw, 64px);
  --board-gap: 48px;
  --board-max: 1640px;
  --board-pad-x: 5.5%;
  --board-pad-y: 56px;
  --gutter: 16px;
  --gutter-strip: 12px;

  /* — Shadows (the paper rule's mounts) — */
  --shadow-board-light: inset 1px 1px 0 rgba(255,255,255,0.92), inset -1px -1px 0 rgba(22,23,23,0.10), 3px 6px 6px -1px rgba(22,25,29,0.22), 16px 28px 42px -4px rgba(40,46,56,0.12);
  --shadow-board-dark: inset 1px 1px 0 rgba(255,255,255,0.14), inset -1px 0 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.90), 2px 5px 8px rgba(0,0,0,0.70), 10px 28px 44px rgba(0,0,0,0.50);
  --shadow-card: inset 1px 1px 0 rgba(255,255,255,0.95), inset -1px -1px 0 rgba(22,23,23,0.08), 2px 4px 5px -1px rgba(22,25,29,0.18), 8px 16px 26px -4px rgba(40,46,56,0.11);
  --shadow-card-dark: inset 1px 1px 0 rgba(255,255,255,0.08), inset -1px -1px 0 rgba(0,0,0,0.90), 2px 5px 6px -1px rgba(10,12,16,0.42), 10px 20px 30px -4px rgba(15,18,24,0.22);

  /* — Film, radii, motion — */
  --aspect-film: 2.39 / 1;
  --radius: 0px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-hover: 160ms;
  --dur-enter: 400ms;
}

@media (max-width: 720px) {
  :root {
    --type-display-size: 32px;
    --type-title-size: 20px;
    --type-card-serif-size: 18px;
    --type-body-size: 15px;
    --type-card-body-size: 12.5px;
    --type-label-size: 10px;
    --type-mono-size: 10px;
    --wall-margin-x: 12px;
    --board-gap: 24px;
    --board-pad-x: 20px;
  }
}