/* Fonts ship with the embed (latin subsets, same files Google served) so the
   demo has no outside origin to wait on. Inter and Public Sans are variable;
   Host Grotesk is the single 500 instance the demo uses. */
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/HostGrotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/PublicSans-latin.woff2") format("woff2");
}

/**
 * Brand tokens from the Figma “See the Pipes” screens.
 *
 * Light phone on the agency still (stage.jpg). Iframe is 420×780.
 * Reload /embed/ after saving (hard refresh if the browser cached CSS).
 */
:root {
  color-scheme: light;

  /* Type — Public Sans UI, Host Grotesk labels, Inter marks */
  --font: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Host Grotesk", var(--font);
  --font-mono: "Public Sans", ui-sans-serif, system-ui, sans-serif;

  /* Ink — #2B2A28 and alpha washes from Figma */
  --ink: #2b2a28;
  --ink-65: rgba(43, 42, 40, 0.65);
  --ink-60: rgba(43, 42, 40, 0.6);
  --ink-50: rgba(43, 42, 40, 0.5);
  --ink-12: rgba(43, 42, 40, 0.12);
  --ink-5: rgba(43, 42, 40, 0.05);
  --muted: var(--ink-60);
  --line: #2c342b;
  --line-soft: var(--ink-5);
  --line-dash: var(--ink-12);
  --disabled: rgba(43, 42, 40, 0.38);

  /* Phone surfaces */
  --card: #ffffff;
  --cream: rgba(241, 240, 233, 0.75);
  --surface: #f7f6f2;
  --on-ink: #f7f6f2;
  --payee-ink: #2b2a28;

  /* Actions */
  --lime: #97e162;
  --lime-press: #88d456;
  --lime-deep: #24450d;
  --lime-glow: rgba(179, 231, 141, 0.5);
  --on-lime: #2b2a28;

  /* Accent — ATUM badge */
  --accent: #fe8f20;
  --accent-wash: rgba(254, 143, 32, 0.12);

  /* Stage behind the phone — photo, charcoal fallback */
  --stage: #444444;
  --stage-image: url("stage.jpg");
  --stage-spot: rgba(18, 23, 17, 0.28);
  --forest: #171d15;

  /* Diagram */
  --cyan: #42a9de;
  --link: var(--lime-deep);

  /* Chain dots + map mouths (Base / Solana / Tempo) */
  --chain-base: #42a9de;
  --chain-solana: #9945ff;
  --chain-tempo: #0d9373;
  --p1: var(--chain-base);
  --p2: var(--lime);

  /* Transit map on cream */
  --map-bg: var(--cream);
  --map-decoy: #3a4336;
  --map-stop: #171d15;
  --map-ring: #3a4336;

  /* Shape — Figma phone is square-cornered */
  --radius-phone: 0;

  --pipe-capsule: var(--lime);
}