/* crewai.work — product tokens (framework-agnostic) */
:root {
  --ink: #0B1220;
  --ink-2: #151E31;
  --cyan: #4CD9E8;        /* product primary — on dark */
  --cyan-ink: #0E9AAC;    /* on white: text & logo */
  --cyan-press: #35C6D6;
  --green: #11B886;       /* AI, success */
  --green-ink: #0B9B70;
  --pink: #E8447A;        /* accent, error */
  --yellow: #F5C445;      /* accent, awaiting human approval */
  --surface: #F3F4F6;
  --surface-2: #F9FAFB;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --text: #374151;
  --muted: #6B7280;
  --on-ink: #8A93A5;

  --font-sans: 'Inter', 'Noto Sans KR', sans-serif;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.05);

  --ease: cubic-bezier(.4,0,.2,1);
  --dur-hover: 150ms;
  --dur-state: 200ms;
  --dur-overlay: 300ms;
}

/* status mapping */
.status-running { color: var(--cyan-ink); }
.status-done    { color: var(--green-ink); }
.status-waiting { color: #B08400; }
.status-failed  { color: var(--pink); }