/* Design tokens — Attestkeep.
 *
 * Derived from brand/README.md, not invented here. The brand gives an ink
 * base (#0B2F30), a teal accent (#0F9E8E) with a darker hover (#0B7D71), and
 * light grounds (#FFFFFF, #EFF7F5) with a neutral text (#5F7C78).
 *
 * This site runs on the dark ground, and the ground is neutral on purpose.
 * An earlier version tinted every tier with the brand hue -- base, surface,
 * borders and even the muted text -- which made the whole page one shade of
 * teal and left the accent nothing to stand out against. A brand colour that
 * covers everything stops reading as a brand colour. So the greys here are
 * greys, and #0F9E8E is the only saturated thing on the page: it marks what
 * to click and what a verdict was, and nothing else.
 *
 * Two accents, not one: #0F9E8E is the brand teal and carries fills, buttons
 * and the mark's seal core. Link text needs more separation from a dark
 * ground than it gives, so --accent-2 lifts it. The brand's #0B7D71 hover is
 * a light-ground value and would sink into this ground, so hover moves up
 * rather than down.
 *
 * Allow and deny are the product's whole argument, so they stay distinct
 * from the accent: green is pushed off the teal hue far enough to read as a
 * different signal rather than a shade of the brand.
 *
 * One ground only. There is no light variant to keep in sync, and nothing
 * here is declared inside a media query.
 */

@import url("/fonts/fonts.css");

:root {
  color-scheme: dark;

  --bg:          #11171a;
  --bg-raise:    #182024;
  --surface:     #1f292e;
  --line:        #2b373d;
  --line-2:      #3c4a51;

  --text:        #eceff1;
  --muted:       #9aa6ac;
  --faint:       #6c7a81;

  /* Attestkeep teal */
  --accent:      #0f9e8e;
  --accent-2:    #3fbfaf;
  --accent-soft: #0f9e8e22;
  --accent-bd:   #0f9e8e55;

  --green:       #4cd97b;
  --green-soft:  #4cd97b1f;
  --green-bd:    #4cd97b55;
  --red:         #f2615c;
  --red-soft:    #f2615c1f;
  --red-bd:      #f2615c55;

  --radius:      10px;
  --radius-lg:   16px;
  --shadow:      0 30px 70px -28px #00000099;
  --shadow-sm:   0 10px 30px -18px #00000080;

  --sans: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --disp: Archivo, var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --nav-h: 98px;
}