@import 'katex/dist/katex.min.css';

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

/* Source.AI clone — Modern dark (ChatGPT/Linear vibe) */

@layer base {
  :root {
    /* Light fallback (app defaults to dark) */
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.625rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 240 5.9% 90%;
    --sidebar-ring: 240 5.9% 10%;
  }

  .dark {
    /* Linear / ChatGPT inspired neutrals */
    --background: 0 0% 4%;            /* #0a0a0a */
    --foreground: 0 0% 98%;
    --card: 0 0% 9%;                  /* #171717 */
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 98%;

    --primary: 234 89% 74%;           /* indigo accent */
    --primary-foreground: 0 0% 100%;
    --primary-glow: 250 95% 76%;

    --secondary: 0 0% 12%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 11%;
    --muted-foreground: 0 0% 63%;

    --accent: 0 0% 14%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;

    --success: 142 71% 45%;
    --warning: 38 92% 50%;

    --border: 0 0% 14%;
    --input: 0 0% 14%;
    --ring: 234 89% 74%;

    --sidebar-background: 0 0% 6%;
    --sidebar-foreground: 0 0% 80%;
    --sidebar-primary: 234 89% 74%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 11%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 12%;
    --sidebar-ring: 234 89% 74%;

    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
    --shadow-glow: 0 0 40px -10px hsl(var(--primary) / 0.4);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html, body, #root {
    @apply h-full;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "cv11", "ss01";
    font-family: ui-sans-serif, system-ui, -apple-system, "Inter", sans-serif;
  }
  /* Scrollbar */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 8px; }
  ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.4); }
}

@layer utilities {
  .prose-invert-tight h2 { @apply text-xl font-semibold mt-6 mb-3; }
  .prose-invert-tight h3 { @apply text-lg font-semibold mt-5 mb-2; }
  .prose-invert-tight p  { @apply leading-7 my-3 text-foreground/90; }
  .prose-invert-tight ul { @apply list-disc pl-6 my-3 space-y-1; }
  .prose-invert-tight ol { @apply list-decimal pl-6 my-3 space-y-1; }
  .prose-invert-tight code { @apply px-1.5 py-0.5 rounded bg-muted text-foreground/90 text-sm; }
  .prose-invert-tight pre { @apply bg-muted rounded-lg p-4 overflow-x-auto my-4; }
  .prose-invert-tight pre code { @apply bg-transparent p-0; }
  .prose-invert-tight table { @apply w-full my-4 border-collapse; }
  .prose-invert-tight th, .prose-invert-tight td { @apply border border-border px-3 py-2 text-left; }
  .prose-invert-tight th { @apply bg-muted font-semibold; }
  .prose-invert-tight strong { @apply text-foreground font-semibold; }
  .prose-invert-tight a { @apply text-primary underline underline-offset-2; }
  .prose-invert-tight blockquote { @apply border-l-2 border-primary/50 pl-4 italic text-muted-foreground my-4; }

  @keyframes scanline {
    from { transform: translateY(-100%); }
    to { transform: translateY(1000%); }
  }
  .animate-scanline {
    animation: scanline 4s linear infinite;
  }
}