/* ZRx theme for the shared app pages (launch / markets / market). */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@900&family=DM+Mono:wght@400;500&family=Host+Grotesk:wght@300..800&display=swap");

:root {
  --pad-bg: #f9f4eb;
  --pad-surface: #efece5;
  --pad-ink: #0a0a0a;
  --pad-ink-dim: #686560;
  --pad-rule: rgba(10, 10, 10, 0.25);
  --pad-accent: #b1c1ef;
  --pad-accent-ink: #0a0a0a;
  --pad-accent-text: #3b4f9a;
  --pad-good: #2f7d4f;
  --pad-bad: #c2413b;
  --pad-font: "Host Grotesk", system-ui, sans-serif;
  --pad-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --pad-mono: "DM Mono", ui-monospace, Consolas, monospace;
  --pad-radius: 8px;
  --pad-max-width: 1200px;

  /* the site's own tokens, so the header/footer chrome renders natively */
  --base-100: #f9f4eb;
  --base-200: #efece5;
  --base-300: #0a0a0a;
  --base-secondary-dark: #686560;
  --base-secondary-fade: rgba(249, 244, 235, 0.15);
  --accent-1: #b1c1ef;
  --accent-2: #f2acac;
  --accent-3: #ffdd94;
}

/* native look: the site's type on the app pages, room for the floating menu */
.pad-body main.pad { padding-top: 6.5rem; }
/* no text-transform here: the core e2e reads headings with innerText, which reflects it */
.pad-body .pad h1, .pad-body .pad h2, .pad-body .pad h3 { font-weight: 900; letter-spacing: -0.01em; line-height: 0.95; }
.pad-body .pad h1 { text-wrap: balance; font-size: clamp(3rem, 8vw, 7rem); max-width: 17ch; }
.pad-body .pad h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
.pad .pad-eyebrow, .pad .pad-step-n, .pad label { font-family: var(--pad-mono); }