/* Design tokens. Oct 31 v2: editorial direction (black-and-white photography,
   color blocks, heavy type), structure inspired by large federal IT integrators. */
@font-face { font-family: "Public Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/public-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-weight: 900; font-style: normal; font-display: swap; src: url("/assets/fonts/public-sans-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* Neutrals */
  --ink: #1C2533;          /* text and dark bands */
  --ink-2: #4B5563;        /* secondary text */
  --paper: #FFFFFF;
  --mist: #F1F3F5;         /* quiet bands */
  --rule: #D9DEE3;         /* hairlines */
  --on-ink: #FFFFFF;
  --on-ink-2: #C9D1DA;     /* secondary text on ink */

  /* Brand: teal for actions and color blocks, amber for small marker bars only */
  --teal: #0E6E62;
  --teal-hover: #0A5249;
  --teal-bright: #2FB5A3;  /* decorative blocks on photos */
  --teal-light: #5FD3BF;   /* actions on dark bands */
  --amber: #E89A1C;        /* decorative marker bars, never text */

  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 150ms;

  --max: 1240px;
  --gutter: var(--space-6);
  --section-y: var(--space-10);
}

@media (max-width: 720px) {
  :root { --section-y: var(--space-8); --gutter: var(--space-4); }
}