@import "tailwindcss";
@import "tw-animate-css";
@import "highlight.js/styles/github-dark.css";

@plugin "@tailwindcss/typography";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-background: oklch(0.145 0.008 260);
  --color-foreground: oklch(0.985 0 0);
  --color-card: oklch(0.195 0.015 260);
  --color-card-foreground: oklch(0.985 0 0);
  --color-popover: oklch(0.145 0 0);
  --color-popover-foreground: oklch(0.985 0 0);
  --color-primary: oklch(0.985 0 0);
  --color-primary-foreground: oklch(0.205 0 0);
  --color-secondary: oklch(0.255 0.015 260);
  --color-secondary-foreground: oklch(0.985 0 0);
  --color-muted: oklch(0.255 0.015 260);
  --color-muted-foreground: oklch(0.708 0.01 260);
  --color-accent: oklch(0.255 0.015 260);
  --color-accent-foreground: oklch(0.985 0 0);
  --color-destructive: oklch(0.396 0.141 25.723);
  --color-destructive-foreground: oklch(0.637 0.237 25.331);
  --color-border: oklch(0.25 0.012 260);
  --color-input: oklch(0.255 0.015 260);
  --color-ring: oklch(0.556 0 0);
  --color-genesis: oklch(0.72 0.15 160);
  --color-genesis-foreground: oklch(0.985 0 0);
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

body {
  font-family: var(--font-sans);
  overflow: hidden;
}

.titlebar-drag {
  -webkit-app-region: drag;
}
.titlebar-no-drag {
  -webkit-app-region: no-drag;
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: oklch(0.35 0 0);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: oklch(0.45 0 0);
}

.prose pre {
  background: oklch(0.205 0 0);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  overflow-x: auto;
}
.prose pre code {
  background: transparent;
  padding: 0;
  font-size: 0.875em;
  font-weight: inherit;
  color: inherit;
}
.prose pre code::before,
.prose pre code::after {
  content: none;
}
.prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: oklch(0.205 0 0);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-weight: inherit;
}
.prose :not(pre) > code::before,
.prose :not(pre) > code::after {
  content: none;
}
.prose a {
  color: var(--color-genesis);
  text-decoration: underline;
}
.prose table {
  font-size: 0.875em;
}
