/* AgentFlow — Color tokens
   Warm cream canvas, warm near-black ink, single orange voltage.
   Timeline pastels are scoped to in-product agent visualizations only. */
:root {
  /* Brand & Accent */
  --color-primary: #f54e00;          /* Orange — primary CTAs, wordmark. Scarce. */
  --color-primary-active: #d04200;   /* press state */

  /* Surface */
  --color-canvas: #f7f7f4;           /* warm cream page floor */
  --color-canvas-soft: #fafaf7;      /* IDE-pane background inside mockups */
  --color-surface-card: #ffffff;     /* pure white card surface */
  --color-surface-strong: #e6e5e0;   /* badges, tag pills */

  /* Hairlines */
  --color-hairline: #e6e5e0;         /* 1px divider */
  --color-hairline-soft: #efeee8;    /* lighter divider */
  --color-hairline-strong: #cfcdc4;  /* stronger panel outline */

  /* Text */
  --color-ink: #26251e;              /* display, body emphasis — warm near-black */
  --color-body: #5a5852;             /* default running text */
  --color-body-strong: #26251e;
  --color-muted: #807d72;            /* sub-titles */
  --color-muted-soft: #a09c92;       /* disabled text */
  --color-on-primary: #ffffff;       /* white text on orange */

  /* Timeline — AI-action signature (in-product only) */
  --color-timeline-thinking: #dfa88f; /* peach */
  --color-timeline-grep: #9fc9a2;     /* mint */
  --color-timeline-read: #9fbbe0;     /* pastel blue */
  --color-timeline-edit: #c0a8dd;     /* lavender */
  --color-timeline-done: #c08532;     /* warm gold */

  /* Semantic */
  --color-success: #1f8a65;
  --color-error: #cf2d56;
}