/* Import highlight.js themes */
@import 'highlight.js/styles/github.css';
@import 'highlight.js/styles/github-dark.css' (prefers-color-scheme: dark);

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

/* Light mode (default) */
:root {
  /* Primary - Deep Teal */
  --color-primary: #0d9488;
  --color-primary-hover: #14b8a6;
  --color-primary-muted: #ccfbf1;

  /* Backgrounds */
  --color-bg-base: #fafafa;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #f4f4f5;
  --color-bg-hover: #e4e4e7;

  /* Text */
  --color-text-primary: #18181b;
  --color-text-secondary: #52525b;
  --color-text-muted: #a1a1aa;

  /* Accents */
  --color-semantic: #7c3aed;
  --color-fulltext: #0284c7;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;

  /* Borders */
  --color-border: #e4e4e7;
  --color-border-focus: #0d9488;

  /* Highlight.js overrides for light mode */
  --hljs-bg: transparent;
  --hljs-color: #24292e;
}

/* Dark mode */
[data-theme="dark"] {
  /* Primary - Deep Teal */
  --color-primary: #2dd4bf;
  --color-primary-hover: #5eead4;
  --color-primary-muted: #164e4a;

  /* Backgrounds */
  --color-bg-base: #0f0f14;
  --color-bg-surface: #1a1a24;
  --color-bg-elevated: #242430;
  --color-bg-hover: #2e2e3a;

  /* Text */
  --color-text-primary: #f0f0f5;
  --color-text-secondary: #9898a8;
  --color-text-muted: #606070;

  /* Accents */
  --color-semantic: #a78bfa;
  --color-fulltext: #38bdf8;
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-error: #f87171;

  /* Borders */
  --color-border: #2e2e3a;
  --color-border-focus: #2dd4bf;

  /* Highlight.js overrides for dark mode */
  --hljs-bg: transparent;
  --hljs-color: #c9d1d9;
}

@layer base {
  body {
    @apply bg-bg-base text-text-primary antialiased;
    font-family: 'Inter', system-ui, sans-serif;
  }

  code, pre {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
  }

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

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

  ::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }

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

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors duration-150;
  }

  .btn-primary {
    @apply bg-primary text-white hover:bg-primary-hover;
  }

  [data-theme="dark"] .btn-primary {
    @apply text-bg-base;
  }

  .btn-secondary {
    @apply bg-bg-elevated text-text-primary hover:bg-bg-hover border border-border;
  }

  .btn-ghost {
    @apply text-text-secondary hover:text-text-primary hover:bg-bg-hover;
  }

  .input {
    @apply w-full px-3 py-2 bg-bg-surface border border-border rounded-lg
           text-text-primary placeholder:text-text-muted
           focus:outline-none focus:border-border-focus focus:ring-1 focus:ring-border-focus
           transition-colors duration-150;
  }

  .card {
    @apply bg-bg-surface border border-border rounded-lg;
  }

  .kbd {
    @apply inline-flex items-center justify-center px-1.5 py-0.5
           text-xs font-mono text-text-secondary bg-bg-elevated
           border border-border rounded;
  }
}

/* Override highlight.js styles for better integration */
.hljs {
  background: var(--hljs-bg) !important;
  color: var(--hljs-color);
  padding: 0 !important;
}

/* Light mode specific highlight.js overrides */
:root .hljs-comment,
:root .hljs-quote {
  color: #6a737d;
}

:root .hljs-keyword,
:root .hljs-selector-tag {
  color: #d73a49;
}

:root .hljs-string,
:root .hljs-attr {
  color: #032f62;
}

:root .hljs-number,
:root .hljs-literal {
  color: #005cc5;
}

:root .hljs-title,
:root .hljs-section {
  color: #6f42c1;
}

:root .hljs-built_in {
  color: #005cc5;
}

/* Dark mode specific highlight.js overrides */
[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-quote {
  color: #8b949e;
}

[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag {
  color: #ff7b72;
}

[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-attr {
  color: #a5d6ff;
}

[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-literal {
  color: #79c0ff;
}

[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-section {
  color: #d2a8ff;
}

[data-theme="dark"] .hljs-built_in {
  color: #79c0ff;
}

/* Markdown prose styles */
.prose {
  --tw-prose-body: var(--color-text-primary);
  --tw-prose-headings: var(--color-text-primary);
  --tw-prose-lead: var(--color-text-secondary);
  --tw-prose-links: var(--color-primary);
  --tw-prose-bold: var(--color-text-primary);
  --tw-prose-counters: var(--color-text-secondary);
  --tw-prose-bullets: var(--color-text-secondary);
  --tw-prose-hr: var(--color-border);
  --tw-prose-quotes: var(--color-text-secondary);
  --tw-prose-quote-borders: var(--color-primary);
  --tw-prose-captions: var(--color-text-muted);
  --tw-prose-code: var(--color-primary);
  --tw-prose-pre-code: var(--color-text-primary);
  --tw-prose-pre-bg: var(--color-bg-elevated);
  --tw-prose-th-borders: var(--color-border);
  --tw-prose-td-borders: var(--color-border);
}

/* Task list styles (for GFM checkboxes) */
.prose ul.contains-task-list {
  list-style: none;
  padding-left: 0;
}

.prose ul.contains-task-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.prose ul.contains-task-list input[type="checkbox"] {
  margin-top: 0.25rem;
  accent-color: var(--color-primary);
}

/* Sonner toast styles */
[data-sonner-toaster] {
  --normal-bg: var(--color-bg-surface);
  --normal-border: var(--color-border);
  --normal-text: var(--color-text-primary);
  --success-bg: var(--color-bg-surface);
  --success-border: var(--color-success);
  --success-text: var(--color-success);
  --error-bg: var(--color-bg-surface);
  --error-border: var(--color-error);
  --error-text: var(--color-error);
}

/* Radix dialog animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes zoomIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes zoomOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}
