@import "tailwindcss";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.animate-marquee {
  animation: marquee 8s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

@theme {
  --font-sans: "Inter", "Geist Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  --color-bg-primary: var(--bg-primary);
  --color-bg-secondary: var(--bg-secondary);
  --color-bg-tertiary: var(--bg-tertiary);
  --color-bg-hover: var(--bg-hover);
  --color-bg-active: var(--bg-active);
  
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-muted: var(--accent-muted);
  
  --color-border: var(--border);
  --color-border-hover: var(--border-hover);
  
  --color-success: #23A55A;
  --color-warning: #F0B232;
  --color-error: #F23F43;
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

:root {
  --bg-primary: #F2F3F5;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #EBEDF0;
  --bg-hover: #E3E5E8;
  --bg-active: #D4D7DC;
  
  --text-primary: #060607;
  --text-secondary: #4E5058;
  --text-muted: #80848E;
  
  --accent: #5865F2;
  --accent-hover: #4752C4;
  --accent-muted: #D8DFFD;
  
  --border: #D4D7DC;
  --border-hover: #A3A6AB;
  
  --sidebar-bg: #F2F3F5;
  --channel-list-bg: #FFFFFF;
}

.dark {
  --bg-primary: #313338;
  --bg-secondary: #2B2D31;
  --bg-tertiary: #1E1F22;
  --bg-hover: #3F4147;
  --bg-active: #484B51;
  
  --text-primary: #F2F3F5;
  --text-secondary: #B5BAC1;
  --text-muted: #949BA4;
  
  --accent: #5865F2;
  --accent-hover: #4752C4;
  --accent-muted: #39427E;
  
  --border: #3F4147;
  --border-hover: #5D5F66;
  
  --sidebar-bg: #1E1F22;
  --channel-list-bg: #2B2D31;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.2s, color 0.2s;
}

* {
  box-sizing: border-box;
}

.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}
