/* ==========================================================================
   SoftVerx paper foundations.

   Two print modes share these tokens and express them differently.

     data-print="persuasion"   handbook, cards, one-pagers, flyers.
                               The brand speaks: brackets, annotation labels,
                               deliberate accent, fig.xx captions, hatching.

     data-print="instrument"   NDA, MSA, SOW, SLA, DPA, MOU, proposals.
                               The brand recedes to a wordmark and one
                               hairline. A counterparty should register
                               competence and nothing else.

   Screen tokens do not survive contact with a press. Sizes here are in pt,
   the grid is a real baseline, and every hierarchy step is legible after a
   photocopy — the three ink values are 100 / 62 / 40 percent, which stay
   distinct through a fax.
   ========================================================================== */

:root {
  /* --- Ink ---------------------------------------------------------------
     Screen token          → ink            CMYK (coated)        Photocopy
     --sx-ink              → --ink-rich     60/40/40/100         solid
     --text-strong         → --ink-full     0/0/0/100            solid
     --text-body           → --ink-mid      0/0/0/62             mid grey
     --text-quiet          → --ink-quiet    0/0/0/40             light grey
     --border-strong       → --ink-rule     0/0/0/26             visible hair
     --border-default      → --ink-hair     0/0/0/14             may drop out
     --sx-canvas/--bg-page → stock white, never printed
     --sx-accent (#4b7fff) → --print-accent 88/68/0/0 · Pantone 2727 C
     --sx-signal           → --print-signal 12/82/100/3 · Pantone 1665 C
     --sx-field            → --print-field  88/22/78/6 · Pantone 341 C
     --sx-amber            → --print-amber  20/48/100/6 · Pantone 1245 C   */
  --ink-full: #000000;
  --ink-rich: #111111;      /* rich black — flats over 20mm only            */
  --ink-mid: #616161;
  --ink-quiet: #999999;
  --ink-rule: #bdbdbd;
  --ink-hair: #dcdcdc;
  --stock: #ffffff;
  --stock-tint: #f2f3f5;    /* 5% ink — the only permitted flat in Mode B   */

  --print-accent: #2c5ce0;
  --print-signal: #b8431a;
  --print-field: #10784f;
  --print-amber: #9a6600;

  /* --- Paper type scale, Mode A (pt) -------------------------------------
     Rebuilt, not converted. The screen ladder has eight steps above body;
     paper holds four before the page loses its centre. */
  --pp-display: 34pt; /* @kind font */
  --pp-display-lh: 34pt; /* @kind other */
  --pp-h1: 21pt; /* @kind font */
  --pp-h1-lh: 24pt; /* @kind other */
  --pp-h2: 14pt; /* @kind font */
  --pp-h2-lh: 18pt; /* @kind other */
  --pp-h3: 11pt; /* @kind font */
  --pp-h3-lh: 13pt; /* @kind other */
  --pp-quote: 19pt; /* @kind font */
  --pp-quote-lh: 23pt; /* @kind other */
  --pp-body: 10pt; /* @kind font */
  --pp-body-lh: 13pt; /* @kind other */
  --pp-small: 8.5pt; /* @kind font */
  --pp-small-lh: 11pt; /* @kind other */
  --pp-caption: 7.5pt; /* @kind font */
  --pp-caption-lh: 10pt; /* @kind other */
  /* mono floor: below 7pt the colon grammar stops reading */
  --pp-eyebrow: 7pt; /* @kind font */

  /* --- Paper type scale, Mode B (pt) -------------------------------------
     One title, two heading weights, one body, one note. Nothing else. */
  --pi-title: 14pt; /* @kind font */
  --pi-title-lh: 17pt; /* @kind other */
  --pi-h1: 11.5pt; /* @kind font */
  --pi-h1-lh: 14pt; /* @kind other */
  --pi-h2: 10.5pt; /* @kind font */
  --pi-h2-lh: 14pt; /* @kind other */
  --pi-body: 10.5pt; /* @kind font */
  --pi-body-lh: 14pt; /* @kind other */
  --pi-small: 9pt; /* @kind font */
  --pi-small-lh: 12pt; /* @kind other */
  --pi-note: 8pt; /* @kind font */
  --pi-note-lh: 10pt; /* @kind other */
  --pi-min: 7pt; /* @kind font */

  /* --- Baseline grid ----------------------------------------------------- */
  --grid-a: 13pt; /* @kind spacing */
  --grid-b: 14pt; /* @kind spacing */

  /* --- Margins. Mode A, A4 (210×297mm) — asymmetric, wide outer edge
     carries annotation labels and fig captions. ------------------------- */
  --a4-w: 595.28pt; /* @kind spacing */
  --a4-h: 841.89pt; /* @kind spacing */
  --us-w: 612pt; /* @kind spacing */
  --us-h: 792pt; /* @kind spacing */

  --ma-a4-top: 52pt; /* @kind spacing */
  --ma-a4-inner: 62pt; /* @kind spacing */
  --ma-a4-outer: 128pt; /* @kind spacing */
  --ma-a4-bottom: 62.89pt; /* @kind spacing */
  --ma-us-top: 52pt; /* @kind spacing */
  --ma-us-inner: 62pt; /* @kind spacing */
  --ma-us-outer: 132pt; /* @kind spacing */
  --ma-us-bottom: 61pt; /* @kind spacing */

  /* --- Margins. Mode B — generous, right margin wide enough to annotate
     a clause by hand in the meeting. Measure lands at 68–75 characters
     of Source Serif 4 at 10.5pt. ---------------------------------------- */
  --mb-a4-top: 62pt; /* @kind spacing */
  --mb-a4-left: 71pt; /* @kind spacing */
  --mb-a4-right: 145pt; /* @kind spacing */
  --mb-a4-bottom: 65.89pt; /* @kind spacing */
  --mb-a4-measure: 379.28pt; /* @kind spacing */
  --mb-us-top: 62pt; /* @kind spacing */
  --mb-us-left: 72pt; /* @kind spacing */
  --mb-us-right: 158pt; /* @kind spacing */
  --mb-us-bottom: 58pt; /* @kind spacing */
  --mb-us-measure: 382pt; /* @kind spacing */

  /* --- Clause numbering. One gutter for all three levels, so 1, 1.1 and
     1.1.a hang from the same three rails. --------------------------------- */
  --cl-gutter: 38pt; /* @kind spacing */
  --cl-step: 38pt; /* @kind spacing */

  /* --- The device on paper ----------------------------------------------- */
  --brk-weight: 1pt; /* @kind spacing */
  --brk-len: 8mm; /* @kind spacing */

  /* --- Bleed and safety -------------------------------------------------- */
  --bleed: 3mm; /* @kind spacing */
  --safe: 5mm; /* @kind spacing */
  --trim-mark: 5mm; /* @kind spacing */

  /* Controls on an accent field need a ring that is not the accent. */
  --focus-ring-inverse: #ffffff;
}

/* ==========================================================================
   Mode A — persuasion print. Paper base, ink hierarchy, accent deliberate.
   Dark panels are permitted as accents; they are opt-in per element, never
   the sheet.
   ========================================================================== */
[data-print="persuasion"] {
  --bg-page: var(--stock);
  --bg-well: var(--stock-tint);
  --surface-card: var(--stock);
  --surface-raised: var(--stock-tint);
  --surface-overlay: var(--stock);
  --border-default: var(--ink-hair);
  --border-strong: var(--ink-rule);
  --text-strong: var(--ink-full);
  --text-body: var(--ink-mid);
  --text-quiet: var(--ink-quiet);
  --text-accent: var(--print-accent);
  --sx-grid: var(--ink-hair);
  --sx-axis: var(--ink-rule);
  --sx-grain-opacity: 0; /* @kind other */
  /* grain does not print */
  --sx-signal: var(--print-signal);
  --sx-field: var(--print-field);
  --sx-amber: var(--print-amber);
}

/* ==========================================================================
   Mode B — instrument print. The accent survives in exactly one place: the
   hairline under the running header, and optionally clause numbers. Every
   other accent alias collapses to ink so a stray component cannot colour
   itself into a marketing document.
   ========================================================================== */
[data-print="instrument"] {
  --bg-page: var(--stock);
  --bg-well: var(--stock);
  --surface-card: var(--stock);
  --surface-raised: var(--stock);
  --surface-overlay: var(--stock);
  --border-default: var(--ink-hair);
  --border-strong: var(--ink-rule);
  --text-strong: var(--ink-full);
  --text-body: var(--ink-full);      /* body is ink, not grey — it is read  */
  --text-quiet: var(--ink-mid);
  --text-accent: var(--ink-full);
  --rule-accent: var(--print-accent); /* the one permitted accent           */
  --sx-accent: var(--ink-full);
  --sx-accent-soft: transparent;
  --sx-accent-line: var(--ink-rule);
  --sx-grain-opacity: 0; /* @kind other */
  --sx-signal: var(--ink-full);
  --sx-field: var(--ink-full);
  --sx-amber: var(--ink-full);
}

/* --- Sheets ---------------------------------------------------------------- */
.px-sheet {
  background: var(--stock);
  color: var(--ink-full);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.px-sheet[data-paper="a4"] { width: var(--a4-w); height: var(--a4-h); }
.px-sheet[data-paper="letter"] { width: var(--us-w); height: var(--us-h); }
.px-sheet[data-print="instrument"][data-paper="a4"] {
  padding: var(--mb-a4-top) var(--mb-a4-right) var(--mb-a4-bottom) var(--mb-a4-left);
}
.px-sheet[data-print="instrument"][data-paper="letter"] {
  padding: var(--mb-us-top) var(--mb-us-right) var(--mb-us-bottom) var(--mb-us-left);
}
.px-sheet[data-print="persuasion"][data-paper="a4"] {
  padding: var(--ma-a4-top) var(--ma-a4-outer) var(--ma-a4-bottom) var(--ma-a4-inner);
}
.px-sheet[data-print="persuasion"][data-paper="letter"] {
  padding: var(--ma-us-top) var(--ma-us-outer) var(--ma-us-bottom) var(--ma-us-inner);
}
/* Verso mirrors the asymmetry so the wide edge stays on the outside. */
.px-sheet[data-page="verso"][data-print="persuasion"][data-paper="a4"] {
  padding-left: var(--ma-a4-outer);
  padding-right: var(--ma-a4-inner);
}
.px-sheet[data-page="verso"][data-print="persuasion"][data-paper="letter"] {
  padding-left: var(--ma-us-outer);
  padding-right: var(--ma-us-inner);
}

/* --- Mode B document type ------------------------------------------------- */
.px-doc {
  font-family: var(--font-doc);
  font-size: var(--pi-body);
  line-height: var(--pi-body-lh);
  color: var(--ink-full);
  font-variation-settings: "opsz" 10;
  hyphens: manual;
  text-wrap: pretty;
}
.px-doc p { margin: 0 0 var(--pi-body-lh) 0; }
.px-runhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24pt;
  font-family: var(--font-body);
  font-size: var(--pi-note);
  line-height: var(--pi-note-lh);
  letter-spacing: 0.04em;
  color: var(--ink-mid);
  padding-bottom: 5pt;
  border-bottom: 0.75pt solid var(--rule-accent, var(--ink-full));
}
.px-runfoot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24pt;
  font-family: var(--font-body);
  font-size: var(--pi-note);
  line-height: var(--pi-note-lh);
  letter-spacing: 0.04em;
  color: var(--ink-mid);
  padding-top: 5pt;
  border-top: 0.5pt solid var(--ink-rule);
}

/* --- Clause numbering. Three levels, one set of rails. -------------------- */
.px-cl {
  display: grid;
  grid-template-columns: var(--cl-gutter) 1fr;
  column-gap: 0;
  margin: 0 0 var(--pi-body-lh) 0;
}
.px-cl > .px-n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.px-cl[data-level="2"] { margin-left: var(--cl-step); }
.px-cl[data-level="3"] { margin-left: calc(var(--cl-step) * 2); }
.px-cl[data-level="1"] > .px-n,
.px-cl[data-level="1"] > .px-t > .px-hd {
  font-family: var(--font-body);
  font-size: var(--pi-h1);
  line-height: var(--pi-h1-lh);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.px-cl > .px-t > .px-hd { display: block; font-weight: 600; }
.px-cl > .px-t > p:last-child { margin-bottom: 0; }

/* --- Defined terms. The convention is systematic: every term defined in the
   agreement is set in letterspaced caps at 0.88em, and appears that way at
   every later use. Substitute the licensed OpenType small caps at press
   (font-variant: small-caps) — the faux form below is the web stand-in. --- */
.px-term {
  font-size: 0.88em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 550;
  white-space: nowrap;
}

/* --- Signature blocks ---------------------------------------------------- */
.px-sigs { display: grid; gap: 28pt; break-inside: avoid; }
.px-sigs[data-parties="2"] { grid-template-columns: 1fr 1fr; }
.px-sigs[data-parties="3"] { grid-template-columns: 1fr 1fr 1fr; gap: 20pt; }
.px-sig { font-family: var(--font-body); font-size: var(--pi-small); line-height: var(--pi-small-lh); }
.px-sig .px-entity { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 8pt; color: var(--ink-full); }
.px-sig .px-rule { border-bottom: 0.75pt solid var(--ink-full); height: 30pt; }
.px-sig .px-lab { color: var(--ink-mid); font-size: 7.5pt; letter-spacing: 0.04em; padding-top: 3pt; }

/* --- The detection box in ink on white. Corner brackets only: no frame line,
   because a full hairline box reads as a table cell on paper. The label chip
   knocks out of the top-left bracket with 1.5mm clearance. ---------------- */
.px-brk { position: relative; }
.px-brk > .px-c {
  position: absolute;
  width: var(--brk-len);
  height: var(--brk-len);
  border: 0 solid var(--ink-full);
  pointer-events: none;
}
.px-brk > .px-c[data-c="tl"] { top: 0; left: 0; border-top-width: var(--brk-weight); border-left-width: var(--brk-weight); }
.px-brk > .px-c[data-c="tr"] { top: 0; right: 0; border-top-width: var(--brk-weight); border-right-width: var(--brk-weight); }
.px-brk > .px-c[data-c="bl"] { bottom: 0; left: 0; border-bottom-width: var(--brk-weight); border-left-width: var(--brk-weight); }
.px-brk > .px-c[data-c="br"] { bottom: 0; right: 0; border-bottom-width: var(--brk-weight); border-right-width: var(--brk-weight); }
.px-brk > .px-chip {
  position: absolute;
  top: calc(var(--brk-weight) / -2);
  left: calc(var(--brk-len) + 1.5mm);
  transform: translateY(-50%);
  background: var(--stock);
  padding: 0 1.5mm;
  font-family: var(--font-mono);
  font-size: var(--pp-eyebrow);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  color: var(--ink-full);
  white-space: nowrap;
}

/* --- Hatching. Tonal fills go muddy in one-colour print and identical after
   a photocopy; hatch angle carries the series instead. ------------------- */
.px-hatch { background-color: var(--stock); }
.px-hatch[data-h="1"] { background-image: repeating-linear-gradient(45deg, var(--ink-full) 0 0.6pt, transparent 0.6pt 3.4pt); }
.px-hatch[data-h="2"] { background-image: repeating-linear-gradient(-45deg, var(--ink-full) 0 0.6pt, transparent 0.6pt 3.4pt); }
.px-hatch[data-h="3"] { background-image: repeating-linear-gradient(90deg, var(--ink-full) 0 0.6pt, transparent 0.6pt 4pt); }
.px-hatch[data-h="4"] { background-image: repeating-linear-gradient(0deg, var(--ink-full) 0 0.6pt, transparent 0.6pt 4pt); }
.px-hatch[data-h="solid"] { background-color: var(--ink-full); background-image: none; }
.px-hatch[data-h="tint"] { background-color: var(--stock-tint); background-image: none; }

/* --- fig.xx caption ------------------------------------------------------- */
.px-fig {
  font-family: var(--font-mono);
  font-size: var(--pp-caption);
  line-height: var(--pp-caption-lh);
  color: var(--ink-mid);
}
.px-fig b { color: var(--ink-full); font-weight: 500; }