/* Load Theory design tokens (source of truth: 02-brand/tokens.css). Contrast ratios in comments. */
@font-face { font-family: "Geist"; src: url("../fonts/Geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #141414;          /* on paper 17.1:1 */
  --ink-2: #222222;        /* raised dark surface */
  --paper: #F2F2F0;        /* light surface */
  --white: #FFFFFF;
  --tape: #2E3BFF;         /* Tape Blue: white on tape 6.6:1, tape on paper 5.9:1, tape on white 6.6:1 */
  --tape-hi: #4552FF;      /* hover shade of tape */
  --tape-soft: #8C95FF;    /* tape text on ink 6.4:1 */
  --grey-1: #E0E0DE;       /* hairlines on white, giant ghost type */
  --grey-2: #BBBBBB;       /* muted text on ink 9.6:1 */
  --grey-3: #6B6B6B;       /* muted text on white 5.3:1 */
  --grey-4: #2C2C2C;       /* hairlines on ink */
  --ghost: #DCDCDA;        /* unfilled scroll-fill words (decorative state) */

  --font-display: "Geist", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  --gutter: 1.25rem;
  --header-h: 5.25rem;
  --header-h-scrolled: 2.0625rem;
}
@media (max-width: 767.98px) { :root { --gutter: .75rem; --header-h: 3.5rem; } }