/* UMA design tokens — "Instrument of Record".
   A certification body sells attestation: the judgement that a management
   system conforms. Its artifacts are seals, registers and permanent records,
   so the interface is built as an instrument rather than a dashboard —
   institutional ground, brass for anything sealed, and type that treats a
   register heading as a masthead.
   Single source of truth: every colour and size in the app comes from here. */
@font-face { font-family: 'Sora'; src: url('/fonts/sora.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url('/fonts/plexmono.woff2') format('woff2');
  font-weight: 500; font-display: swap; }

:root {
  /* Ground and paper */
  --paper: #F4F6F8;
  --surface: #FFFFFF;
  --sunken: #EDF1F4;

  /* Ink */
  --ink: #10202B;
  --ink-soft: #566875;
  --ink-faint: #8797A3;

  /* The institution. authority-deep is the rail and every masthead rule —
     it is what makes the product read as an instrument rather than an app. */
  --authority: #0E4F6E;
  --authority-deep: #072A38;
  --authority-mid: #14657F;
  --authority-soft: #E3EEF4;
  --rail-ink: #C4D9E3;
  --rail-line: rgba(255, 255, 255, 0.09);

  /* Brass. Reserved for one thing: something that has been sealed — a
     certificate number, an approved version, the rule under a masthead.
     If it appears anywhere else it has been overused. */
  --seal: #B08327;
  --seal-soft: #F4EAD4;

  /* Signals. Institutional rather than traffic-light. */
  --ok: #2E7D5B;
  --ok-soft: #E4F1EB;
  --amber: #B07D2B;
  --amber-soft: #F8EFDE;
  --warn: #A63D2F;
  --warn-soft: #F8E7E4;

  --line: #DFE5EA;
  --line-strong: #C6D0D8;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-data: 'Plex Mono', ui-monospace, monospace;

  /* A scale with a real top end. The masthead is the only place --fs-display
     appears, once per screen. */
  --fs-display: 32px;
  --fs-title: 22px;
  --fs-h2: 16px;
  --fs-h3: 14px;
  --fs-body: 14px;
  --fs-small: 12.5px;
  --fs-eyebrow: 10.5px;

  --radius: 10px;
  --radius-chip: 5px;
  --gutter: 28px;
  --sidebar-w: 236px;
  --topbar-h: 52px;
  --shadow-raise: 0 1px 2px rgba(16, 32, 43, 0.04), 0 8px 24px -12px rgba(16, 32, 43, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-title); font-weight: 650; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 10px; }
a { color: var(--authority); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--authority-mid); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The eyebrow: mono, spaced, quiet. Names the register you are looking at. */
.eyebrow {
  font-family: var(--font-data); font-size: var(--fs-eyebrow); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint);
}

/* Record chips. Mono identifiers with a status edge — a record, not a badge. */
.chip {
  font-family: var(--font-data); font-size: var(--fs-small); font-weight: 500;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: var(--radius-chip);
  padding: 2px 8px; display: inline-block; white-space: nowrap;
  color: var(--ink-soft);
}
.chip.ok    { border-left-color: var(--ok);    background: var(--ok-soft);    color: #1F5C41; }
.chip.warn  { border-left-color: var(--warn);  background: var(--warn-soft);  color: #7E2C21; }
.chip.amber { border-left-color: var(--amber); background: var(--amber-soft); color: #7E591C; }
.chip.seal  { border-left-color: var(--seal);  background: var(--seal-soft);  color: #6F5115; }
.chip.seal::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--seal); margin-right: 6px;
  vertical-align: 1px;
}

/* Status pills: dot + sentence-case label, for prose rather than tables. */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small);
  color: var(--ink-soft); }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-faint); flex: none; }
.pill.ok::before   { background: var(--ok); }
.pill.warn::before { background: var(--warn); }
.pill.auth::before { background: var(--authority); }