:root {
  /* Primary Colors */
  --primary-color: #0058cc;
  --accent-color: #f6f8fe;

  /* Gradient Colors */
  --gradient-start: #00b0ef;
  --gradient-end: #0058cc;
  --gradient-bg: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));

  /* Derived Colors */
  --primary-light: #00b0ef;
  --primary-dark: #004499;

  /* UI Colors */
  --background: #ffffff;
  --sidebar-bg: #fafbfc;
  --border-color: #e5e7eb;
  /* Updated primary and secondary text colors to standardized values */
  --text-primary: #616a76;
  --text-secondary: #717985;
  --text-muted: #9ca3af;
  /* Updated accent hover color from #d0e0ff to #F5F8FF */
  --accent-color-2: #f5f8ff;

  /* Interactive States */
  --hover-bg: #f3f4f6;
  --active-bg: var(--accent-color);
  --button-hover: var(--primary-light);

  /* Additional Theme Colors */
  --input-bg: #f9fafb;
  --card-bg: #ffffff;
  --notification-color: #ef4444;
  --avatar-bg: #fb923c;
  --link-color: #0058cc;
  --link-hover: #004499;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --tool-button-bg: #ffffff;
  --tool-button-border: #e5e7eb;
  --separator-color: #d1d5db;

  /* Chat Button Colors */
  --chat-primary: #3b82f6;
  --chat-primary-hover: #2563eb;
  --chat-secondary: #6b7280;
  --chat-secondary-hover: #4b5563;
  --chat-input-bg: #f9fafb;
  --chat-input-border: #e5e7eb;
  --chat-input-text: #374151;
  --chat-input-placeholder: #9ca3af;
  --chat-tab-active: #3b82f6;
  --chat-tab-inactive: #9ca3af;
  --chat-icon-bg: #dbeafe;
  --chat-icon-color: #3b82f6;
  --chat-hover-bg: #f3f4f6;

  /* Added missing sidebar component colors */
  --stroke: var(--border-color);
  --accent-blue: var(--accent-color-2);
  --brand-primary: var(--primary-color);
}

/* Added Tailwind utility classes for sidebar component colors */
.bg-accent-blue {
  background-color: var(--accent-blue);
}

.border-stroke {
  border-color: var(--stroke);
}

.bg-stroke {
  background-color: var(--stroke);
}

.text-text-primary {
  color: var(--text-primary);
}

.text-text-secondary {
  color: var(--text-secondary);
}

.text-brand-primary {
  color: var(--brand-primary);
}

.bg-brand-gradient {
  background: var(--gradient-bg);
}

.hover\:bg-accent-blue:hover {
  background-color: var(--accent-blue);
}

/* Added text gradient classes that work with bg-clip-text */
.text-brand-gradient {
  background: linear-gradient(135deg, #00b0ef, #0058cc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bg-gradient-brand {
  background: linear-gradient(135deg, #00b0ef, #0058cc);
}