@import "tailwindcss";
@import "highlight.js/styles/github-dark.min.css";
@theme {
--color-primary: #f97316;
--color-primary-light: #fb923c;
--color-primary-dark: #ea580c;
--color-surface: #0f172a;
--color-surface-light: #1e293b;
--color-surface-lighter: #334155;
--color-text: #f1f5f9;
--color-text-muted: #94a3b8;
--color-border: #334155;
--font-display: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;
}
@layer base {
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-display);
background-color: var(--color-surface);
color: var(--color-text);
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-surface);
}
::-webkit-scrollbar-thumb {
background: var(--color-surface-lighter);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-text-muted);
}
}
@layer components {
.prose {
max-width: 80ch;
line-height: 1.75;
color: var(--color-text);
}
.prose h1 {
font-size: 2.25rem;
font-weight: 800;
margin-top: 0;
margin-bottom: 1rem;
color: white;
letter-spacing: -0.025em;
}
.prose h2 {
font-size: 1.5rem;
font-weight: 700;
margin-top: 2.5rem;
margin-bottom: 0.75rem;
color: white;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--color-border);
}
.prose h3 {
font-size: 1.25rem;
font-weight: 600;
margin-top: 2rem;
margin-bottom: 0.5rem;
color: var(--color-primary-light);
}
.prose h4 {
font-size: 1.1rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
color: var(--color-text);
}
.prose p {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.prose a {
color: var(--color-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.prose a:hover {
color: var(--color-primary-light);
}
.prose code:not(pre code) {
background-color: var(--color-surface-lighter);
padding: 0.15rem 0.4rem;
border-radius: 0.25rem;
font-size: 0.875em;
font-family: var(--font-mono);
color: var(--color-primary-light);
}
.prose pre {
background-color: #0d1117;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
padding: 1rem 1.25rem;
overflow-x: auto;
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 0.875rem;
line-height: 1.6;
}
.prose pre code {
font-family: var(--font-mono);
background: none;
padding: 0;
color: inherit;
}
.prose ul {
list-style-type: disc;
padding-left: 1.5rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.prose ol {
list-style-type: decimal;
padding-left: 1.5rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.prose li {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.prose li > ul,
.prose li > ol {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.prose blockquote {
border-left: 4px solid var(--color-primary);
padding-left: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
color: var(--color-text-muted);
font-style: italic;
}
.prose table {
width: 100%;
border-collapse: collapse;
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 0.875rem;
}
.prose thead th {
background-color: var(--color-surface-light);
padding: 0.75rem 1rem;
text-align: left;
font-weight: 600;
border-bottom: 2px solid var(--color-border);
color: white;
}
.prose tbody td {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--color-border);
}
.prose tbody tr:hover {
background-color: var(--color-surface-light);
}
.prose hr {
border-color: var(--color-border);
margin-top: 2rem;
margin-bottom: 2rem;
}
.prose strong {
font-weight: 700;
color: white;
}
.prose img {
border-radius: 0.5rem;
max-width: 100%;
}
}