:root {
  --color-primary: #3490dc;
  --color-secondary: #6574cd;
  --color-success: #38c172;
  --color-danger: #e3342f;
  --color-warning: #f6993f;
  --color-neutral: #6c757d;

  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-600);
  --color-surface: #ffffff;
  --color-surface-raised: var(--color-gray-100);
  --color-border: var(--color-gray-300);
  --color-background: var(--color-gray-100);

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;

  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  --sidebar-width: 240px;
  --userlist-width: 180px;
  --header-height: 48px;
}