/* ==========================================================================
   The token layer. One root, one file, consumed by every application in
   this repository. Every value of the approved design standard (WO-26) is
   a custom property here and nowhere else: no screen and no other
   stylesheet names a colour, a size or a length of its own.

   The names are distinct from those of foundation.css on purpose: the
   inventory application loads both files while its console is still on
   the earlier foundation, and no name may mean two things in one page.
   When the console has moved to the standard, foundation.css goes and
   only these remain.

   docs/interface.md, "The standard", says what each token is for.
   ========================================================================== */
:root {
  /* Colour. Six base values and one signal. Nothing else exists. */
  --paper: #FAF9F7;      /* the page: slightly warm, not white, not cream */
  --ink: #1A1A18;        /* body text, and every interactive element */
  --steel: #6B6B66;      /* secondary text and labels: warm-neutral */
  --hairline: #DDDBD6;   /* rules and borders */
  --shelf: #EFEDE8;      /* header fills, hover fills, disabled surfaces: the only fill tone */
  --signal: #C8322A;     /* in the inventory application a missing tool, and nothing else; never in the identity service */

  /* Type. One family; a second for machine identifiers read character by character. */
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --type-display: 6rem;        /* 96: the wordmark on the gate's brand panel, weight 600 */
  --type-display-phone: 3rem;  /* 48: the same wordmark on a phone */
  --type-headline: 2rem;       /* 32: a screen's lead statement under the strip, the name on a record, weight 600 */
  --type-title: 1.5625rem;     /* 25: the page title on a page with no rail, weight 600 */
  --type-heading: 1.25rem;     /* 20: a section heading, weight 600 */
  --type-body: 1rem;           /* 16: body, weight 400, leading 1.5 */
  --type-secondary: 0.875rem;  /* 14: secondary text and labels at weight 500 in steel; dense text at 400 */
  --type-caption: 0.8125rem;   /* 13: a caption, weight 400, steel */
  --leading-body: 1.5;
  --leading-heading: 1.2;
  --regular: 400;
  --medium: 500;
  --semibold: 600;

  /* Space. A 4-pixel base with an 8-pixel rhythm; these seven values and no other. */
  --sp-4: 0.25rem;
  --sp-8: 0.5rem;
  --sp-12: 0.75rem;
  --sp-16: 1rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-48: 3rem;

  /* Rules, shape, focus, reach. */
  --rule-1: 1px;                                 /* a hairline rule or border */
  --rule-2: 2px;                                 /* the focus ring, the current mark, a refused field's border */
  --radius: 2px;                                 /* every element that takes a radius; nothing is pill-shaped */
  --ring: var(--rule-2) solid var(--ink);        /* the focus ring, always visible on keyboard focus */
  --ring-offset: 2px;
  --tap: 2.75rem;                                /* 44: the smallest dimension of anything a person taps */

  /* Layout. */
  --measure-text: 40rem;    /* a paragraph's width */
  --measure-form: 26rem;    /* a field group's width */
  --rail: 15.5rem;          /* the rail on a desktop */
  --gate-panel: 58%;        /* the gate's brand panel: its share of a desktop's width */
  --bar: 3.5rem;            /* the bar at the bottom of a phone */
}