/* Permit Gopher design tokens: values from web/design/tokens.md ("Rust & Steel"). Define once, use everywhere. */

@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.ba4513495282.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.e1180918b873.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("../fonts/barlow-condensed-latin-800-normal.b1b7dd5dbcea.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.77bc02670657.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.f7016cd446d2.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.196e3cbc5fee.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2"); }

:root {
  --pg-white: #FFFFFF;
  --pg-sand: #F4F2EE;
  --pg-line: #D9D5CE;
  --pg-ink: #161616;
  --pg-ink-2: #4A4A4A;
  --pg-muted: #5B5B5B;
  --pg-rust: #B5400F;
  --pg-rust-dark: #9A340B;
  --pg-safety: #E85D04;
  --pg-steel: #1E3A5F;
  --pg-link: #1F4E8C;
  --pg-ok: #16703F;    --pg-ok-bg: #E3F3EA;
  --pg-warn: #8A4B00;  --pg-warn-bg: #FBEEDC;
  --pg-bad: #B42318;   --pg-bad-bg: #FBE4E1;
  --pg-closed: #4A4A4A; --pg-closed-bg: #F4F2EE;

  --pg-font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --pg-font-body: "IBM Plex Sans", Arial, sans-serif;
  --pg-font-mono: "IBM Plex Mono", Consolas, monospace;

  --pg-radius: 4px;
  --pg-radius-chip: 3px;
  --pg-gutter: 16px;
  --pg-max: 1360px;
}
@media (min-width: 768px) { :root { --pg-gutter: 32px; } }
@media (min-width: 1100px) { :root { --pg-gutter: 64px; } }