/* Zapier-inspired theme variables (see /zapier/DESIGN.md) */

:root{
  --z-black:#201515;
  --z-cream:#fffefb;
  --z-cream-alt:#fffdf9;
  --z-orange:#ff4f00;
  --z-charcoal:#36342e;
  --z-warm-gray:#939084;
  --z-sand:#c5c0b1;
  --z-light-sand:#eceae3;
  --z-mid-warm:#b5b2aa;
  --menu-arrow-fg: var(--z-orange);
  --timeline-pill-fg: var(--z-orange);

  /* Underlines */
  --z-tab-active: rgb(255, 79, 0) 0px -4px 0px 0px inset;
  --z-tab-hover: rgb(197, 192, 177) 0px -4px 0px 0px inset;
}

/* Dark mode base variables (keep existing dark.css behavior, but give tokens) */
html.dark, body.dark{
  --z-black:#000000;
  --z-cream:#000000;
  --z-cream-alt:#111111;
  --z-charcoal:#ebebeb;
  --z-warm-gray:#a8a8a8;
  --z-sand:#515151;
  --z-light-sand:#2f2f2f;
}