@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@import "tailwindcss";

@theme {
  --color-primary-blue: #3838C4;
  --color-primary-dark: #2B2BA3;
  --color-link-blue: #4E4ED6;
  --color-page-bg: #F5F6F8;
  --color-surface-white: #FFFFFF;
  --color-table-header: #F9FAFB;
  --color-pagination-bg: #FFFFFF;
  --color-refresh-hover: #F0F0FA;
  --color-refresh-active: #E0E0F5;
  --color-row-hover: #F9FAFB;
  --color-text-primary: #1F2937;
  --color-text-muted: #6B7280;
  --color-header-text: #4B5563;
  --color-channel-name: #4B5563;
  --color-border-main: #E5E7EB;
  --color-border-soft: #F3F4F6;
  --color-item-border: #E5E7EB;
  --color-badge-bg: #F0FDF4;
  --color-badge-text: #166534;
  --color-badge-border: #BBF7D0;
  --color-delayed-bg: #FEF2F2;
  --color-delayed-text: #991B1B;
  --color-delayed-border: #FECACA;
  --color-tags-bg: #FFFBEB;
  --color-tags-text: #92400E;
  --color-tags-border: #FDE68A;
  --color-error-text: #DC2626;
  --color-sla-green: #22C55E;
  --color-sla-grey: #D1D5DB;
  --color-spinner-track: #E0E7FF;
  --color-placeholder-bg: #D1D5DB;
  --color-empty-bg: #F9FAFB;
}

:root {
  --sidebar-width: 240px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--color-page-bg, #f9fafb);
  color: var(--color-text-primary, #111827);
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-border-soft, #f3f4f6);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border-main, #d1d5db);
  border-radius: 3px;
}