/* ==========================================================================
   Global design tokens — brand colors, type and layout metrics.
   Loaded on every page via layout.html so every stylesheet (including
   per-page CSS like blog/style.css) can read the same variables.
   ========================================================================== */

:root{
  --b1:#000000;
  --b2: #050505;
  --b3:#171717;
  --b4:#2f2f2f;
  --muted:#adadad;
  --white:#ffffff;
  --white-dim:#d1d1d1; /* softly dimmed white for long-form body text */
  --yellow1: #ffdd00;
  --yellow2: #d6c313;
  --yellow3: #9c8530;
  --green:#009060;
  --font-ui: "Manrope", system-ui, Segoe UI, Roboto, Inter, Arial, sans-serif;
  --font-display: "Gelasio", Georgia, "Times New Roman", serif;
  --header-height: 72px;

  /* Background grid drawn behind every page (see layout.html). The line is
     kept near the threshold of visibility — on a near-black canvas a hairline
     reads much stronger than the same alpha would on white, so this sits well
     below what a light-themed site would use. */
  --grid-size: 28px;
  --grid-line: rgba(255,255,255,0.025);
}