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

@import "tailwindcss";

@theme {
  --color-primary-blue: #4F5BD5;
  --color-primary-dark: #2F3DB9;
  --color-link-blue: #5B72D7;
  --color-page-bg: #F5F6F8;
  --color-surface-white: #FFFFFF;
  --color-table-header: #F4F5F7;
  --color-pagination-bg: #F8F9FB;
  --color-refresh-hover: #F4F6FF;
  --color-refresh-active: #E9EDFF;
  --color-row-hover: #EEF0F8;
  --color-text-primary: #3F434C;
  --color-text-muted: #8B9098;
  --color-header-text: #4B4F57;
  --color-channel-name: #61656D;
  --color-border-main: #E2E5EA;
  --color-border-soft: #ECEFF3;
  --color-item-border: #ECEEF2;
  --color-badge-bg: #F0FAEF;
  --color-badge-text: #5FA05A;
  --color-badge-border: #9FCF9B;
  --color-delayed-bg: #FFF1F0;
  --color-delayed-text: #D94F4F;
  --color-delayed-border: #F5A5A5;
  --color-tags-bg: #FFF8F3;
  --color-tags-text: #E58D4F;
  --color-tags-border: #F2B17F;
  --color-error-text: #C62828;
  --color-sla-green: #4CAF50;
  --color-sla-grey: #BDBDBD;
  --color-spinner-track: #D8DEFE;
  --color-placeholder-bg: #E0E0E0;
  --color-empty-bg: #FAFAFA;
}

: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;
}