/* Import external stylesheets */
@import 'katex/dist/katex.min.css';
@import './styles/tokens.css';
@import './styles/typography.css';
@import './styles/components.css';
@import './styles/animations.css';

@import "tailwindcss";

@layer base {
  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    height: 100%;
    overflow: hidden;
  }

  body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--color-bg);
    color: var(--color-ink);
    transition: background-color var(--duration-normal) var(--easing), color var(--duration-normal) var(--easing);
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--color-ink);
  }

  /* Selection styles */
  ::selection {
    background: var(--color-primary);
    color: var(--color-primary-ink);
  }
}

@layer components {
  /* Custom prose styles for Markdown content */
  .prose {
    color: var(--color-ink);
    line-height: 1.7;
    max-width: none;
  }

  .prose code {
    color: var(--color-ink);
    background: var(--color-elev);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-border);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.875em;
  }

  .prose pre {
    background: var(--color-elev);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    overflow-x: auto;
  }

  .prose pre code {
    background: transparent;
    border: none;
    padding: 0;
  }

  .prose blockquote {
    border-left: 3px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-ink);
  }

  .prose a {
    color: var(--color-primary);
    text-decoration-color: var(--color-primary);
  }

  .prose a:hover {
    color: color-mix(in srgb, var(--color-primary) 80%, var(--color-ink) 20%);
  }

  .prose table {
    border-collapse: collapse;
  }

  .prose th,
  .prose td {
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
  }

  .prose th {
    background: var(--color-elev);
    font-weight: 600;
  }

  .prose tr:nth-child(even) {
    background: color-mix(in srgb, var(--color-elev) 30%, transparent);
  }

  /* Scrollbar styles */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }

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

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

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 3px;
  }

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

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

@layer utilities {
  /* Focus ring utilities */
  .focus-ring {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  /* Animation utilities */
  .animate-fade-in {
    animation: fadeIn var(--duration-normal) var(--easing);
  }

  .animate-scale-in {
    animation: scaleIn var(--duration-fast) var(--easing);
  }
}
