/* validus-landing/site/src/assets/css/tokens.css
   Design tokens — revamp plan §4 "Appetite + Instrumentation".
   Every semantic color ships as a fill/ink pair; inks are AA-verified on --paper. */
:root {
  /* Palette (contrast measured 2026-08-07; see revamp plan §4) */
  --paper: #FAF9F5;      /* page background */
  --tint: #EAF4EF;       /* alternating sections */
  --ink: #142523;        /* body text, 15.1:1 */
  --evergreen: #0B2E26;  /* headlines/nav, 13.9:1 */
  --slate: #4A5D57;      /* supporting copy, 6.7:1 */
  --teal-deep: #0B6B63;  /* primary button fill + link text, 6.1:1 */
  --teal: #0D9488;       /* decorative / large text >=24px only */
  --emerald: #27AE60;    /* fills/chips only — never text */
  --good-ink: #1E7A46;   /* positive text, 5.1:1 */
  --amber: #E5A943;      /* caution fills/icons only — never text */
  --amber-ink: #8A5A00;  /* caution text, 5.6:1 */
  --coral: #D96C5F;      /* concern fills/icons only — never text */
  --coral-ink: #9E3320;  /* concern text, 6.8:1 */
  --grad: linear-gradient(90deg, #2EC4B6, #2ECC71, #27AE60); /* hero + fit meter ONLY */

  /* Type roles (revamp plan §4): Fraunces display-only, Inter body, Plex Mono data-only */
  --font-display: "Fraunces Variable", Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 16px;
  --line: #DDE5DF;
  --shadow: 0 8px 24px rgba(11, 46, 38, 0.08);
  --container: 1200px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
}
h1, h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  color: var(--evergreen);
  line-height: 1.05;
  margin: 0 0 0.4em;
}
h1 { font-size: clamp(38px, 5.5vw, 62px); }
h2 { font-size: clamp(28px, 3.5vw, 40px); }
p { max-width: 65ch; }
a { color: var(--teal-deep); }

/* Data voice: anything from the scoring system is set in mono. */
.mono { font-family: var(--font-data); font-size: 0.82em; letter-spacing: 0.02em; }
.eyebrow {
  font-family: var(--font-data);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; border-radius: 999px;
  font: 600 17px var(--font-body); text-decoration: none;
  cursor: pointer; border: 0;
}
.btn-primary { background: var(--teal-deep); color: #fff; }        /* 6.4:1 — never use --teal here */
.btn-primary:hover { background: var(--evergreen); }
.btn-secondary { background: transparent; color: var(--teal-deep); border: 1.5px solid var(--teal-deep); }

:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: #fff; padding: 8px 16px; z-index: 10; }
.site-footer { max-width: var(--container); margin: 0 auto; padding: 8px 24px 36px; color: var(--slate); font-size: 14px; }

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