1/* highlight.js theme must be imported before any @layer rules (PostCSS requirement) */
 2@import 'highlight.js/styles/github.css';
 3
 4@tailwind base;
 5@tailwind components;
 6@tailwind utilities;
 7
 8@layer base {
 9  :root {
10    /* zinc palette — clean neutral, GitHub-adjacent */
11    --background: 0 0% 100%;
12    --foreground: 240 10% 3.9%;
13    --card: 0 0% 100%;
14    --card-foreground: 240 10% 3.9%;
15    --popover: 0 0% 100%;
16    --popover-foreground: 240 10% 3.9%;
17    --primary: 240 5.9% 10%;
18    --primary-foreground: 0 0% 98%;
19    --secondary: 240 4.8% 95.9%;
20    --secondary-foreground: 240 5.9% 10%;
21    --muted: 240 4.8% 95.9%;
22    --muted-foreground: 240 3.8% 46.1%;
23    --accent: 240 4.8% 95.9%;
24    --accent-foreground: 240 5.9% 10%;
25    --destructive: 0 84.2% 60.2%;
26    --destructive-foreground: 0 0% 98%;
27    --border: 240 5.9% 90%;
28    --input: 240 5.9% 90%;
29    --ring: 240 5.9% 10%;
30    --radius: 0.375rem;
31  }
32
33  .dark {
34    /* dimmed dark — comfortable grey, not pitch black */
35    --background: 220 13% 13%;
36    --foreground: 220 10% 88%;
37    --card: 220 13% 16%;
38    --card-foreground: 220 10% 88%;
39    --popover: 220 13% 16%;
40    --popover-foreground: 220 10% 88%;
41    --primary: 220 10% 90%;
42    --primary-foreground: 220 13% 11%;
43    --secondary: 220 10% 22%;
44    --secondary-foreground: 220 10% 88%;
45    --muted: 220 10% 22%;
46    --muted-foreground: 220 8% 55%;
47    --accent: 220 10% 22%;
48    --accent-foreground: 220 10% 88%;
49    --destructive: 0 65% 50%;
50    --destructive-foreground: 0 0% 98%;
51    --border: 220 10% 26%;
52    --input: 220 10% 26%;
53    --ring: 220 10% 70%;
54  }
55}
56
57@layer base {
58  * {
59    @apply border-border;
60  }
61  body {
62    @apply bg-background text-foreground;
63  }
64}
65
66/* ── Dark-mode overrides for highlight.js (imported above) ──────────────── */
67.dark .hljs {
68  background: hsl(220, 13%, 16%);
69  color: hsl(220, 10%, 85%);
70}
71.dark .hljs-keyword,
72.dark .hljs-selector-tag,
73.dark .hljs-built_in { color: #ff7b72; }
74.dark .hljs-string,
75.dark .hljs-attr { color: #a5d6ff; }
76.dark .hljs-comment { color: hsl(220, 8%, 50%); }
77.dark .hljs-number,
78.dark .hljs-literal { color: #79c0ff; }
79.dark .hljs-title,
80.dark .hljs-name { color: #d2a8ff; }
81.dark .hljs-type { color: #ffa657; }