/* Viralhooks pixel brand tokens. Shared by the site, library and office. Change tokens here, not per page. */
@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500;700&family=Inter:wght@400;500;600&display=swap");
:root {
  --vh-bg: #FFFFFF;
  --vh-surface: #F6F7F9;
  --vh-ink: #1B1D24;
  --vh-muted: #5D6270;
  --vh-line: #E3E6EC;
  /* puppy crew colours */
  --vh-brown: #8A4B2A;
  --vh-blue: #5B9BF0;
  --vh-green: #3E9B3A;
  --vh-gold: #F2A72E;
  --vh-accent: #3E9B3A;       /* primary actions */
  --vh-accent-ink: #FFFFFF;
  /* agent status diamonds */
  --vh-working: #2BD47D;
  --vh-waiting: #F2A72E;
  --vh-blocked: #E5484D;
  --vh-idle: #A7ADBA;
  --vh-font-display: "Pixelify Sans", ui-monospace, monospace;
  --vh-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vh-radius: 4px;           /* near-square corners suit pixel art */
  --vh-shadow: 4px 4px 0 var(--vh-ink); /* hard pixel drop shadow for buttons/cards */
}
html { image-rendering: pixelated; }
body { margin: 0; background: var(--vh-bg); color: var(--vh-ink); font-family: var(--vh-font-body); }
.vh-btn { font: 600 15px var(--vh-font-body); background: var(--vh-accent); color: var(--vh-accent-ink); border: 2px solid var(--vh-ink); border-radius: var(--vh-radius); box-shadow: var(--vh-shadow); padding: 10px 18px; cursor: pointer; }
.vh-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--vh-ink); }
.vh-btn:focus-visible { outline: 3px solid var(--vh-blue); outline-offset: 2px; }