/* Zapier color tokens — warm-cream neutrals, coffee ink, single orange accent. */
:root {
  /* ── Base palette ── */
  --color-primary: #ff4f00;        /* Zapier orange — the only chromatic accent */
  --color-primary-hover: #e64700;  /* pressed/hover darken of primary */
  --color-on-primary: #fffefb;     /* warm white on orange/ink fills */

  --color-ink: #201515;            /* deep coffee — headings, primary text, dark surfaces */
  --color-ink-soft: #2f2a26;       /* near-black with brown warmth */
  --color-ink-mid: #36342e;        /* mid-emphasis text */
  --color-body: #605d52;           /* default body text */
  --color-body-mid: #939084;       /* secondary body / metadata */
  --color-mute: #c5c0b1;           /* lowest-priority text, hairlines on cream */

  --color-canvas: #fffefb;         /* warm off-white page background */
  --color-canvas-soft: #f8f4f0;    /* cream-tinted card / inset surface */

  /* ── Semantic aliases ── */
  --surface-page: var(--color-canvas);
  --surface-card: var(--color-canvas-soft);
  --surface-dark: var(--color-ink);

  --text-heading: var(--color-ink);
  --text-body: var(--color-body);
  --text-secondary: var(--color-body-mid);
  --text-faint: var(--color-mute);
  --text-on-dark: var(--color-on-primary);

  --border-strong: var(--color-ink);      /* 1px hairline — pricing cards, outline buttons, inputs */
  --border-soft: var(--color-mute);       /* row dividers, table borders */

  --cta-bg: var(--color-primary);
  --cta-bg-hover: var(--color-primary-hover);
  --cta-text: var(--color-on-primary);
}