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

@layer base {
  :root {
    /* Default accent color (green) - overridden by JS */
    --accent-50: #f0fdf4;
    --accent-100: #dcfce7;
    --accent-200: #bbf7d0;
    --accent-300: #86efac;
    --accent-400: #4ade80;
    --accent-500: #22c55e;
    --accent-600: #16a34a;
    --accent-700: #15803d;
    --accent-800: #166534;
    --accent-900: #14532d;
    --accent-950: #052e16;
  }

  body {
    @apply bg-white text-zinc-900 dark:bg-zinc-950 dark:text-zinc-100;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer components {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
  }

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

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

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted-foreground) / 0.3);
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--muted-foreground) / 0.5);
  }
}

/* Code block styling */
pre {
  @apply bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 rounded-lg p-4 overflow-x-auto;
}

code {
  @apply font-mono text-sm;
}

/* Inline code */
:not(pre) > code {
  @apply bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded text-sm;
}
