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

:root {
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 17, 24, 39;
  --background-end-rgb: 3, 7, 18;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(to bottom, rgb(var(--background-start-rgb)), rgb(var(--background-end-rgb)));
  min-height: 100vh;
}

pre {
  background: #0d1117 !important;
  border-radius: 0.5rem;
  border: 1px solid #30363d;
  margin: 1.5rem 0;
  overflow-x: auto;
}

pre code {
  display: block;
  padding: 1rem 1.25rem;
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #e6edf3;
}

code:not(pre code),
.inline-code {
  background: rgba(110, 118, 129, 0.4);
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
  font-size: 0.875em;
  color: #f0f6fc;
}

.mermaid {
  display: block;
  margin: 1rem 0;
  overflow-x: auto;
}

:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}
