/* Pay with Pump: the direction (see DESIGN.md). A pale mint ground, ink text, white cards.
   Pump green is the brand (the hero field, the logo tile, the pill). Ink is the action. */
:root {
  color-scheme: light;

  --bg: #eefaf2;
  --bg-2: #dff5e7;
  --surface: #ffffff;
  --surface-2: #f6fcf8;

  --line: rgba(15, 31, 24, 0.1);
  --line-2: rgba(15, 31, 24, 0.22);

  --ink: #0f1f18;
  --ink-2: #3c5247;
  --muted: #66796f;

  /* the action is ink: one dark pill per screen */
  --accent: #0f1f18;
  --on-accent: #ffffff;

  /* pump green, and a deeper cut that is readable as text on the pale ground */
  --brand: #7fe3a4;
  --brand-soft: #c9f2d8;
  --brand-deep: #0b7a43;

  /* money, and states */
  --money: #0f8a54;
  --good: #0f8a54;
  --bad: #c92f45;
  --warn: #8a5a00;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-text: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.04em;

  --r-sm: 12px;
  --r: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;
  --border: 1px solid var(--line);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 44px -30px rgba(16, 90, 50, 0.4);
  --shadow-card: 0 30px 60px -28px rgba(12, 80, 44, 0.55), 0 2px 0 rgba(255, 255, 255, 0.9) inset;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t: 280ms;

  --wrap: 1160px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 68px;
}