@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-bg: #111110;
    --color-surface: #161615;
    --color-surface-2: #1c1c1a;
    --color-surface-offset: #222220;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-text: #e8e6e0;
    --color-text-muted: #878580;
    --color-text-faint: #4a4845;
    --color-primary: #4f98a3;
    --color-pick: #4f9e5c;
    --color-reject: #c25a5a;
    --color-star: #d4a340;
  }

  body {
    @apply bg-bg text-text;
    font-family: 'Geist', system-ui, sans-serif;
  }
}

/* Custom scrollbar styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-surface;
}

::-webkit-scrollbar-thumb {
  @apply bg-surface-offset rounded;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-text-faint;
}