/* tokens.css
 * Brand colours, spacing scale and type, in one place.
 *
 * The colours here mirror STANDARD_PALETTE in src/generateWisp.ts. Change both
 * together, or the page and the document it produces will disagree about what
 * colour the brand is.
 *
 * Inter Tight is self-hosted rather than loaded from Google: the assets binding
 * already serves from Cloudflare's edge, so it arrives on the same connection
 * as the page with no third-party DNS or TLS handshake in the render path.
 * One variable file covers every weight.
 */

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand — matches the wordmark and the generated document. */
  --navy: #1f3a5f;
  --blue: #2e75b6;
  --green: #6db33f;
  --tint: #eaf1f8;
  --rule: #c9d6e3;

  /* Neutrals */
  --ink: #10101a;
  --ink-soft: #55606e;
  --ink-faint: #7c8794;
  --page: #f7f9fb;
  --surface: #ffffff;
  --border: #e1e7ef;

  /* Advisory callouts */
  --warn-bg: #fdf6e6;
  --warn-border: #e3b341;
  --warn-ink: #6b4e07;

  /* Spacing — 4 / 8 / 16 / 24 / 32 / 48 */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;

  --radius: 10px;
  --radius-sm: 6px;

  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Every interactive element shows this on keyboard focus. */
  --focus: 0 0 0 3px rgba(46, 117, 182, 0.35);
}