@import url("marketing-fonts.css?v=1");

/* ============================================================
   NIVK — Public marketing pages: type + text colour.

   Linked ONLY by the public pages (index, about, api, blog, careers,
   contact, help, pricing, privacy, terms, 404). Never by /app, /admin or
   report.html, which share styles.css and must keep the product's own
   design system: the cool-grey ink ramp they were designed in. That
   separation is the whole point of this file existing instead of the values
   being edited into tokens/*.css.
   /app/login.html is the one deliberate half-exception (owner, 2026-09-13):
   it links marketing-fonts.css for the type and nothing else from here, so
   it keeps the app's ink ramp and green accent.

   The brief (2026-09-08): make data.nivk.com's public face read exactly like
   nivk.com's homepage.

   COLOUR — nivk.com's homepage, verified live in the browser:
     headings   #1a1a1a          (HeroSection/ComparisonSection: text-[#1a1a1a])
     body copy  #5c5c5c          (text-[#5c5c5c]; the hero's text-[#1a1a1a]/70
                                  resolves to the same grey over white)
   Both are PURE neutral there (R=G=B). This site's greys were blue-tinted
   (#101012, #2C2C31, #6C6C76, #73737C all had B > R), which is the main
   reason the two sites did not look related. The two tiers nivk.com defines
   take its literal values; the other two keep their own lightness and move
   onto the same neutral axis, so the four-step hierarchy survives and so
   does the AA contrast the ramp was tuned for.
   Contrast on white: 16.9 / 12.6 / 7.0 / 4.7 — all pass WCAG AA.

   FONT — the OS system stack nivk.com actually renders, which now lives in
   tokens/marketing-fonts.css (imported above) because /app/login.html needs
   the same two vars without this file's colours. The full explanation of why
   the system stack and not the Inter nivk.com downloads is in that file.

   ============================================================ */

:root {
  /* --font-sans / --font-display: see marketing-fonts.css, imported above. */
  --text-strong: #1a1a1a;   /* nivk.com heading colour, verbatim */
  --text-body:   #2c2c2c;   /* was #2C2C31 — neutralised */
  --text-muted:  #5c5c5c;   /* nivk.com body/lead colour, verbatim */
  --text-faint:  #737373;   /* was #73737C — neutralised, still AA (4.7:1) */

  /* The marketing components colour their headings with --ink-900 directly
     rather than through --text-strong, so it has to move with them or the
     two would disagree by a visible hair on the biggest type on the page.
     It also backs the black buttons and --border-focus: #101012 → #1a1a1a
     is a 5% lightness shift on a near-black, and white on it is still
     15.9:1. Only the marketing pages see this; the app keeps #101012. */
  --ink-900: #1a1a1a;
}