/* tokens.css: design tokens and fonts, shared by every page (home and sub pages).
   layer 1 of 5: tokens > base > objects > components > utilities (utilities.css, loaded last).
   the superset of what the home page needs; a sub page that never reads a token (eg --sky)
   just carries an unused custom property. page-specific overrides (the 760px --gutter)
   stay with the page that makes them. */

/* gilroy, served from our own assets (the stylesheet hot-links a dead host) */
@font-face { font-family: "Gilroy-ExtraBold"; src: url("/assets/fonts/GilroyExtraBold/font.woff2") format("woff2"), url("/assets/fonts/GilroyExtraBold/font.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Gilroy-Light"; src: url("/assets/fonts/GilroyLight/font.woff2") format("woff2"), url("/assets/fonts/GilroyLight/font.woff") format("woff"); font-display: swap; }

/* holon: paper for the argument, k's slate for k. newsreader speaks the display lines, inter carries the reading. one curve for every motion */
:root {
  --paper: #F3F3F1;
  --ink: #191918;
  --quiet: #6F6E69;   /* 4.6:1 on paper (was #86857F, 3.3:1, failed AA) */
  --quiet-heavy: #9E9D98; /* quiet, lifted for heavy display type so it reads as light as --quiet does in thin text */
  --slate: #212936;   /* k core ring */
  --teal: #2fa39b;    /* k's dot */
  --sky: #7cc6e0;     /* light blue: the human, on dark */
  --sky-ink: #3f9ccc; /* light blue: the human, on paper */
  --deep: #2b4f7e;    /* dark blue: the machine */
  --dbbg: #112e50;    /* the design system's dark blue (.dbbg in style.css): the holon stage */
  --night: #171d27;   /* fin de siècle and the holon slate: a shade deeper than --slate */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --face: var(--sans);
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --gutter: max(28px, 18vw);
}