/* truemanity studio — design tokens (visual-bible.md §2, v1.1)
   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: #F2F3F6;    /* REF-06 71% / REF-04 — mounted board, cool matte rag */
  --paper-card: #F9FAFD;     /* REF-01, 30% — elevated card on a board */
  --paper-tint: #E8EBF3;     /* REF-10, 66% — secondary board surface (palette / material sections) */
  --paper-dark: #0B0A0A;     /* REF-09, 92% — dark monolith board */
  --card-dark: #05090B;      /* REF-12, 10% — deep carbon story card */

  /* — Reds (instruments of measurement, never fill) — */
  --datum-red: #C41622;      /* REF-04 — datum line, cut markers, active nodes */
  --timeline-red: #E9453F;   /* REF-06 — 1px process thread on light boards */
  --horizon-red: #9A041A;    /* REF-11 — full-viewport cut between light and dark worlds */
  --laser-red-dark: #A42C2D; /* REF-09 — datum line across --paper-dark */
  --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: #161717;    /* REF-13 — headlines, body, brackets */
  --ink-secondary: #686C73;  /* choice — mono metadata, counters, leader captions */
  --ink-on-dark: #ECEFF4;    /* REF-11 — white ink on --paper-dark */

  /* — Hairlines — */
  --hairline-light: #D2D6DF; /* choice — 1px apertures and rules on light paper */
  --hairline-dark: #24272C;  /* choice — 1px apertures and ticks on dark paper */
  --mark: rgba(22, 23, 23, 0.34); /* choice — the drafting line: crosses, crop marks, brackets, dimension lines */

  /* — 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;
  }
}