/* Design tokens, fonts, reset and type. Colour lives only in badges, rails and icons. */

@font-face {
  font-family: "DM Sans";
  src: url("/assets/dm-sans-latin-wght-normal-fe3ac7ee.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/inter-latin-wght-normal-1f021a24.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #F4F6F3;
  --surface: #FFFFFF;
  --surface-2: #FAFBF9;
  --ink: #1B2520;
  --ink-2: #3D4A44;
  --muted: #66746D;
  --faint: #8B968F;
  --line: #E3E8E2;
  --line-2: #EDF0EC;

  --brand: #1F6B50;
  --brand-ink: #154A38;
  --brand-soft: #E7F1EC;
  --brand-softer: #F1F7F4;

  --critical: #BE3A2C; --critical-bg: #FBEDEA; --critical-line: #F0CFC9;
  --high: #B25309;     --high-bg: #FCF0E3;     --high-line: #F0D6B8;
  --upcoming: #2D5FAE; --upcoming-bg: #EAF1FA; --upcoming-line: #CCDCF1;
  --ok: #1E7B53;       --ok-bg: #E8F4EE;       --ok-line: #C6E2D4;
  --neutral: #66746D;  --neutral-bg: #EFF2EF;  --neutral-line: #DDE2DD;

  --radius: 14px;
  --shadow: 0 1px 2px rgb(18 28 23 / 5%), 0 1px 1px rgb(18 28 23 / 3%);
  --shadow-lg: 0 12px 32px rgb(18 28 23 / 14%), 0 2px 6px rgb(18 28 23 / 6%);
  --font-display: "DM Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: var(--ink); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
::placeholder { color: var(--faint); }
svg { flex-shrink: 0; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }

.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.subtitle { color: var(--muted); font-size: 14px; margin-top: 4px; }
.small { font-size: 12.5px; color: var(--muted); }
.tiny { font-size: 11.5px; color: var(--faint); }
.strong { font-weight: 600; color: var(--ink); }
.nowrap { white-space: nowrap; }
.numeric { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}