@import "tailwindcss";

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius: var(--radius);
}

@layer base {
  :root {
    /* Light Mode (from Reference) */
    --background: #F3F4F6;
    --foreground: #111827;
    --card: #FFFFFF;
    --card-foreground: #111827;
    --popover: #FFFFFF;
    --popover-foreground: #111827;
    --primary: #FFD700;
    --primary-foreground: #111827;
    --secondary: #E5E7EB;
    --secondary-foreground: #111827;
    --muted: #E5E7EB;
    --muted-foreground: #6B7280;
    --accent: #FFD700;
    --accent-foreground: #111827;
    --destructive: #EF4444;
    --destructive-foreground: #FEF2F2;
    --border: #E5E7EB;
    --input: #E5E7EB;
    --ring: #FFD700;
    --radius: 0.5rem;
  }

  .dark {
    /* Dark Mode (from Reference) */
    --background: #1F2937;
    --foreground: #F9FAFB;
    --card: #374151;
    --card-foreground: #F9FAFB;
    --popover: #374151;
    --popover-foreground: #F9FAFB;
    --primary: #FFD700;
    --primary-foreground: #111827;
    --secondary: #4B5563;
    --secondary-foreground: #F9FAFB;
    --muted: #4B5563;
    --muted-foreground: #9CA3AF;
    --accent: #FFD700;
    --accent-foreground: #111827;
    --destructive: #EF4444;
    --destructive-foreground: #FEF2F2;
    --border: #4B5563;
    --input: #4B5563;
    --ring: #FFD700;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

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

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

::-webkit-scrollbar-thumb {
  background: #374151;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4B5563;
}