/* Design tokens — the single source of truth. Everything else reads these.
   The system: chroma is reserved for compliance status. Ink on paper for
   everything else. One radius, hairline rules, no shadows. */

@font-face {
  font-family: 'Archivo';
  src: url('/static/vendor/archivo/Archivo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('/static/vendor/public-sans/PublicSans-Var.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/vendor/ibm-plex-mono/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ink + paper */
  --ink-900: #171A16;   /* primary text, primary buttons */
  --ink-700: #3A3E37;   /* headings on light surfaces, hover states */
  --ink-500: #6B6F66;   /* secondary text, captions, placeholders */
  --rule-200: #D6D8D0;  /* every border, every divider — 1px */
  --paper-050: #EFF0EC; /* page background */
  --paper-000: #FFFFFF; /* surfaces, table backgrounds, cards */

  /* status — the only chroma in the system; text and borders only */
  --status-deficient: #A3231C;
  --status-expiring:  #8A5A00;
  --status-compliant: #1F5D3A;

  /* scrim behind modals (ink at low opacity — not a color) */
  --scrim: rgba(23, 26, 22, 0.45);

  /* type */
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Public Sans', sans-serif;
  --font-data: 'IBM Plex Mono', monospace;

  --fs-data: 0.6875rem;  /* table headers, eyebrows, stamps */
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;    /* body */
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;       /* section headings */
  --fs-2xl: 1.75rem;
  --fs-3xl: 2rem;

  --track-display: -0.02em;
  --track-heading: -0.015em;
  --track-data: 0.08em;   /* uppercase mono labels */
  --track-stamp: 0.06em;  /* status stamps */

  /* spacing on a 4px grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;

  /* geometry and surface */
  --radius: 2px;          /* the only radius in the system */
  --radius-full: 0;       /* pills are banned; this exists to catch strays */
  --border: 1px solid var(--rule-200);
  --row-height: 40px;
  --cell-pad-x: 12px;

  /* layout */
  --sidebar-w: 220px;
  --topbar-h: 52px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.5;
  background: var(--paper-050);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--ink-700); }

:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}