/* ==========================================================================
   Design tokens

   Register: clinical, not technical. The reference points are a pharmacy
   dispensary and a printed certificate, not a developer tool. That means a
   refined grotesque doing nearly all the work, monospace reserved strictly
   for measured values, generous white space and hairline rules.
   ========================================================================== */

:root {
  /* Ink and ground */
  --ink:        #12161a;
  --ink-soft:   #4d545c;
  --ink-faint:  #838b93;
  --ground:     #ffffff;
  --mist:       #f7f9fa;
  --mist-deep:  #eef1f4;

  /* Accent. Muted slate blue. Used for action and emphasis only. */
  --accent:      #1f5f8b;
  --accent-deep: #16496b;
  --accent-wash: #eaf1f6;

  /* Signal colours. State only, never decoration. */
  --ok:    #1a7f37;
  --warn:  #8a6100;
  --stop:  #b32d2e;

  /* Lines */
  --line:       #e4e8eb;
  --line-firm:  #ccd3d8;

  /* Type.
     One family for the whole site. Instrument Sans has the neutrality of a
     Swiss grotesque with slightly open apertures, which keeps compound names
     legible at small sizes without looking like interface type.

     There is deliberately no monospace token. Measured values are set in the
     same family using tabular figures, so numbers still align in a column
     without the page reading as a terminal. */
  --font-body:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-body);

  /* Scale. Tighter ratio than before, so headings feel composed rather than
     shouted, and long compound names do not wrap awkwardly. */
  --step--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.76rem);
  --step--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.89rem);
  --step-0:  clamp(0.97rem, 0.94rem + 0.13vw, 1.04rem);
  --step-1:  clamp(1.14rem, 1.07rem + 0.32vw, 1.32rem);
  --step-2:  clamp(1.38rem, 1.24rem + 0.62vw, 1.72rem);
  --step-3:  clamp(1.70rem, 1.44rem + 1.10vw, 2.34rem);
  --step-4:  clamp(2.10rem, 1.65rem + 1.95vw, 3.20rem);
  --step-5:  clamp(2.50rem, 1.85rem + 2.80vw, 4.00rem);

  --leading-tight: 1.08;
  --leading-snug:  1.28;
  --leading-body:  1.62;

  /* Tracking. Display sizes tighten, small caps labels open up. */
  --track-display: -0.028em;
  --track-tight:   -0.015em;
  --track-label:   0.09em;

  /* Space scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;

  /* Structure */
  --container: 1280px;
  --measure:   66ch;
  --radius:    12px;
  --radius-sm: 8px;

  /* Elevation. Shallow. The page should read as printed, not floating. */
  --shadow-1: 0 1px 2px rgba(18, 22, 26, 0.04);
  --shadow-2: 0 12px 40px rgba(18, 22, 26, 0.09);

  --header-h: 76px;
  --ease: cubic-bezier(0.22, 0.68, 0.28, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ease: linear; }
}

/* ==========================================================================
   Standing rule: no left-only accent bar on a boxed panel

   A coloured bar down the left edge of a filled or bordered box is the browser
   default for a blockquote and the convention for an alert. On a panel it makes
   ordinary content read as a warning, and several on one page looks like the
   site is shouting in four places.

   NOT allowed, on a panel, callout, notice or card:
     background + border-left accent      use the tint alone
     quoted text with a left bar          use a tinted panel
     current nav state with a left bar    use background tint plus weight

   Allowed, as a marker in a row or column of equal items:
     a 2px accent border-left on each item in a horizontal band, where it is
     acting as a divider between equals rather than as emphasis on one box.
     The trust bar and buy bar use this.

   Always allowed, structural:
     table column dividers, the edge of a fixed panel against the page.

   The test: is the bar separating equals, or is it drawing attention to one
   box? The first is structure. The second is an alert, and that is the one to
   avoid.
   ========================================================================== */