/* The design system for this tool: palette, type and form.

   The subject is print production, and the thing this tool does is compare two sets of figures
   that are supposed to coincide. In a print shop, two plates that should coincide and do not are
   OUT OF REGISTER, and misregistration is the one visual signal every person in that trade reads
   instantly. So the whole system is built on it:

     PRINTSMITH is the cyan plate. XERO is the magenta plate.
     Agreement is register. Disagreement is misregistration.

   That is why the palette is two process inks rather than a brand colour and a neutral, and why
   magenta appears nowhere except where the two systems disagree. A quiet page means nothing needs
   doing, and that is legible from across a desk.

   No webfont. A staff browser should not announce itself to a third party to render an internal
   tool, and a stylesheet that needs the public internet does not render on a laptop with no
   connection - which is exactly when somebody is trying to answer a customer. The system stacks
   below are chosen, not defaulted: the monospace one carries every figure on every screen, because
   money that does not align in a column cannot be compared at a glance. */

:root {
  /* --- the two plates --------------------------------------------------
     Process cyan and process magenta, deepened from their press values so both clear 4.5:1 on
     paper. Each is declared twice: the first is a complete light theme for a browser without
     light-dark(), which discards the second as invalid rather than losing the colour. */
  --plate-psv: #0a6b88;
  --plate-psv: light-dark(#0a6b88, #58c6e8);

  --plate-xero: #a4005c;
  --plate-xero: light-dark(#a4005c, #ff86bd);

  /* The wash behind a plate's own column. A tint, never a fill: these sit under figures. */
  --plate-psv-wash: rgba(10, 107, 136, 0.07);
  --plate-psv-wash: light-dark(rgba(10, 107, 136, 0.07), rgba(88, 198, 232, 0.12));

  --plate-xero-wash: rgba(164, 0, 92, 0.07);
  --plate-xero-wash: light-dark(rgba(164, 0, 92, 0.07), rgba(255, 134, 189, 0.12));

  /* --- in register -----------------------------------------------------
     The one other hue, and it earns its place: it marks the rows where the two systems agree, so
     a reader scanning a column of marks sees agreement as a texture and a break in it as the
     thing to look at. */
  --registered: #2c6a4a;
  --registered: light-dark(#2c6a4a, #6fd39f);

  /* --- ink and ground --------------------------------------------------
     Uncoated stock rather than white: a screen of figures on pure white glares, and proofing
     paper is what this content lives on in the physical world. */
  --ground: #eceae4;
  --ground: light-dark(#eceae4, #14161a);

  --paper: #f8f7f4;
  --paper: light-dark(#f8f7f4, #1c1f25);

  --paper-sunk: #e6e4dd;
  --paper-sunk: light-dark(#e6e4dd, #101215);

  --ink: #16171b;
  --ink: light-dark(#16171b, #f2f3f5);

  --ink-dim: #565961;
  --ink-dim: light-dark(#565961, rgba(242, 243, 245, 0.66));

  --ink-faint: #85878d;
  --ink-faint: light-dark(#85878d, rgba(242, 243, 245, 0.44));

  --rule: rgba(22, 23, 27, 0.14);
  --rule: light-dark(rgba(22, 23, 27, 0.14), rgba(242, 243, 245, 0.16));

  --rule-soft: rgba(22, 23, 27, 0.07);
  --rule-soft: light-dark(rgba(22, 23, 27, 0.07), rgba(242, 243, 245, 0.08));

  /* --- type ------------------------------------------------------------
     Two roles from system stacks. The sans carries prose - the remedy on every verdict is a
     paragraph somebody has to read and act on. The mono carries every figure, invoice number,
     account code and status, so that two columns of money line up character for character. */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo,
    Consolas, monospace;

  /* A tight scale. This screen has one headline and a lot of small, dense, precise text, so the
     steps between the small sizes matter more than the size of the big one. */
  --t-hero: 1.75rem;
  --t-title: 1.125rem;
  --t-body: 0.9375rem;
  --t-figure: 1rem;
  --t-label: 0.6875rem;
  --t-fine: 0.8125rem;

  /* Labels are the structural device here, and they are set as press marks: small, upper case,
     widely tracked. They name what a panel holds rather than decorating it. */
  --label-tracking: 0.12em;

  /* --- form ------------------------------------------------------------
     Almost no radius. A proof sheet is cut square, and rounding every corner is the fastest way
     to make a tool look like every other tool. The one exception is the control a person clicks. */
  --radius: 2px;
  --radius-control: 4px;

  --gap-hair: 0.25rem;
  --gap-tight: 0.5rem;
  --gap: 1rem;
  --gap-wide: 1.5rem;
  --gap-section: 2.5rem;

  /* The offset a misregistered pair is pushed by. Large enough to read as deliberate from a
     metre away, small enough that both figures stay on their own baseline grid. */
  --misregister: 0.28rem;

  --measure: 62ch;
  --page: 78rem;
}