Neon Theme Tokens

1/*
2 * Neon UI theme tokens (Tailwind v4, shadcn convention).
3 *
4 * Canonical shadcn CSS variables (--background, --primary, --card, ...) set to
5 * the Neon palette per https://neon.com/brand: brand green on near-black. Any
6 * shadcn/ui component dropped into a consuming app inherits the Neon look with
7 * no extra work. The logo asset is never recolored or derived from these vars.
8*/
9 
10@import "shadcn/tailwind.css";
11 
12/* Typography base: macOS renders text heavier than intended, so smooth
13   once at the root; font-synthesis off so a missing weight or italic
14   fails visibly instead of rendering a faked face. */
15@layer base {
16  body {
17    -webkit-font-smoothing: antialiased;
18    -moz-osx-font-smoothing: grayscale;
19    font-synthesis: none;
20  }
21}
22@keyframes neon-skeleton-pulse {
23  0%,
24  100% {
25    opacity: 0.72;
26  }
27 
28  50% {
29    opacity: 1;
30  }
31}
32 
33:root {
34  --radius: 0.5rem;
35 
36  --background: #ffffff;
37  --foreground: #0c0d0d;
38  --card: #ffffff;
39  --card-foreground: #0c0d0d;
40  --popover: #ffffff;
41  --popover-foreground: #0c0d0d;
42  --primary: #00a36f;
43  --primary-foreground: #ffffff;
44  --secondary: #f3f4f6;
45  --secondary-foreground: #0c0d0d;
46  --muted: #f3f4f6;
47  --muted-foreground: #5b6472;
48  --accent: #f3f4f6;
49  --accent-foreground: #0c0d0d;
50  --destructive: #e5484d;
51  --destructive-foreground: #ffffff;
52  --border: #e5e7eb;
53  --input: #e5e7eb;
54  --ring: #00a36f;
55 
56  /* Neon compute lifecycle + status accents */
57  --neon: #00b37a;
58  --status-active: #00b37a;
59  --status-sleeping: #6b7280;
60  --status-scaling: #d97706;
61 
62  /* Chart ramp: one hue, five clear steps of lightness. Stacked bands are
63     told apart by value, not by hue, so the palette can stay the Neon
64     green family without becoming unreadable. Bands are separated by a
65     hairline in --card; see lib/consumption METRIC_COLORS.
66     Keep in sync with the copy in apps/docs/theme.css. */
67  --chart-1: #34c79a;
68  --chart-2: #00a870;
69  --chart-3: #008054;
70  --chart-4: #005c3e;
71  --chart-5: #0d3a2a;
72 
73  --sidebar: #ffffff;
74  --sidebar-foreground: #0c0d0d;
75  --sidebar-primary: #00a36f;
76  --sidebar-primary-foreground: #ffffff;
77  --sidebar-accent: #f3f4f6;
78  --sidebar-accent-foreground: #0c0d0d;
79  --sidebar-border: #e5e7eb;
80  --sidebar-ring: #00a36f;
81}
82 
83.dark {
84  --background: #0c0d0d;
85  --foreground: #f3f4f6;
86  --card: #131414;
87  --card-foreground: #f3f4f6;
88  --popover: #1a1b1b;
89  --popover-foreground: #f3f4f6;
90  --primary: #00e599;
91  --primary-foreground: #0c0d0d;
92  --secondary: #1a1b1b;
93// … truncated