/* ============================================================
   Design tokens — the shared vocabulary for the site and the
   OG card templates. Nothing here paints anything; it only
   names values. Anything that selects or lays out belongs in
   styles.css instead.
   ============================================================ */

/* Self-hosted so a render never waits on the network. Lived in
   layout.templ as an inline <style>; it belongs next to --mono. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/jetbrains-mono-latin.83c005d4.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

:root {
  /* ---- surfaces & text (Catppuccin Latte) ---- */
  --bg: #eff1f5; --panel: #e6e9ef; --crust: #dce0e8;
  --fg: #4c4f69; --dim: #6c6f85; --punct: #acb0be; --sel: #ccd0da;

  /* ---- accent palette (the toggle cycles --accent through these) ---- */
  --green: #40a02b;  --sky: #04a5e5;     --sapphire: #209fb5;
  --blue: #1e66f5;   --lavender: #7287fd; --mauve: #8839ef;
  --pink: #ea76cb;   --flamingo: #dd7878; --rosewater: #dc8a78;
  --red: #d20f39;    --peach: #fe640b;    --yellow: #df8e1d;
  --accent: var(--green);

  /* syntax roles reuse palette tokens (no duplicate hexes) */
  --lit: var(--rosewater);  --decl: var(--blue);
  --vdef: var(--lavender);  --type: var(--pink);

  --coffee: #b08968;   /* warm brown for faint coffee-ring stains */

  /* ---- layout tokens ---- */
  --maxw: 660px;       /* reading column width */
  --pad: 24px;         /* horizontal page padding */

  /* ---- type & motion ---- */
  --mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
  --t-release: 0.7s; --t-enter: 0.3s; --t-hover: 0.15s;
}