@snowcone-app/ui 0.1.43 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (192) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/README.md +18 -4
  3. package/package.json +9 -5
  4. package/src/components/CanvasIsolationBoundary.tsx +202 -0
  5. package/src/components/LoadingOverlayPrism.tsx +251 -0
  6. package/src/composed/AddToCart.tsx +229 -0
  7. package/src/composed/ArtAlignment.tsx +703 -0
  8. package/src/composed/ArtSelector.tsx +290 -0
  9. package/src/composed/ArtworkCustomizer.tsx +212 -0
  10. package/src/composed/CanvasEditor.tsx +79 -0
  11. package/src/composed/ColorPicker.tsx +111 -0
  12. package/src/composed/CurrentSelectionDisplay.tsx +86 -0
  13. package/src/composed/HeroProductImage.tsx +1071 -0
  14. package/src/composed/Lightbox.index.ts +2 -0
  15. package/src/composed/Lightbox.tsx +230 -0
  16. package/src/composed/PlacementClipShapeSelector.tsx +88 -0
  17. package/src/composed/PlacementTabs.tsx +179 -0
  18. package/src/composed/ProductCard.tsx +298 -0
  19. package/src/composed/ProductGallery.tsx +54 -0
  20. package/src/composed/ProductImage.tsx +129 -0
  21. package/src/composed/ProductList.tsx +147 -0
  22. package/src/composed/ProductOptions.tsx +305 -0
  23. package/src/composed/RealtimeMockup.tsx +121 -0
  24. package/src/composed/TileCount.tsx +348 -0
  25. package/src/composed/carousels/HeroCarousel.tsx +240 -0
  26. package/src/composed/carousels/MobileProductCarousel.tsx +1002 -0
  27. package/src/composed/carousels/index.ts +11 -0
  28. package/src/composed/carousels/types.ts +58 -0
  29. package/src/composed/grids/MasonryGrid.tsx +238 -0
  30. package/src/composed/grids/index.ts +9 -0
  31. package/src/composed/search/CurrentRefinements.tsx +80 -0
  32. package/src/composed/search/Filters.tsx +49 -0
  33. package/src/composed/search/FiltersButton.tsx +57 -0
  34. package/src/composed/search/FiltersDrawer.tsx +375 -0
  35. package/src/composed/search/ProductGrid.tsx +118 -0
  36. package/src/composed/search/ProductHit.tsx +56 -0
  37. package/src/composed/search/SearchBox.tsx +109 -0
  38. package/src/composed/search/SearchProvider.tsx +136 -0
  39. package/src/composed/search/facetConfig.ts +16 -0
  40. package/src/composed/search/index.ts +22 -0
  41. package/src/composed/search/meilisearchAdapter.ts +20 -0
  42. package/src/composed/search/types.ts +22 -0
  43. package/src/composed/zoom/EnhancedImageViewer.tsx +505 -0
  44. package/src/composed/zoom/ResponsiveZoom.tsx +134 -0
  45. package/src/composed/zoom/ZoomOverlay.tsx +194 -0
  46. package/src/composed/zoom/index.ts +12 -0
  47. package/src/composed/zoom/types.ts +12 -0
  48. package/src/design-system/ColorPalette.tsx +126 -0
  49. package/src/design-system/ColorSwatch.tsx +49 -0
  50. package/src/design-system/DesignSystemPage.tsx +130 -0
  51. package/src/design-system/ThemeSwitcher.tsx +181 -0
  52. package/src/design-system/TypographyScale.tsx +106 -0
  53. package/src/design-system/index.ts +5 -0
  54. package/src/ecommerce/stories/HeroProductImage.stories.tsx +66 -0
  55. package/src/ecommerce/stories/PDPHeroGallery.stories.tsx +105 -0
  56. package/src/ecommerce/stories/PDPInfoPanel.stories.tsx +472 -0
  57. package/src/ecommerce/stories/PDPLayout.stories.tsx +365 -0
  58. package/src/hooks/useBrand.ts +41 -0
  59. package/src/hooks/useCanvasContext.ts +127 -0
  60. package/src/hooks/useDeviceDetection.ts +64 -0
  61. package/src/hooks/useFocusTrap.ts +70 -0
  62. package/src/hooks/useImagePreloader.ts +268 -0
  63. package/src/hooks/useImageTransition.ts +608 -0
  64. package/src/hooks/usePlacementsProcessor.ts +74 -0
  65. package/src/hooks/useProductGallery.ts +193 -0
  66. package/src/hooks/useProductPage.ts +467 -0
  67. package/src/hooks/useRenderGuard.ts +96 -0
  68. package/src/hooks/useScrollDirection.ts +196 -0
  69. package/src/hooks/viewport/index.ts +25 -0
  70. package/src/hooks/viewport/useContainerWidth.ts +59 -0
  71. package/src/hooks/viewport/useMediaQuery.ts +52 -0
  72. package/src/hooks/viewport/useResponsiveImageCap.ts +149 -0
  73. package/src/hooks/viewport/useViewportDimensions.ts +135 -0
  74. package/src/hooks/viewport/useWideMonitorMode.ts +150 -0
  75. package/src/hooks/visibility/index.ts +15 -0
  76. package/src/hooks/visibility/observerPool.ts +150 -0
  77. package/src/index.ts +240 -0
  78. package/src/layouts/hero-zoom/HeroShrinkLayout.tsx +209 -0
  79. package/src/layouts/hero-zoom/HeroZoomLayout.tsx +351 -0
  80. package/src/layouts/hero-zoom/index.ts +30 -0
  81. package/src/layouts/hero-zoom/stories/HeroZoomLayout.stories.tsx +350 -0
  82. package/src/layouts/hero-zoom/types.ts +113 -0
  83. package/src/layouts/hero-zoom/useHeroZoomScales.ts +156 -0
  84. package/src/layouts/index.ts +9 -0
  85. package/src/layouts/pdp/EdgeBlurBox.tsx +210 -0
  86. package/src/layouts/pdp/ImageBlurExtension.tsx +215 -0
  87. package/src/layouts/pdp/ImageEdgeBlur.tsx +215 -0
  88. package/src/layouts/pdp/PDPLayout.tsx +246 -0
  89. package/src/layouts/pdp/SimpleImageBlur.tsx +140 -0
  90. package/src/layouts/pdp/index.ts +40 -0
  91. package/src/lib/env.ts +15 -0
  92. package/src/lib/locale.ts +167 -0
  93. package/src/lib/router.tsx +46 -0
  94. package/src/lib/utils.ts +6 -0
  95. package/src/lightbox/README.md +77 -0
  96. package/src/next/index.tsx +26 -0
  97. package/src/patterns/MockupPriorityProvider.tsx +1014 -0
  98. package/src/patterns/Product.tsx +850 -0
  99. package/src/patterns/ProductPageProvider.tsx +224 -0
  100. package/src/patterns/RealtimeProvider.tsx +1162 -0
  101. package/src/patterns/ShopProvider.tsx +603 -0
  102. package/src/personalization/PersonalizationBridge.tsx +235 -0
  103. package/src/personalization/PersonalizationContext.ts +29 -0
  104. package/src/personalization/PersonalizationInputs.tsx +110 -0
  105. package/src/personalization/PersonalizationProvider.tsx +407 -0
  106. package/src/personalization/canvas-stub.d.ts +22 -0
  107. package/src/personalization/index.ts +43 -0
  108. package/src/personalization/types.ts +48 -0
  109. package/src/personalization/usePersonalization.ts +32 -0
  110. package/src/personalization/usePersonalizationShimmer.ts +159 -0
  111. package/src/personalization/utils.ts +59 -0
  112. package/src/primitives/BrandLogo.tsx +65 -0
  113. package/src/primitives/BrandName.tsx +51 -0
  114. package/src/primitives/Button.tsx +123 -0
  115. package/src/primitives/ColorSwatch.tsx +221 -0
  116. package/src/primitives/DragHintAnimation.tsx +190 -0
  117. package/src/primitives/EdgeSwipeGuards.tsx +60 -0
  118. package/src/primitives/FloatingActionGroup.tsx +176 -0
  119. package/src/primitives/ProductPrice.tsx +171 -0
  120. package/src/primitives/ProgressiveBlur.tsx +295 -0
  121. package/src/primitives/ThemeToggle.tsx +125 -0
  122. package/src/primitives/__tests__/story-coverage.test.ts +98 -0
  123. package/src/primitives/accordion.tsx +280 -0
  124. package/src/primitives/badge.tsx +137 -0
  125. package/src/primitives/card.tsx +61 -0
  126. package/src/primitives/checkbox.tsx +56 -0
  127. package/src/primitives/collapsible.tsx +51 -0
  128. package/src/primitives/drawer.tsx +828 -0
  129. package/src/primitives/dropdown-menu.tsx +197 -0
  130. package/src/primitives/fieldset.tsx +73 -0
  131. package/src/primitives/index.ts +138 -0
  132. package/src/primitives/input.tsx +91 -0
  133. package/src/primitives/kbd.tsx +130 -0
  134. package/src/primitives/label.tsx +20 -0
  135. package/src/primitives/link.tsx +182 -0
  136. package/src/primitives/popover.tsx +80 -0
  137. package/src/primitives/radio-group.tsx +79 -0
  138. package/src/primitives/scroll-fade.tsx +159 -0
  139. package/src/primitives/select.tsx +170 -0
  140. package/src/primitives/separator.tsx +25 -0
  141. package/src/primitives/slider.tsx +221 -0
  142. package/src/primitives/spinner.tsx +72 -0
  143. package/src/primitives/stories/Accordion.stories.tsx +121 -0
  144. package/src/primitives/stories/Badge.stories.tsx +221 -0
  145. package/src/primitives/stories/Button.stories.tsx +185 -0
  146. package/src/primitives/stories/Card.stories.tsx +171 -0
  147. package/src/primitives/stories/Checkbox.stories.tsx +214 -0
  148. package/src/primitives/stories/Collapsible.stories.tsx +230 -0
  149. package/src/primitives/stories/Drawer.stories.tsx +378 -0
  150. package/src/primitives/stories/DropdownMenu.stories.tsx +182 -0
  151. package/src/primitives/stories/Fieldset.stories.tsx +212 -0
  152. package/src/primitives/stories/Input.stories.tsx +172 -0
  153. package/src/primitives/stories/Kbd.stories.tsx +183 -0
  154. package/src/primitives/stories/Label.stories.tsx +98 -0
  155. package/src/primitives/stories/Link.stories.tsx +260 -0
  156. package/src/primitives/stories/Popover.stories.tsx +178 -0
  157. package/src/primitives/stories/RadioGroup.stories.tsx +205 -0
  158. package/src/primitives/stories/Select.stories.tsx +222 -0
  159. package/src/primitives/stories/Separator.stories.tsx +134 -0
  160. package/src/primitives/stories/Slider.stories.tsx +203 -0
  161. package/src/primitives/stories/Spinner.stories.tsx +142 -0
  162. package/src/primitives/stories/Surface.stories.tsx +257 -0
  163. package/src/primitives/stories/Switch.stories.tsx +131 -0
  164. package/src/primitives/stories/Tabs.stories.tsx +275 -0
  165. package/src/primitives/stories/TextField.stories.tsx +139 -0
  166. package/src/primitives/stories/Textarea.stories.tsx +148 -0
  167. package/src/primitives/stories/Tooltip.stories.tsx +119 -0
  168. package/src/primitives/surface.tsx +86 -0
  169. package/src/primitives/switch.tsx +35 -0
  170. package/src/primitives/tabs.tsx +206 -0
  171. package/src/primitives/text-field.tsx +84 -0
  172. package/src/primitives/textarea.tsx +50 -0
  173. package/src/primitives/tooltip.tsx +58 -0
  174. package/src/services/CanvasExportService.ts +518 -0
  175. package/src/styles/base.css +380 -0
  176. package/src/styles/defaults.css +280 -0
  177. package/src/styles/globals.css +1242 -0
  178. package/src/styles/index.css +17 -0
  179. package/src/styles/ne-themes.css +4740 -0
  180. package/src/styles/tailwind.css +11 -0
  181. package/src/styles/tokens.css +117 -0
  182. package/src/styles/utilities.css +188 -0
  183. package/src/themes/apply-theme.ts +449 -0
  184. package/src/themes/getThemeStyles.ts +454 -0
  185. package/src/themes/index.ts +48 -0
  186. package/src/themes/oklch-theme.ts +283 -0
  187. package/src/themes/presets.ts +989 -0
  188. package/src/themes/types.ts +386 -0
  189. package/src/themes/useTheme.tsx +450 -0
  190. package/src/utils/dev-warnings.ts +161 -0
  191. package/src/utils/devWarnings.ts +153 -0
  192. package/dist/styles.css +0 -1
package/src/styles/ne-themes.css ADDED
@@ -0,0 +1,4740 @@
1
+ /**
2
+ * Theme CSS (OKLCH-Based)
3
+ *
4
+ * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
5
+ * Generated by: packages/ui/scripts/generate-theme-css.ts
6
+ * Source: packages/ui/src/themes/presets.ts (oklchPresets)
7
+ *
8
+ * To regenerate: pnpm --filter @snowcone-app/ui generate:themes
9
+ *
10
+ * This is the SINGLE SOURCE OF TRUTH for theme CSS.
11
+ * All colors are computed from hue + chroma using OKLCH color space.
12
+ *
13
+ * BENEFITS:
14
+ * - No runtime color calculation needed
15
+ * - SSR-safe (no hydration mismatch)
16
+ * - Consistent contrast ratios
17
+ * - Perceptually uniform color relationships
18
+ */
19
+
20
+ /*
21
+ * ============================================================================
22
+ * THEME OVERRIDES - UNLAYERED (Highest Priority)
23
+ * ============================================================================
24
+ * These styles are outside of @layer to ensure they override defaults.
25
+ * Unlayered styles always have higher priority than layered styles.
26
+ *
27
+ * Pattern:
28
+ * - Light themes: [data-theme='ne-xxx']
29
+ * - Dark themes: .dark[data-theme='ne-xxx'], [data-theme='ne-xxx'] .dark
30
+ */
31
+
32
+ /* ==========================================================================
33
+ SNOWCONE THEME FAMILY
34
+ Hue: 0 | Chroma: 0
35
+ ========================================================================== */
36
+
37
+ /* Snowcone */
38
+ [data-theme='ne-snowcone'] {
39
+ color-scheme: light;
40
+
41
+ /* =================================================================
42
+ * OKLCH-GENERATED COLORS
43
+ * Theme: Snowcone | Hue: 0 | Chroma: 0
44
+ * ================================================================= */
45
+
46
+ /* Background - Page level */
47
+ --color-background: oklch(97.0% 0.0060 265.0);
48
+ --background: oklch(97.0% 0.0060 265.0);
49
+
50
+ /* Surface - Cards, panels, modals */
51
+ --color-surface: oklch(100.0% 0.0060 265.0);
52
+ --color-card: oklch(100.0% 0.0060 265.0);
53
+ --surface: oklch(100.0% 0.0060 265.0);
54
+
55
+ /* Surface Raised - Popovers, dropdowns */
56
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
57
+ --color-popover: oklch(94.0% 0.0060 265.0);
58
+
59
+ /* Fields - Form inputs */
60
+ --color-field: oklch(100.0% 0.0060 265.0);
61
+ --field: oklch(100.0% 0.0060 265.0);
62
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
63
+
64
+ /* Foreground - Text colors */
65
+ --color-foreground: oklch(15.0% 0.0060 265.0);
66
+ --foreground: oklch(15.0% 0.0060 265.0);
67
+ --color-heading: oklch(15.0% 0.0060 265.0);
68
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
69
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
70
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
71
+
72
+ /* Muted Foreground - Secondary text */
73
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
74
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
75
+
76
+ /* Primary - Brand accent */
77
+ --color-primary: oklch(0.0% 0.0000 0.0);
78
+ --primary: oklch(0.0% 0.0000 0.0);
79
+ --color-accent: oklch(0.0% 0.0000 0.0);
80
+ --accent: oklch(0.0% 0.0000 0.0);
81
+ --color-ring: oklch(0.0% 0.0000 0.0);
82
+ --focus: oklch(0.0% 0.0000 0.0);
83
+
84
+ /* Primary Foreground - Text on primary bg */
85
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
86
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
87
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
88
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
89
+
90
+ /* Secondary - Secondary accent */
91
+ --color-secondary: oklch(45.0% 0.0000 0.0);
92
+ --secondary: oklch(45.0% 0.0000 0.0);
93
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
94
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
95
+
96
+ /* Default - Neutral elements */
97
+ --color-default: oklch(94.0% 0.0060 265.0);
98
+ --default: oklch(94.0% 0.0060 265.0);
99
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
100
+ --default-foreground: oklch(15.0% 0.0060 265.0);
101
+
102
+ /* Default on Surface - Secondary buttons/badges when on a surface */
103
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
104
+
105
+ /* Border - Dividers, borders */
106
+ --color-border: oklch(85.0% 0.0060 265.0);
107
+ --border: oklch(85.0% 0.0060 265.0);
108
+ --color-divider: oklch(85.0% 0.0060 265.0);
109
+ --divider: oklch(85.0% 0.0060 265.0);
110
+
111
+ /* Muted - Muted backgrounds */
112
+ --color-muted: oklch(94.0% 0.0060 265.0);
113
+ --muted: oklch(94.0% 0.0060 265.0);
114
+
115
+ /* Overlay */
116
+ --color-overlay: oklch(100.0% 0.0060 265.0);
117
+ --overlay: oklch(100.0% 0.0060 265.0);
118
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
119
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
120
+
121
+ /* Icon - Icon colors */
122
+ --color-icon: oklch(55.0% 0.0000 0.0);
123
+
124
+ /* Accent Text - For overlays and labels */
125
+ --color-accent-text-overlay: oklch(45.0% 0.0000 0.0);
126
+ --color-accent-text-page: oklch(50.0% 0.0000 0.0);
127
+
128
+ /* Text Selection */
129
+ --color-text-selection: oklch(0.0% 0.0000 0.0) / 15%;
130
+
131
+ /* Canvas Background */
132
+ --color-canvas-bg: #f5f5f5;
133
+ }
134
+ /* Snowcone Dark */
135
+ .dark[data-theme='ne-snowcone-dark'],
136
+ [data-theme='ne-snowcone-dark'] .dark {
137
+ color-scheme: dark;
138
+
139
+ /* =================================================================
140
+ * OKLCH-GENERATED COLORS
141
+ * Theme: Snowcone Dark | Hue: 0 | Chroma: 0
142
+ * ================================================================= */
143
+
144
+ /* Background - Page level */
145
+ --color-background: oklch(12.0% 0.0060 265.0);
146
+ --background: oklch(12.0% 0.0060 265.0);
147
+
148
+ /* Surface - Cards, panels, modals */
149
+ --color-surface: oklch(20.0% 0.0060 265.0);
150
+ --color-card: oklch(20.0% 0.0060 265.0);
151
+ --surface: oklch(20.0% 0.0060 265.0);
152
+
153
+ /* Surface Raised - Popovers, dropdowns */
154
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
155
+ --color-popover: oklch(25.0% 0.0060 265.0);
156
+
157
+ /* Fields - Form inputs */
158
+ --color-field: oklch(27.0% 0.0060 265.0);
159
+ --field: oklch(27.0% 0.0060 265.0);
160
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
161
+
162
+ /* Foreground - Text colors */
163
+ --color-foreground: oklch(96.0% 0.0060 265.0);
164
+ --foreground: oklch(96.0% 0.0060 265.0);
165
+ --color-heading: oklch(96.0% 0.0060 265.0);
166
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
167
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
168
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
169
+
170
+ /* Muted Foreground - Secondary text */
171
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
172
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
173
+
174
+ /* Primary - Brand accent */
175
+ --color-primary: oklch(100.0% 0.0000 0.0);
176
+ --primary: oklch(100.0% 0.0000 0.0);
177
+ --color-accent: oklch(100.0% 0.0000 0.0);
178
+ --accent: oklch(100.0% 0.0000 0.0);
179
+ --color-ring: oklch(100.0% 0.0000 0.0);
180
+ --focus: oklch(100.0% 0.0000 0.0);
181
+
182
+ /* Primary Foreground - Text on primary bg */
183
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
184
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
185
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
186
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
187
+
188
+ /* Secondary - Secondary accent */
189
+ --color-secondary: oklch(68.0% 0.0000 0.0);
190
+ --secondary: oklch(68.0% 0.0000 0.0);
191
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
192
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
193
+
194
+ /* Default - Neutral elements */
195
+ --color-default: oklch(25.0% 0.0060 265.0);
196
+ --default: oklch(25.0% 0.0060 265.0);
197
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
198
+ --default-foreground: oklch(96.0% 0.0060 265.0);
199
+
200
+ /* Default on Surface - Secondary buttons/badges when on a surface */
201
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
202
+
203
+ /* Border - Dividers, borders */
204
+ --color-border: oklch(25.0% 0.0060 265.0);
205
+ --border: oklch(25.0% 0.0060 265.0);
206
+ --color-divider: oklch(25.0% 0.0060 265.0);
207
+ --divider: oklch(25.0% 0.0060 265.0);
208
+
209
+ /* Muted - Muted backgrounds */
210
+ --color-muted: oklch(25.0% 0.0060 265.0);
211
+ --muted: oklch(25.0% 0.0060 265.0);
212
+
213
+ /* Overlay */
214
+ --color-overlay: oklch(20.0% 0.0060 265.0);
215
+ --overlay: oklch(20.0% 0.0060 265.0);
216
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
217
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
218
+
219
+ /* Icon - Icon colors */
220
+ --color-icon: oklch(75.0% 0.0000 0.0);
221
+
222
+ /* Accent Text - For overlays and labels */
223
+ --color-accent-text-overlay: oklch(75.0% 0.0000 0.0);
224
+ --color-accent-text-page: oklch(60.0% 0.0000 0.0);
225
+
226
+ /* Text Selection */
227
+ --color-text-selection: oklch(100.0% 0.0000 0.0) / 20%;
228
+
229
+ /* Canvas Background */
230
+ --color-canvas-bg: #080809;
231
+ }
232
+
233
+ /* ==========================================================================
234
+ MINIMAL THEME FAMILY
235
+ Hue: 0 | Chroma: 0
236
+ ========================================================================== */
237
+
238
+ /* Minimal */
239
+ [data-theme='ne-minimal'] {
240
+ color-scheme: light;
241
+
242
+ /* =================================================================
243
+ * OKLCH-GENERATED COLORS
244
+ * Theme: Minimal | Hue: 0 | Chroma: 0
245
+ * ================================================================= */
246
+
247
+ /* Background - Page level */
248
+ --color-background: oklch(97.0% 0.0060 265.0);
249
+ --background: oklch(97.0% 0.0060 265.0);
250
+
251
+ /* Surface - Cards, panels, modals */
252
+ --color-surface: oklch(100.0% 0.0060 265.0);
253
+ --color-card: oklch(100.0% 0.0060 265.0);
254
+ --surface: oklch(100.0% 0.0060 265.0);
255
+
256
+ /* Surface Raised - Popovers, dropdowns */
257
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
258
+ --color-popover: oklch(94.0% 0.0060 265.0);
259
+
260
+ /* Fields - Form inputs */
261
+ --color-field: oklch(100.0% 0.0060 265.0);
262
+ --field: oklch(100.0% 0.0060 265.0);
263
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
264
+
265
+ /* Foreground - Text colors */
266
+ --color-foreground: oklch(15.0% 0.0060 265.0);
267
+ --foreground: oklch(15.0% 0.0060 265.0);
268
+ --color-heading: oklch(15.0% 0.0060 265.0);
269
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
270
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
271
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
272
+
273
+ /* Muted Foreground - Secondary text */
274
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
275
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
276
+
277
+ /* Primary - Brand accent */
278
+ --color-primary: oklch(55.0% 0.0000 0.0);
279
+ --primary: oklch(55.0% 0.0000 0.0);
280
+ --color-accent: oklch(55.0% 0.0000 0.0);
281
+ --accent: oklch(55.0% 0.0000 0.0);
282
+ --color-ring: oklch(55.0% 0.0000 0.0);
283
+ --focus: oklch(55.0% 0.0000 0.0);
284
+
285
+ /* Primary Foreground - Text on primary bg */
286
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
287
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
288
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
289
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
290
+
291
+ /* Secondary - Secondary accent */
292
+ --color-secondary: oklch(45.0% 0.0000 0.0);
293
+ --secondary: oklch(45.0% 0.0000 0.0);
294
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
295
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
296
+
297
+ /* Default - Neutral elements */
298
+ --color-default: oklch(94.0% 0.0060 265.0);
299
+ --default: oklch(94.0% 0.0060 265.0);
300
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
301
+ --default-foreground: oklch(15.0% 0.0060 265.0);
302
+
303
+ /* Default on Surface - Secondary buttons/badges when on a surface */
304
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
305
+
306
+ /* Border - Dividers, borders */
307
+ --color-border: oklch(85.0% 0.0060 265.0);
308
+ --border: oklch(85.0% 0.0060 265.0);
309
+ --color-divider: oklch(85.0% 0.0060 265.0);
310
+ --divider: oklch(85.0% 0.0060 265.0);
311
+
312
+ /* Muted - Muted backgrounds */
313
+ --color-muted: oklch(94.0% 0.0060 265.0);
314
+ --muted: oklch(94.0% 0.0060 265.0);
315
+
316
+ /* Overlay */
317
+ --color-overlay: oklch(100.0% 0.0060 265.0);
318
+ --overlay: oklch(100.0% 0.0060 265.0);
319
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
320
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
321
+
322
+ /* Icon - Icon colors */
323
+ --color-icon: oklch(55.0% 0.0000 0.0);
324
+
325
+ /* Accent Text - For overlays and labels */
326
+ --color-accent-text-overlay: oklch(45.0% 0.0000 0.0);
327
+ --color-accent-text-page: oklch(50.0% 0.0000 0.0);
328
+
329
+ /* Text Selection */
330
+ --color-text-selection: oklch(55.0% 0.0000 0.0) / 15%;
331
+
332
+ /* Canvas Background */
333
+ --color-canvas-bg: #f5f5f5;
334
+ }
335
+ /* Midnight */
336
+ .dark[data-theme='ne-midnight'],
337
+ [data-theme='ne-midnight'] .dark {
338
+ color-scheme: dark;
339
+
340
+ /* =================================================================
341
+ * OKLCH-GENERATED COLORS
342
+ * Theme: Midnight | Hue: 0 | Chroma: 0
343
+ * ================================================================= */
344
+
345
+ /* Background - Page level */
346
+ --color-background: oklch(12.0% 0.0060 265.0);
347
+ --background: oklch(12.0% 0.0060 265.0);
348
+
349
+ /* Surface - Cards, panels, modals */
350
+ --color-surface: oklch(20.0% 0.0060 265.0);
351
+ --color-card: oklch(20.0% 0.0060 265.0);
352
+ --surface: oklch(20.0% 0.0060 265.0);
353
+
354
+ /* Surface Raised - Popovers, dropdowns */
355
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
356
+ --color-popover: oklch(25.0% 0.0060 265.0);
357
+
358
+ /* Fields - Form inputs */
359
+ --color-field: oklch(27.0% 0.0060 265.0);
360
+ --field: oklch(27.0% 0.0060 265.0);
361
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
362
+
363
+ /* Foreground - Text colors */
364
+ --color-foreground: oklch(96.0% 0.0060 265.0);
365
+ --foreground: oklch(96.0% 0.0060 265.0);
366
+ --color-heading: oklch(96.0% 0.0060 265.0);
367
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
368
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
369
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
370
+
371
+ /* Muted Foreground - Secondary text */
372
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
373
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
374
+
375
+ /* Primary - Brand accent */
376
+ --color-primary: oklch(70.0% 0.0000 0.0);
377
+ --primary: oklch(70.0% 0.0000 0.0);
378
+ --color-accent: oklch(70.0% 0.0000 0.0);
379
+ --accent: oklch(70.0% 0.0000 0.0);
380
+ --color-ring: oklch(70.0% 0.0000 0.0);
381
+ --focus: oklch(70.0% 0.0000 0.0);
382
+
383
+ /* Primary Foreground - Text on primary bg */
384
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
385
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
386
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
387
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
388
+
389
+ /* Secondary - Secondary accent */
390
+ --color-secondary: oklch(68.0% 0.0000 0.0);
391
+ --secondary: oklch(68.0% 0.0000 0.0);
392
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
393
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
394
+
395
+ /* Default - Neutral elements */
396
+ --color-default: oklch(25.0% 0.0060 265.0);
397
+ --default: oklch(25.0% 0.0060 265.0);
398
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
399
+ --default-foreground: oklch(96.0% 0.0060 265.0);
400
+
401
+ /* Default on Surface - Secondary buttons/badges when on a surface */
402
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
403
+
404
+ /* Border - Dividers, borders */
405
+ --color-border: oklch(25.0% 0.0060 265.0);
406
+ --border: oklch(25.0% 0.0060 265.0);
407
+ --color-divider: oklch(25.0% 0.0060 265.0);
408
+ --divider: oklch(25.0% 0.0060 265.0);
409
+
410
+ /* Muted - Muted backgrounds */
411
+ --color-muted: oklch(25.0% 0.0060 265.0);
412
+ --muted: oklch(25.0% 0.0060 265.0);
413
+
414
+ /* Overlay */
415
+ --color-overlay: oklch(20.0% 0.0060 265.0);
416
+ --overlay: oklch(20.0% 0.0060 265.0);
417
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
418
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
419
+
420
+ /* Icon - Icon colors */
421
+ --color-icon: oklch(75.0% 0.0000 0.0);
422
+
423
+ /* Accent Text - For overlays and labels */
424
+ --color-accent-text-overlay: oklch(75.0% 0.0000 0.0);
425
+ --color-accent-text-page: oklch(60.0% 0.0000 0.0);
426
+
427
+ /* Text Selection */
428
+ --color-text-selection: oklch(70.0% 0.0000 0.0) / 20%;
429
+
430
+ /* Canvas Background */
431
+ --color-canvas-bg: #080809;
432
+ }
433
+
434
+ /* ==========================================================================
435
+ LINEAR THEME FAMILY
436
+ Hue: 250 | Chroma: 0.15
437
+ ========================================================================== */
438
+
439
+ /* Linear */
440
+ [data-theme='ne-linear'] {
441
+ color-scheme: light;
442
+
443
+ /* =================================================================
444
+ * OKLCH-GENERATED COLORS
445
+ * Theme: Linear | Hue: 250 | Chroma: 0.15
446
+ * ================================================================= */
447
+
448
+ /* Background - Page level */
449
+ --color-background: oklch(97.0% 0.0060 265.0);
450
+ --background: oklch(97.0% 0.0060 265.0);
451
+
452
+ /* Surface - Cards, panels, modals */
453
+ --color-surface: oklch(100.0% 0.0060 265.0);
454
+ --color-card: oklch(100.0% 0.0060 265.0);
455
+ --surface: oklch(100.0% 0.0060 265.0);
456
+
457
+ /* Surface Raised - Popovers, dropdowns */
458
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
459
+ --color-popover: oklch(94.0% 0.0060 265.0);
460
+
461
+ /* Fields - Form inputs */
462
+ --color-field: oklch(100.0% 0.0060 265.0);
463
+ --field: oklch(100.0% 0.0060 265.0);
464
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
465
+
466
+ /* Foreground - Text colors */
467
+ --color-foreground: oklch(15.0% 0.0060 265.0);
468
+ --foreground: oklch(15.0% 0.0060 265.0);
469
+ --color-heading: oklch(15.0% 0.0060 265.0);
470
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
471
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
472
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
473
+
474
+ /* Muted Foreground - Secondary text */
475
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
476
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
477
+
478
+ /* Primary - Brand accent */
479
+ --color-primary: oklch(55.0% 0.1500 250.0);
480
+ --primary: oklch(55.0% 0.1500 250.0);
481
+ --color-accent: oklch(55.0% 0.1500 250.0);
482
+ --accent: oklch(55.0% 0.1500 250.0);
483
+ --color-ring: oklch(55.0% 0.1500 250.0);
484
+ --focus: oklch(55.0% 0.1500 250.0);
485
+
486
+ /* Primary Foreground - Text on primary bg */
487
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
488
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
489
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
490
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
491
+
492
+ /* Secondary - Secondary accent */
493
+ --color-secondary: oklch(45.0% 0.1200 250.0);
494
+ --secondary: oklch(45.0% 0.1200 250.0);
495
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
496
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
497
+
498
+ /* Default - Neutral elements */
499
+ --color-default: oklch(94.0% 0.0060 265.0);
500
+ --default: oklch(94.0% 0.0060 265.0);
501
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
502
+ --default-foreground: oklch(15.0% 0.0060 265.0);
503
+
504
+ /* Default on Surface - Secondary buttons/badges when on a surface */
505
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
506
+
507
+ /* Border - Dividers, borders */
508
+ --color-border: oklch(85.0% 0.0060 265.0);
509
+ --border: oklch(85.0% 0.0060 265.0);
510
+ --color-divider: oklch(85.0% 0.0060 265.0);
511
+ --divider: oklch(85.0% 0.0060 265.0);
512
+
513
+ /* Muted - Muted backgrounds */
514
+ --color-muted: oklch(94.0% 0.0060 265.0);
515
+ --muted: oklch(94.0% 0.0060 265.0);
516
+
517
+ /* Overlay */
518
+ --color-overlay: oklch(100.0% 0.0060 265.0);
519
+ --overlay: oklch(100.0% 0.0060 265.0);
520
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
521
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
522
+
523
+ /* Icon - Icon colors */
524
+ --color-icon: oklch(55.0% 0.1050 250.0);
525
+
526
+ /* Accent Text - For overlays and labels */
527
+ --color-accent-text-overlay: oklch(45.0% 0.0750 250.0);
528
+ --color-accent-text-page: oklch(50.0% 0.0750 250.0);
529
+
530
+ /* Text Selection */
531
+ --color-text-selection: oklch(55.0% 0.0450 250.0) / 15%;
532
+
533
+ /* Canvas Background */
534
+ --color-canvas-bg: #f5f5f5;
535
+ }
536
+ /* Linear Dark */
537
+ .dark[data-theme='ne-linear-dark'],
538
+ [data-theme='ne-linear-dark'] .dark {
539
+ color-scheme: dark;
540
+
541
+ /* =================================================================
542
+ * OKLCH-GENERATED COLORS
543
+ * Theme: Linear Dark | Hue: 250 | Chroma: 0.18
544
+ * ================================================================= */
545
+
546
+ /* Background - Page level */
547
+ --color-background: oklch(12.0% 0.0060 265.0);
548
+ --background: oklch(12.0% 0.0060 265.0);
549
+
550
+ /* Surface - Cards, panels, modals */
551
+ --color-surface: oklch(20.0% 0.0060 265.0);
552
+ --color-card: oklch(20.0% 0.0060 265.0);
553
+ --surface: oklch(20.0% 0.0060 265.0);
554
+
555
+ /* Surface Raised - Popovers, dropdowns */
556
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
557
+ --color-popover: oklch(25.0% 0.0060 265.0);
558
+
559
+ /* Fields - Form inputs */
560
+ --color-field: oklch(27.0% 0.0060 265.0);
561
+ --field: oklch(27.0% 0.0060 265.0);
562
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
563
+
564
+ /* Foreground - Text colors */
565
+ --color-foreground: oklch(96.0% 0.0060 265.0);
566
+ --foreground: oklch(96.0% 0.0060 265.0);
567
+ --color-heading: oklch(96.0% 0.0060 265.0);
568
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
569
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
570
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
571
+
572
+ /* Muted Foreground - Secondary text */
573
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
574
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
575
+
576
+ /* Primary - Brand accent */
577
+ --color-primary: oklch(70.0% 0.1800 250.0);
578
+ --primary: oklch(70.0% 0.1800 250.0);
579
+ --color-accent: oklch(70.0% 0.1800 250.0);
580
+ --accent: oklch(70.0% 0.1800 250.0);
581
+ --color-ring: oklch(70.0% 0.1800 250.0);
582
+ --focus: oklch(70.0% 0.1800 250.0);
583
+
584
+ /* Primary Foreground - Text on primary bg */
585
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
586
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
587
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
588
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
589
+
590
+ /* Secondary - Secondary accent */
591
+ --color-secondary: oklch(68.0% 0.1440 250.0);
592
+ --secondary: oklch(68.0% 0.1440 250.0);
593
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
594
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
595
+
596
+ /* Default - Neutral elements */
597
+ --color-default: oklch(25.0% 0.0060 265.0);
598
+ --default: oklch(25.0% 0.0060 265.0);
599
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
600
+ --default-foreground: oklch(96.0% 0.0060 265.0);
601
+
602
+ /* Default on Surface - Secondary buttons/badges when on a surface */
603
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
604
+
605
+ /* Border - Dividers, borders */
606
+ --color-border: oklch(25.0% 0.0060 265.0);
607
+ --border: oklch(25.0% 0.0060 265.0);
608
+ --color-divider: oklch(25.0% 0.0060 265.0);
609
+ --divider: oklch(25.0% 0.0060 265.0);
610
+
611
+ /* Muted - Muted backgrounds */
612
+ --color-muted: oklch(25.0% 0.0060 265.0);
613
+ --muted: oklch(25.0% 0.0060 265.0);
614
+
615
+ /* Overlay */
616
+ --color-overlay: oklch(20.0% 0.0060 265.0);
617
+ --overlay: oklch(20.0% 0.0060 265.0);
618
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
619
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
620
+
621
+ /* Icon - Icon colors */
622
+ --color-icon: oklch(75.0% 0.1260 250.0);
623
+
624
+ /* Accent Text - For overlays and labels */
625
+ --color-accent-text-overlay: oklch(75.0% 0.0900 250.0);
626
+ --color-accent-text-page: oklch(60.0% 0.0900 250.0);
627
+
628
+ /* Text Selection */
629
+ --color-text-selection: oklch(70.0% 0.0540 250.0) / 20%;
630
+
631
+ /* Canvas Background */
632
+ --color-canvas-bg: #080809;
633
+ }
634
+
635
+ /* ==========================================================================
636
+ RADIX THEME FAMILY
637
+ Hue: 270 | Chroma: 0.16
638
+ ========================================================================== */
639
+
640
+ /* Radix */
641
+ [data-theme='ne-radix'] {
642
+ color-scheme: light;
643
+
644
+ /* =================================================================
645
+ * OKLCH-GENERATED COLORS
646
+ * Theme: Radix | Hue: 270 | Chroma: 0.16
647
+ * ================================================================= */
648
+
649
+ /* Background - Page level */
650
+ --color-background: oklch(97.0% 0.0060 265.0);
651
+ --background: oklch(97.0% 0.0060 265.0);
652
+
653
+ /* Surface - Cards, panels, modals */
654
+ --color-surface: oklch(100.0% 0.0060 265.0);
655
+ --color-card: oklch(100.0% 0.0060 265.0);
656
+ --surface: oklch(100.0% 0.0060 265.0);
657
+
658
+ /* Surface Raised - Popovers, dropdowns */
659
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
660
+ --color-popover: oklch(94.0% 0.0060 265.0);
661
+
662
+ /* Fields - Form inputs */
663
+ --color-field: oklch(100.0% 0.0060 265.0);
664
+ --field: oklch(100.0% 0.0060 265.0);
665
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
666
+
667
+ /* Foreground - Text colors */
668
+ --color-foreground: oklch(15.0% 0.0060 265.0);
669
+ --foreground: oklch(15.0% 0.0060 265.0);
670
+ --color-heading: oklch(15.0% 0.0060 265.0);
671
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
672
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
673
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
674
+
675
+ /* Muted Foreground - Secondary text */
676
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
677
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
678
+
679
+ /* Primary - Brand accent */
680
+ --color-primary: oklch(55.0% 0.1600 270.0);
681
+ --primary: oklch(55.0% 0.1600 270.0);
682
+ --color-accent: oklch(55.0% 0.1600 270.0);
683
+ --accent: oklch(55.0% 0.1600 270.0);
684
+ --color-ring: oklch(55.0% 0.1600 270.0);
685
+ --focus: oklch(55.0% 0.1600 270.0);
686
+
687
+ /* Primary Foreground - Text on primary bg */
688
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
689
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
690
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
691
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
692
+
693
+ /* Secondary - Secondary accent */
694
+ --color-secondary: oklch(45.0% 0.1280 270.0);
695
+ --secondary: oklch(45.0% 0.1280 270.0);
696
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
697
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
698
+
699
+ /* Default - Neutral elements */
700
+ --color-default: oklch(94.0% 0.0060 265.0);
701
+ --default: oklch(94.0% 0.0060 265.0);
702
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
703
+ --default-foreground: oklch(15.0% 0.0060 265.0);
704
+
705
+ /* Default on Surface - Secondary buttons/badges when on a surface */
706
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
707
+
708
+ /* Border - Dividers, borders */
709
+ --color-border: oklch(85.0% 0.0060 265.0);
710
+ --border: oklch(85.0% 0.0060 265.0);
711
+ --color-divider: oklch(85.0% 0.0060 265.0);
712
+ --divider: oklch(85.0% 0.0060 265.0);
713
+
714
+ /* Muted - Muted backgrounds */
715
+ --color-muted: oklch(94.0% 0.0060 265.0);
716
+ --muted: oklch(94.0% 0.0060 265.0);
717
+
718
+ /* Overlay */
719
+ --color-overlay: oklch(100.0% 0.0060 265.0);
720
+ --overlay: oklch(100.0% 0.0060 265.0);
721
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
722
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
723
+
724
+ /* Icon - Icon colors */
725
+ --color-icon: oklch(55.0% 0.1120 270.0);
726
+
727
+ /* Accent Text - For overlays and labels */
728
+ --color-accent-text-overlay: oklch(45.0% 0.0800 270.0);
729
+ --color-accent-text-page: oklch(50.0% 0.0800 270.0);
730
+
731
+ /* Text Selection */
732
+ --color-text-selection: oklch(55.0% 0.0480 270.0) / 15%;
733
+
734
+ /* Canvas Background */
735
+ --color-canvas-bg: #f5f5f5;
736
+ }
737
+ /* Radix Dark */
738
+ .dark[data-theme='ne-radix-dark'],
739
+ [data-theme='ne-radix-dark'] .dark {
740
+ color-scheme: dark;
741
+
742
+ /* =================================================================
743
+ * OKLCH-GENERATED COLORS
744
+ * Theme: Radix Dark | Hue: 270 | Chroma: 0.18
745
+ * ================================================================= */
746
+
747
+ /* Background - Page level */
748
+ --color-background: oklch(12.0% 0.0060 265.0);
749
+ --background: oklch(12.0% 0.0060 265.0);
750
+
751
+ /* Surface - Cards, panels, modals */
752
+ --color-surface: oklch(20.0% 0.0060 265.0);
753
+ --color-card: oklch(20.0% 0.0060 265.0);
754
+ --surface: oklch(20.0% 0.0060 265.0);
755
+
756
+ /* Surface Raised - Popovers, dropdowns */
757
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
758
+ --color-popover: oklch(25.0% 0.0060 265.0);
759
+
760
+ /* Fields - Form inputs */
761
+ --color-field: oklch(27.0% 0.0060 265.0);
762
+ --field: oklch(27.0% 0.0060 265.0);
763
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
764
+
765
+ /* Foreground - Text colors */
766
+ --color-foreground: oklch(96.0% 0.0060 265.0);
767
+ --foreground: oklch(96.0% 0.0060 265.0);
768
+ --color-heading: oklch(96.0% 0.0060 265.0);
769
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
770
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
771
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
772
+
773
+ /* Muted Foreground - Secondary text */
774
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
775
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
776
+
777
+ /* Primary - Brand accent */
778
+ --color-primary: oklch(70.0% 0.1800 270.0);
779
+ --primary: oklch(70.0% 0.1800 270.0);
780
+ --color-accent: oklch(70.0% 0.1800 270.0);
781
+ --accent: oklch(70.0% 0.1800 270.0);
782
+ --color-ring: oklch(70.0% 0.1800 270.0);
783
+ --focus: oklch(70.0% 0.1800 270.0);
784
+
785
+ /* Primary Foreground - Text on primary bg */
786
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
787
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
788
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
789
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
790
+
791
+ /* Secondary - Secondary accent */
792
+ --color-secondary: oklch(68.0% 0.1440 270.0);
793
+ --secondary: oklch(68.0% 0.1440 270.0);
794
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
795
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
796
+
797
+ /* Default - Neutral elements */
798
+ --color-default: oklch(25.0% 0.0060 265.0);
799
+ --default: oklch(25.0% 0.0060 265.0);
800
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
801
+ --default-foreground: oklch(96.0% 0.0060 265.0);
802
+
803
+ /* Default on Surface - Secondary buttons/badges when on a surface */
804
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
805
+
806
+ /* Border - Dividers, borders */
807
+ --color-border: oklch(25.0% 0.0060 265.0);
808
+ --border: oklch(25.0% 0.0060 265.0);
809
+ --color-divider: oklch(25.0% 0.0060 265.0);
810
+ --divider: oklch(25.0% 0.0060 265.0);
811
+
812
+ /* Muted - Muted backgrounds */
813
+ --color-muted: oklch(25.0% 0.0060 265.0);
814
+ --muted: oklch(25.0% 0.0060 265.0);
815
+
816
+ /* Overlay */
817
+ --color-overlay: oklch(20.0% 0.0060 265.0);
818
+ --overlay: oklch(20.0% 0.0060 265.0);
819
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
820
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
821
+
822
+ /* Icon - Icon colors */
823
+ --color-icon: oklch(75.0% 0.1260 270.0);
824
+
825
+ /* Accent Text - For overlays and labels */
826
+ --color-accent-text-overlay: oklch(75.0% 0.0900 270.0);
827
+ --color-accent-text-page: oklch(60.0% 0.0900 270.0);
828
+
829
+ /* Text Selection */
830
+ --color-text-selection: oklch(70.0% 0.0540 270.0) / 20%;
831
+
832
+ /* Canvas Background */
833
+ --color-canvas-bg: #080809;
834
+ }
835
+
836
+ /* ==========================================================================
837
+ STRIPE THEME FAMILY
838
+ Hue: 255 | Chroma: 0.18
839
+ ========================================================================== */
840
+
841
+ /* Stripe */
842
+ [data-theme='ne-stripe'] {
843
+ color-scheme: light;
844
+
845
+ /* =================================================================
846
+ * OKLCH-GENERATED COLORS
847
+ * Theme: Stripe | Hue: 255 | Chroma: 0.18
848
+ * ================================================================= */
849
+
850
+ /* Background - Page level */
851
+ --color-background: oklch(97.0% 0.0060 265.0);
852
+ --background: oklch(97.0% 0.0060 265.0);
853
+
854
+ /* Surface - Cards, panels, modals */
855
+ --color-surface: oklch(100.0% 0.0060 265.0);
856
+ --color-card: oklch(100.0% 0.0060 265.0);
857
+ --surface: oklch(100.0% 0.0060 265.0);
858
+
859
+ /* Surface Raised - Popovers, dropdowns */
860
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
861
+ --color-popover: oklch(94.0% 0.0060 265.0);
862
+
863
+ /* Fields - Form inputs */
864
+ --color-field: oklch(100.0% 0.0060 265.0);
865
+ --field: oklch(100.0% 0.0060 265.0);
866
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
867
+
868
+ /* Foreground - Text colors */
869
+ --color-foreground: oklch(15.0% 0.0060 265.0);
870
+ --foreground: oklch(15.0% 0.0060 265.0);
871
+ --color-heading: oklch(15.0% 0.0060 265.0);
872
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
873
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
874
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
875
+
876
+ /* Muted Foreground - Secondary text */
877
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
878
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
879
+
880
+ /* Primary - Brand accent */
881
+ --color-primary: oklch(55.0% 0.1800 255.0);
882
+ --primary: oklch(55.0% 0.1800 255.0);
883
+ --color-accent: oklch(55.0% 0.1800 255.0);
884
+ --accent: oklch(55.0% 0.1800 255.0);
885
+ --color-ring: oklch(55.0% 0.1800 255.0);
886
+ --focus: oklch(55.0% 0.1800 255.0);
887
+
888
+ /* Primary Foreground - Text on primary bg */
889
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
890
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
891
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
892
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
893
+
894
+ /* Secondary - Secondary accent */
895
+ --color-secondary: oklch(45.0% 0.1440 255.0);
896
+ --secondary: oklch(45.0% 0.1440 255.0);
897
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
898
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
899
+
900
+ /* Default - Neutral elements */
901
+ --color-default: oklch(94.0% 0.0060 265.0);
902
+ --default: oklch(94.0% 0.0060 265.0);
903
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
904
+ --default-foreground: oklch(15.0% 0.0060 265.0);
905
+
906
+ /* Default on Surface - Secondary buttons/badges when on a surface */
907
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
908
+
909
+ /* Border - Dividers, borders */
910
+ --color-border: oklch(85.0% 0.0060 265.0);
911
+ --border: oklch(85.0% 0.0060 265.0);
912
+ --color-divider: oklch(85.0% 0.0060 265.0);
913
+ --divider: oklch(85.0% 0.0060 265.0);
914
+
915
+ /* Muted - Muted backgrounds */
916
+ --color-muted: oklch(94.0% 0.0060 265.0);
917
+ --muted: oklch(94.0% 0.0060 265.0);
918
+
919
+ /* Overlay */
920
+ --color-overlay: oklch(100.0% 0.0060 265.0);
921
+ --overlay: oklch(100.0% 0.0060 265.0);
922
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
923
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
924
+
925
+ /* Icon - Icon colors */
926
+ --color-icon: oklch(55.0% 0.1260 255.0);
927
+
928
+ /* Accent Text - For overlays and labels */
929
+ --color-accent-text-overlay: oklch(45.0% 0.0900 255.0);
930
+ --color-accent-text-page: oklch(50.0% 0.0900 255.0);
931
+
932
+ /* Text Selection */
933
+ --color-text-selection: oklch(55.0% 0.0540 255.0) / 15%;
934
+
935
+ /* Canvas Background */
936
+ --color-canvas-bg: #f5f5f5;
937
+ }
938
+ /* Stripe Dark */
939
+ .dark[data-theme='ne-stripe-dark'],
940
+ [data-theme='ne-stripe-dark'] .dark {
941
+ color-scheme: dark;
942
+
943
+ /* =================================================================
944
+ * OKLCH-GENERATED COLORS
945
+ * Theme: Stripe Dark | Hue: 255 | Chroma: 0.18
946
+ * ================================================================= */
947
+
948
+ /* Background - Page level */
949
+ --color-background: oklch(12.0% 0.0060 265.0);
950
+ --background: oklch(12.0% 0.0060 265.0);
951
+
952
+ /* Surface - Cards, panels, modals */
953
+ --color-surface: oklch(20.0% 0.0060 265.0);
954
+ --color-card: oklch(20.0% 0.0060 265.0);
955
+ --surface: oklch(20.0% 0.0060 265.0);
956
+
957
+ /* Surface Raised - Popovers, dropdowns */
958
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
959
+ --color-popover: oklch(25.0% 0.0060 265.0);
960
+
961
+ /* Fields - Form inputs */
962
+ --color-field: oklch(27.0% 0.0060 265.0);
963
+ --field: oklch(27.0% 0.0060 265.0);
964
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
965
+
966
+ /* Foreground - Text colors */
967
+ --color-foreground: oklch(96.0% 0.0060 265.0);
968
+ --foreground: oklch(96.0% 0.0060 265.0);
969
+ --color-heading: oklch(96.0% 0.0060 265.0);
970
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
971
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
972
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
973
+
974
+ /* Muted Foreground - Secondary text */
975
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
976
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
977
+
978
+ /* Primary - Brand accent */
979
+ --color-primary: oklch(70.0% 0.1800 255.0);
980
+ --primary: oklch(70.0% 0.1800 255.0);
981
+ --color-accent: oklch(70.0% 0.1800 255.0);
982
+ --accent: oklch(70.0% 0.1800 255.0);
983
+ --color-ring: oklch(70.0% 0.1800 255.0);
984
+ --focus: oklch(70.0% 0.1800 255.0);
985
+
986
+ /* Primary Foreground - Text on primary bg */
987
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
988
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
989
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
990
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
991
+
992
+ /* Secondary - Secondary accent */
993
+ --color-secondary: oklch(68.0% 0.1440 255.0);
994
+ --secondary: oklch(68.0% 0.1440 255.0);
995
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
996
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
997
+
998
+ /* Default - Neutral elements */
999
+ --color-default: oklch(25.0% 0.0060 265.0);
1000
+ --default: oklch(25.0% 0.0060 265.0);
1001
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
1002
+ --default-foreground: oklch(96.0% 0.0060 265.0);
1003
+
1004
+ /* Default on Surface - Secondary buttons/badges when on a surface */
1005
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
1006
+
1007
+ /* Border - Dividers, borders */
1008
+ --color-border: oklch(25.0% 0.0060 265.0);
1009
+ --border: oklch(25.0% 0.0060 265.0);
1010
+ --color-divider: oklch(25.0% 0.0060 265.0);
1011
+ --divider: oklch(25.0% 0.0060 265.0);
1012
+
1013
+ /* Muted - Muted backgrounds */
1014
+ --color-muted: oklch(25.0% 0.0060 265.0);
1015
+ --muted: oklch(25.0% 0.0060 265.0);
1016
+
1017
+ /* Overlay */
1018
+ --color-overlay: oklch(20.0% 0.0060 265.0);
1019
+ --overlay: oklch(20.0% 0.0060 265.0);
1020
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
1021
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
1022
+
1023
+ /* Icon - Icon colors */
1024
+ --color-icon: oklch(75.0% 0.1260 255.0);
1025
+
1026
+ /* Accent Text - For overlays and labels */
1027
+ --color-accent-text-overlay: oklch(75.0% 0.0900 255.0);
1028
+ --color-accent-text-page: oklch(60.0% 0.0900 255.0);
1029
+
1030
+ /* Text Selection */
1031
+ --color-text-selection: oklch(70.0% 0.0540 255.0) / 20%;
1032
+
1033
+ /* Canvas Background */
1034
+ --color-canvas-bg: #080809;
1035
+ }
1036
+
1037
+ /* ==========================================================================
1038
+ GITHUB THEME FAMILY
1039
+ Hue: 145 | Chroma: 0.18
1040
+ ========================================================================== */
1041
+
1042
+ /* GitHub */
1043
+ [data-theme='ne-github'] {
1044
+ color-scheme: light;
1045
+
1046
+ /* =================================================================
1047
+ * OKLCH-GENERATED COLORS
1048
+ * Theme: GitHub | Hue: 145 | Chroma: 0.18
1049
+ * ================================================================= */
1050
+
1051
+ /* Background - Page level */
1052
+ --color-background: oklch(97.0% 0.0060 265.0);
1053
+ --background: oklch(97.0% 0.0060 265.0);
1054
+
1055
+ /* Surface - Cards, panels, modals */
1056
+ --color-surface: oklch(100.0% 0.0060 265.0);
1057
+ --color-card: oklch(100.0% 0.0060 265.0);
1058
+ --surface: oklch(100.0% 0.0060 265.0);
1059
+
1060
+ /* Surface Raised - Popovers, dropdowns */
1061
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
1062
+ --color-popover: oklch(94.0% 0.0060 265.0);
1063
+
1064
+ /* Fields - Form inputs */
1065
+ --color-field: oklch(100.0% 0.0060 265.0);
1066
+ --field: oklch(100.0% 0.0060 265.0);
1067
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
1068
+
1069
+ /* Foreground - Text colors */
1070
+ --color-foreground: oklch(15.0% 0.0060 265.0);
1071
+ --foreground: oklch(15.0% 0.0060 265.0);
1072
+ --color-heading: oklch(15.0% 0.0060 265.0);
1073
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
1074
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
1075
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
1076
+
1077
+ /* Muted Foreground - Secondary text */
1078
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
1079
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
1080
+
1081
+ /* Primary - Brand accent */
1082
+ --color-primary: oklch(55.0% 0.1800 145.0);
1083
+ --primary: oklch(55.0% 0.1800 145.0);
1084
+ --color-accent: oklch(55.0% 0.1800 145.0);
1085
+ --accent: oklch(55.0% 0.1800 145.0);
1086
+ --color-ring: oklch(55.0% 0.1800 145.0);
1087
+ --focus: oklch(55.0% 0.1800 145.0);
1088
+
1089
+ /* Primary Foreground - Text on primary bg */
1090
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
1091
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
1092
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
1093
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
1094
+
1095
+ /* Secondary - Secondary accent */
1096
+ --color-secondary: oklch(45.0% 0.1440 145.0);
1097
+ --secondary: oklch(45.0% 0.1440 145.0);
1098
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
1099
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
1100
+
1101
+ /* Default - Neutral elements */
1102
+ --color-default: oklch(94.0% 0.0060 265.0);
1103
+ --default: oklch(94.0% 0.0060 265.0);
1104
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
1105
+ --default-foreground: oklch(15.0% 0.0060 265.0);
1106
+
1107
+ /* Default on Surface - Secondary buttons/badges when on a surface */
1108
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
1109
+
1110
+ /* Border - Dividers, borders */
1111
+ --color-border: oklch(85.0% 0.0060 265.0);
1112
+ --border: oklch(85.0% 0.0060 265.0);
1113
+ --color-divider: oklch(85.0% 0.0060 265.0);
1114
+ --divider: oklch(85.0% 0.0060 265.0);
1115
+
1116
+ /* Muted - Muted backgrounds */
1117
+ --color-muted: oklch(94.0% 0.0060 265.0);
1118
+ --muted: oklch(94.0% 0.0060 265.0);
1119
+
1120
+ /* Overlay */
1121
+ --color-overlay: oklch(100.0% 0.0060 265.0);
1122
+ --overlay: oklch(100.0% 0.0060 265.0);
1123
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
1124
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
1125
+
1126
+ /* Icon - Icon colors */
1127
+ --color-icon: oklch(55.0% 0.1260 145.0);
1128
+
1129
+ /* Accent Text - For overlays and labels */
1130
+ --color-accent-text-overlay: oklch(45.0% 0.0900 145.0);
1131
+ --color-accent-text-page: oklch(50.0% 0.0900 145.0);
1132
+
1133
+ /* Text Selection */
1134
+ --color-text-selection: oklch(55.0% 0.0540 145.0) / 15%;
1135
+
1136
+ /* Canvas Background */
1137
+ --color-canvas-bg: #f5f5f5;
1138
+ }
1139
+ /* GitHub Dark */
1140
+ .dark[data-theme='ne-github-dark'],
1141
+ [data-theme='ne-github-dark'] .dark {
1142
+ color-scheme: dark;
1143
+
1144
+ /* =================================================================
1145
+ * OKLCH-GENERATED COLORS
1146
+ * Theme: GitHub Dark | Hue: 145 | Chroma: 0.18
1147
+ * ================================================================= */
1148
+
1149
+ /* Background - Page level */
1150
+ --color-background: oklch(12.0% 0.0060 265.0);
1151
+ --background: oklch(12.0% 0.0060 265.0);
1152
+
1153
+ /* Surface - Cards, panels, modals */
1154
+ --color-surface: oklch(20.0% 0.0060 265.0);
1155
+ --color-card: oklch(20.0% 0.0060 265.0);
1156
+ --surface: oklch(20.0% 0.0060 265.0);
1157
+
1158
+ /* Surface Raised - Popovers, dropdowns */
1159
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
1160
+ --color-popover: oklch(25.0% 0.0060 265.0);
1161
+
1162
+ /* Fields - Form inputs */
1163
+ --color-field: oklch(27.0% 0.0060 265.0);
1164
+ --field: oklch(27.0% 0.0060 265.0);
1165
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
1166
+
1167
+ /* Foreground - Text colors */
1168
+ --color-foreground: oklch(96.0% 0.0060 265.0);
1169
+ --foreground: oklch(96.0% 0.0060 265.0);
1170
+ --color-heading: oklch(96.0% 0.0060 265.0);
1171
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
1172
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
1173
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
1174
+
1175
+ /* Muted Foreground - Secondary text */
1176
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
1177
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
1178
+
1179
+ /* Primary - Brand accent */
1180
+ --color-primary: oklch(70.0% 0.1800 145.0);
1181
+ --primary: oklch(70.0% 0.1800 145.0);
1182
+ --color-accent: oklch(70.0% 0.1800 145.0);
1183
+ --accent: oklch(70.0% 0.1800 145.0);
1184
+ --color-ring: oklch(70.0% 0.1800 145.0);
1185
+ --focus: oklch(70.0% 0.1800 145.0);
1186
+
1187
+ /* Primary Foreground - Text on primary bg */
1188
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
1189
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
1190
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
1191
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
1192
+
1193
+ /* Secondary - Secondary accent */
1194
+ --color-secondary: oklch(68.0% 0.1440 145.0);
1195
+ --secondary: oklch(68.0% 0.1440 145.0);
1196
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
1197
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
1198
+
1199
+ /* Default - Neutral elements */
1200
+ --color-default: oklch(25.0% 0.0060 265.0);
1201
+ --default: oklch(25.0% 0.0060 265.0);
1202
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
1203
+ --default-foreground: oklch(96.0% 0.0060 265.0);
1204
+
1205
+ /* Default on Surface - Secondary buttons/badges when on a surface */
1206
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
1207
+
1208
+ /* Border - Dividers, borders */
1209
+ --color-border: oklch(25.0% 0.0060 265.0);
1210
+ --border: oklch(25.0% 0.0060 265.0);
1211
+ --color-divider: oklch(25.0% 0.0060 265.0);
1212
+ --divider: oklch(25.0% 0.0060 265.0);
1213
+
1214
+ /* Muted - Muted backgrounds */
1215
+ --color-muted: oklch(25.0% 0.0060 265.0);
1216
+ --muted: oklch(25.0% 0.0060 265.0);
1217
+
1218
+ /* Overlay */
1219
+ --color-overlay: oklch(20.0% 0.0060 265.0);
1220
+ --overlay: oklch(20.0% 0.0060 265.0);
1221
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
1222
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
1223
+
1224
+ /* Icon - Icon colors */
1225
+ --color-icon: oklch(75.0% 0.1260 145.0);
1226
+
1227
+ /* Accent Text - For overlays and labels */
1228
+ --color-accent-text-overlay: oklch(75.0% 0.0900 145.0);
1229
+ --color-accent-text-page: oklch(60.0% 0.0900 145.0);
1230
+
1231
+ /* Text Selection */
1232
+ --color-text-selection: oklch(70.0% 0.0540 145.0) / 20%;
1233
+
1234
+ /* Canvas Background */
1235
+ --color-canvas-bg: #080809;
1236
+ }
1237
+
1238
+ /* ==========================================================================
1239
+ VERCEL THEME FAMILY
1240
+ Hue: 0 | Chroma: 0
1241
+ ========================================================================== */
1242
+
1243
+ /* Vercel */
1244
+ [data-theme='ne-vercel'] {
1245
+ color-scheme: light;
1246
+
1247
+ /* =================================================================
1248
+ * OKLCH-GENERATED COLORS
1249
+ * Theme: Vercel | Hue: 0 | Chroma: 0
1250
+ * ================================================================= */
1251
+
1252
+ /* Background - Page level */
1253
+ --color-background: oklch(97.0% 0.0060 265.0);
1254
+ --background: oklch(97.0% 0.0060 265.0);
1255
+
1256
+ /* Surface - Cards, panels, modals */
1257
+ --color-surface: oklch(100.0% 0.0060 265.0);
1258
+ --color-card: oklch(100.0% 0.0060 265.0);
1259
+ --surface: oklch(100.0% 0.0060 265.0);
1260
+
1261
+ /* Surface Raised - Popovers, dropdowns */
1262
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
1263
+ --color-popover: oklch(94.0% 0.0060 265.0);
1264
+
1265
+ /* Fields - Form inputs */
1266
+ --color-field: oklch(100.0% 0.0060 265.0);
1267
+ --field: oklch(100.0% 0.0060 265.0);
1268
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
1269
+
1270
+ /* Foreground - Text colors */
1271
+ --color-foreground: oklch(15.0% 0.0060 265.0);
1272
+ --foreground: oklch(15.0% 0.0060 265.0);
1273
+ --color-heading: oklch(15.0% 0.0060 265.0);
1274
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
1275
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
1276
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
1277
+
1278
+ /* Muted Foreground - Secondary text */
1279
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
1280
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
1281
+
1282
+ /* Primary - Brand accent */
1283
+ --color-primary: oklch(55.0% 0.0000 0.0);
1284
+ --primary: oklch(55.0% 0.0000 0.0);
1285
+ --color-accent: oklch(55.0% 0.0000 0.0);
1286
+ --accent: oklch(55.0% 0.0000 0.0);
1287
+ --color-ring: oklch(55.0% 0.0000 0.0);
1288
+ --focus: oklch(55.0% 0.0000 0.0);
1289
+
1290
+ /* Primary Foreground - Text on primary bg */
1291
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
1292
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
1293
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
1294
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
1295
+
1296
+ /* Secondary - Secondary accent */
1297
+ --color-secondary: oklch(45.0% 0.0000 0.0);
1298
+ --secondary: oklch(45.0% 0.0000 0.0);
1299
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
1300
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
1301
+
1302
+ /* Default - Neutral elements */
1303
+ --color-default: oklch(94.0% 0.0060 265.0);
1304
+ --default: oklch(94.0% 0.0060 265.0);
1305
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
1306
+ --default-foreground: oklch(15.0% 0.0060 265.0);
1307
+
1308
+ /* Default on Surface - Secondary buttons/badges when on a surface */
1309
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
1310
+
1311
+ /* Border - Dividers, borders */
1312
+ --color-border: oklch(85.0% 0.0060 265.0);
1313
+ --border: oklch(85.0% 0.0060 265.0);
1314
+ --color-divider: oklch(85.0% 0.0060 265.0);
1315
+ --divider: oklch(85.0% 0.0060 265.0);
1316
+
1317
+ /* Muted - Muted backgrounds */
1318
+ --color-muted: oklch(94.0% 0.0060 265.0);
1319
+ --muted: oklch(94.0% 0.0060 265.0);
1320
+
1321
+ /* Overlay */
1322
+ --color-overlay: oklch(100.0% 0.0060 265.0);
1323
+ --overlay: oklch(100.0% 0.0060 265.0);
1324
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
1325
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
1326
+
1327
+ /* Icon - Icon colors */
1328
+ --color-icon: oklch(55.0% 0.0000 0.0);
1329
+
1330
+ /* Accent Text - For overlays and labels */
1331
+ --color-accent-text-overlay: oklch(45.0% 0.0000 0.0);
1332
+ --color-accent-text-page: oklch(50.0% 0.0000 0.0);
1333
+
1334
+ /* Text Selection */
1335
+ --color-text-selection: oklch(55.0% 0.0000 0.0) / 15%;
1336
+
1337
+ /* Canvas Background */
1338
+ --color-canvas-bg: #f5f5f5;
1339
+ }
1340
+ /* Vercel Dark */
1341
+ .dark[data-theme='ne-vercel-dark'],
1342
+ [data-theme='ne-vercel-dark'] .dark {
1343
+ color-scheme: dark;
1344
+
1345
+ /* =================================================================
1346
+ * OKLCH-GENERATED COLORS
1347
+ * Theme: Vercel Dark | Hue: 0 | Chroma: 0
1348
+ * ================================================================= */
1349
+
1350
+ /* Background - Page level */
1351
+ --color-background: oklch(12.0% 0.0060 265.0);
1352
+ --background: oklch(12.0% 0.0060 265.0);
1353
+
1354
+ /* Surface - Cards, panels, modals */
1355
+ --color-surface: oklch(20.0% 0.0060 265.0);
1356
+ --color-card: oklch(20.0% 0.0060 265.0);
1357
+ --surface: oklch(20.0% 0.0060 265.0);
1358
+
1359
+ /* Surface Raised - Popovers, dropdowns */
1360
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
1361
+ --color-popover: oklch(25.0% 0.0060 265.0);
1362
+
1363
+ /* Fields - Form inputs */
1364
+ --color-field: oklch(27.0% 0.0060 265.0);
1365
+ --field: oklch(27.0% 0.0060 265.0);
1366
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
1367
+
1368
+ /* Foreground - Text colors */
1369
+ --color-foreground: oklch(96.0% 0.0060 265.0);
1370
+ --foreground: oklch(96.0% 0.0060 265.0);
1371
+ --color-heading: oklch(96.0% 0.0060 265.0);
1372
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
1373
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
1374
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
1375
+
1376
+ /* Muted Foreground - Secondary text */
1377
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
1378
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
1379
+
1380
+ /* Primary - Brand accent */
1381
+ --color-primary: oklch(70.0% 0.0000 0.0);
1382
+ --primary: oklch(70.0% 0.0000 0.0);
1383
+ --color-accent: oklch(70.0% 0.0000 0.0);
1384
+ --accent: oklch(70.0% 0.0000 0.0);
1385
+ --color-ring: oklch(70.0% 0.0000 0.0);
1386
+ --focus: oklch(70.0% 0.0000 0.0);
1387
+
1388
+ /* Primary Foreground - Text on primary bg */
1389
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
1390
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
1391
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
1392
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
1393
+
1394
+ /* Secondary - Secondary accent */
1395
+ --color-secondary: oklch(68.0% 0.0000 0.0);
1396
+ --secondary: oklch(68.0% 0.0000 0.0);
1397
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
1398
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
1399
+
1400
+ /* Default - Neutral elements */
1401
+ --color-default: oklch(25.0% 0.0060 265.0);
1402
+ --default: oklch(25.0% 0.0060 265.0);
1403
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
1404
+ --default-foreground: oklch(96.0% 0.0060 265.0);
1405
+
1406
+ /* Default on Surface - Secondary buttons/badges when on a surface */
1407
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
1408
+
1409
+ /* Border - Dividers, borders */
1410
+ --color-border: oklch(25.0% 0.0060 265.0);
1411
+ --border: oklch(25.0% 0.0060 265.0);
1412
+ --color-divider: oklch(25.0% 0.0060 265.0);
1413
+ --divider: oklch(25.0% 0.0060 265.0);
1414
+
1415
+ /* Muted - Muted backgrounds */
1416
+ --color-muted: oklch(25.0% 0.0060 265.0);
1417
+ --muted: oklch(25.0% 0.0060 265.0);
1418
+
1419
+ /* Overlay */
1420
+ --color-overlay: oklch(20.0% 0.0060 265.0);
1421
+ --overlay: oklch(20.0% 0.0060 265.0);
1422
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
1423
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
1424
+
1425
+ /* Icon - Icon colors */
1426
+ --color-icon: oklch(75.0% 0.0000 0.0);
1427
+
1428
+ /* Accent Text - For overlays and labels */
1429
+ --color-accent-text-overlay: oklch(75.0% 0.0000 0.0);
1430
+ --color-accent-text-page: oklch(60.0% 0.0000 0.0);
1431
+
1432
+ /* Text Selection */
1433
+ --color-text-selection: oklch(70.0% 0.0000 0.0) / 20%;
1434
+
1435
+ /* Canvas Background */
1436
+ --color-canvas-bg: #080809;
1437
+ }
1438
+
1439
+ /* ==========================================================================
1440
+ NOTION THEME FAMILY
1441
+ Hue: 0 | Chroma: 0
1442
+ ========================================================================== */
1443
+
1444
+ /* Notion */
1445
+ [data-theme='ne-notion'] {
1446
+ color-scheme: light;
1447
+
1448
+ /* =================================================================
1449
+ * OKLCH-GENERATED COLORS
1450
+ * Theme: Notion | Hue: 0 | Chroma: 0
1451
+ * ================================================================= */
1452
+
1453
+ /* Background - Page level */
1454
+ --color-background: oklch(97.0% 0.0060 265.0);
1455
+ --background: oklch(97.0% 0.0060 265.0);
1456
+
1457
+ /* Surface - Cards, panels, modals */
1458
+ --color-surface: oklch(100.0% 0.0060 265.0);
1459
+ --color-card: oklch(100.0% 0.0060 265.0);
1460
+ --surface: oklch(100.0% 0.0060 265.0);
1461
+
1462
+ /* Surface Raised - Popovers, dropdowns */
1463
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
1464
+ --color-popover: oklch(94.0% 0.0060 265.0);
1465
+
1466
+ /* Fields - Form inputs */
1467
+ --color-field: oklch(100.0% 0.0060 265.0);
1468
+ --field: oklch(100.0% 0.0060 265.0);
1469
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
1470
+
1471
+ /* Foreground - Text colors */
1472
+ --color-foreground: oklch(15.0% 0.0060 265.0);
1473
+ --foreground: oklch(15.0% 0.0060 265.0);
1474
+ --color-heading: oklch(15.0% 0.0060 265.0);
1475
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
1476
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
1477
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
1478
+
1479
+ /* Muted Foreground - Secondary text */
1480
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
1481
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
1482
+
1483
+ /* Primary - Brand accent */
1484
+ --color-primary: oklch(55.0% 0.0000 0.0);
1485
+ --primary: oklch(55.0% 0.0000 0.0);
1486
+ --color-accent: oklch(55.0% 0.0000 0.0);
1487
+ --accent: oklch(55.0% 0.0000 0.0);
1488
+ --color-ring: oklch(55.0% 0.0000 0.0);
1489
+ --focus: oklch(55.0% 0.0000 0.0);
1490
+
1491
+ /* Primary Foreground - Text on primary bg */
1492
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
1493
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
1494
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
1495
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
1496
+
1497
+ /* Secondary - Secondary accent */
1498
+ --color-secondary: oklch(45.0% 0.0000 0.0);
1499
+ --secondary: oklch(45.0% 0.0000 0.0);
1500
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
1501
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
1502
+
1503
+ /* Default - Neutral elements */
1504
+ --color-default: oklch(94.0% 0.0060 265.0);
1505
+ --default: oklch(94.0% 0.0060 265.0);
1506
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
1507
+ --default-foreground: oklch(15.0% 0.0060 265.0);
1508
+
1509
+ /* Default on Surface - Secondary buttons/badges when on a surface */
1510
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
1511
+
1512
+ /* Border - Dividers, borders */
1513
+ --color-border: oklch(85.0% 0.0060 265.0);
1514
+ --border: oklch(85.0% 0.0060 265.0);
1515
+ --color-divider: oklch(85.0% 0.0060 265.0);
1516
+ --divider: oklch(85.0% 0.0060 265.0);
1517
+
1518
+ /* Muted - Muted backgrounds */
1519
+ --color-muted: oklch(94.0% 0.0060 265.0);
1520
+ --muted: oklch(94.0% 0.0060 265.0);
1521
+
1522
+ /* Overlay */
1523
+ --color-overlay: oklch(100.0% 0.0060 265.0);
1524
+ --overlay: oklch(100.0% 0.0060 265.0);
1525
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
1526
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
1527
+
1528
+ /* Icon - Icon colors */
1529
+ --color-icon: oklch(55.0% 0.0000 0.0);
1530
+
1531
+ /* Accent Text - For overlays and labels */
1532
+ --color-accent-text-overlay: oklch(45.0% 0.0000 0.0);
1533
+ --color-accent-text-page: oklch(50.0% 0.0000 0.0);
1534
+
1535
+ /* Text Selection */
1536
+ --color-text-selection: oklch(55.0% 0.0000 0.0) / 15%;
1537
+
1538
+ /* Canvas Background */
1539
+ --color-canvas-bg: #f5f5f5;
1540
+
1541
+ /* =================================================================
1542
+ * SEMANTIC RADIUS - Preset: sharp
1543
+ * ================================================================= */
1544
+ --radius-button: var(--radius-sm);
1545
+ --radius-input: var(--radius-sm);
1546
+ --radius-card: var(--radius-sm);
1547
+ --radius-modal: var(--radius-md);
1548
+ --radius-badge: var(--radius-sm);
1549
+ --radius-avatar: var(--radius-md);
1550
+ --radius-tooltip: 0;
1551
+ --radius-image: var(--radius-sm);
1552
+ }
1553
+ /* Notion Dark */
1554
+ .dark[data-theme='ne-notion-dark'],
1555
+ [data-theme='ne-notion-dark'] .dark {
1556
+ color-scheme: dark;
1557
+
1558
+ /* =================================================================
1559
+ * OKLCH-GENERATED COLORS
1560
+ * Theme: Notion Dark | Hue: 0 | Chroma: 0
1561
+ * ================================================================= */
1562
+
1563
+ /* Background - Page level */
1564
+ --color-background: oklch(12.0% 0.0060 265.0);
1565
+ --background: oklch(12.0% 0.0060 265.0);
1566
+
1567
+ /* Surface - Cards, panels, modals */
1568
+ --color-surface: oklch(20.0% 0.0060 265.0);
1569
+ --color-card: oklch(20.0% 0.0060 265.0);
1570
+ --surface: oklch(20.0% 0.0060 265.0);
1571
+
1572
+ /* Surface Raised - Popovers, dropdowns */
1573
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
1574
+ --color-popover: oklch(25.0% 0.0060 265.0);
1575
+
1576
+ /* Fields - Form inputs */
1577
+ --color-field: oklch(27.0% 0.0060 265.0);
1578
+ --field: oklch(27.0% 0.0060 265.0);
1579
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
1580
+
1581
+ /* Foreground - Text colors */
1582
+ --color-foreground: oklch(96.0% 0.0060 265.0);
1583
+ --foreground: oklch(96.0% 0.0060 265.0);
1584
+ --color-heading: oklch(96.0% 0.0060 265.0);
1585
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
1586
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
1587
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
1588
+
1589
+ /* Muted Foreground - Secondary text */
1590
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
1591
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
1592
+
1593
+ /* Primary - Brand accent */
1594
+ --color-primary: oklch(70.0% 0.0000 0.0);
1595
+ --primary: oklch(70.0% 0.0000 0.0);
1596
+ --color-accent: oklch(70.0% 0.0000 0.0);
1597
+ --accent: oklch(70.0% 0.0000 0.0);
1598
+ --color-ring: oklch(70.0% 0.0000 0.0);
1599
+ --focus: oklch(70.0% 0.0000 0.0);
1600
+
1601
+ /* Primary Foreground - Text on primary bg */
1602
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
1603
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
1604
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
1605
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
1606
+
1607
+ /* Secondary - Secondary accent */
1608
+ --color-secondary: oklch(68.0% 0.0000 0.0);
1609
+ --secondary: oklch(68.0% 0.0000 0.0);
1610
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
1611
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
1612
+
1613
+ /* Default - Neutral elements */
1614
+ --color-default: oklch(25.0% 0.0060 265.0);
1615
+ --default: oklch(25.0% 0.0060 265.0);
1616
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
1617
+ --default-foreground: oklch(96.0% 0.0060 265.0);
1618
+
1619
+ /* Default on Surface - Secondary buttons/badges when on a surface */
1620
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
1621
+
1622
+ /* Border - Dividers, borders */
1623
+ --color-border: oklch(25.0% 0.0060 265.0);
1624
+ --border: oklch(25.0% 0.0060 265.0);
1625
+ --color-divider: oklch(25.0% 0.0060 265.0);
1626
+ --divider: oklch(25.0% 0.0060 265.0);
1627
+
1628
+ /* Muted - Muted backgrounds */
1629
+ --color-muted: oklch(25.0% 0.0060 265.0);
1630
+ --muted: oklch(25.0% 0.0060 265.0);
1631
+
1632
+ /* Overlay */
1633
+ --color-overlay: oklch(20.0% 0.0060 265.0);
1634
+ --overlay: oklch(20.0% 0.0060 265.0);
1635
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
1636
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
1637
+
1638
+ /* Icon - Icon colors */
1639
+ --color-icon: oklch(75.0% 0.0000 0.0);
1640
+
1641
+ /* Accent Text - For overlays and labels */
1642
+ --color-accent-text-overlay: oklch(75.0% 0.0000 0.0);
1643
+ --color-accent-text-page: oklch(60.0% 0.0000 0.0);
1644
+
1645
+ /* Text Selection */
1646
+ --color-text-selection: oklch(70.0% 0.0000 0.0) / 20%;
1647
+
1648
+ /* Canvas Background */
1649
+ --color-canvas-bg: #080809;
1650
+
1651
+ /* =================================================================
1652
+ * SEMANTIC RADIUS - Preset: sharp
1653
+ * ================================================================= */
1654
+ --radius-button: var(--radius-sm);
1655
+ --radius-input: var(--radius-sm);
1656
+ --radius-card: var(--radius-sm);
1657
+ --radius-modal: var(--radius-md);
1658
+ --radius-badge: var(--radius-sm);
1659
+ --radius-avatar: var(--radius-md);
1660
+ --radius-tooltip: 0;
1661
+ --radius-image: var(--radius-sm);
1662
+ }
1663
+
1664
+ /* ==========================================================================
1665
+ MEDIUM THEME FAMILY
1666
+ Hue: 145 | Chroma: 0.2
1667
+ ========================================================================== */
1668
+
1669
+ /* Medium */
1670
+ [data-theme='ne-medium'] {
1671
+ color-scheme: light;
1672
+
1673
+ /* =================================================================
1674
+ * OKLCH-GENERATED COLORS
1675
+ * Theme: Medium | Hue: 145 | Chroma: 0.2
1676
+ * ================================================================= */
1677
+
1678
+ /* Background - Page level */
1679
+ --color-background: oklch(97.0% 0.0060 265.0);
1680
+ --background: oklch(97.0% 0.0060 265.0);
1681
+
1682
+ /* Surface - Cards, panels, modals */
1683
+ --color-surface: oklch(100.0% 0.0060 265.0);
1684
+ --color-card: oklch(100.0% 0.0060 265.0);
1685
+ --surface: oklch(100.0% 0.0060 265.0);
1686
+
1687
+ /* Surface Raised - Popovers, dropdowns */
1688
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
1689
+ --color-popover: oklch(94.0% 0.0060 265.0);
1690
+
1691
+ /* Fields - Form inputs */
1692
+ --color-field: oklch(100.0% 0.0060 265.0);
1693
+ --field: oklch(100.0% 0.0060 265.0);
1694
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
1695
+
1696
+ /* Foreground - Text colors */
1697
+ --color-foreground: oklch(15.0% 0.0060 265.0);
1698
+ --foreground: oklch(15.0% 0.0060 265.0);
1699
+ --color-heading: oklch(15.0% 0.0060 265.0);
1700
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
1701
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
1702
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
1703
+
1704
+ /* Muted Foreground - Secondary text */
1705
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
1706
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
1707
+
1708
+ /* Primary - Brand accent */
1709
+ --color-primary: oklch(55.0% 0.2000 145.0);
1710
+ --primary: oklch(55.0% 0.2000 145.0);
1711
+ --color-accent: oklch(55.0% 0.2000 145.0);
1712
+ --accent: oklch(55.0% 0.2000 145.0);
1713
+ --color-ring: oklch(55.0% 0.2000 145.0);
1714
+ --focus: oklch(55.0% 0.2000 145.0);
1715
+
1716
+ /* Primary Foreground - Text on primary bg */
1717
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
1718
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
1719
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
1720
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
1721
+
1722
+ /* Secondary - Secondary accent */
1723
+ --color-secondary: oklch(45.0% 0.1600 145.0);
1724
+ --secondary: oklch(45.0% 0.1600 145.0);
1725
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
1726
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
1727
+
1728
+ /* Default - Neutral elements */
1729
+ --color-default: oklch(94.0% 0.0060 265.0);
1730
+ --default: oklch(94.0% 0.0060 265.0);
1731
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
1732
+ --default-foreground: oklch(15.0% 0.0060 265.0);
1733
+
1734
+ /* Default on Surface - Secondary buttons/badges when on a surface */
1735
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
1736
+
1737
+ /* Border - Dividers, borders */
1738
+ --color-border: oklch(85.0% 0.0060 265.0);
1739
+ --border: oklch(85.0% 0.0060 265.0);
1740
+ --color-divider: oklch(85.0% 0.0060 265.0);
1741
+ --divider: oklch(85.0% 0.0060 265.0);
1742
+
1743
+ /* Muted - Muted backgrounds */
1744
+ --color-muted: oklch(94.0% 0.0060 265.0);
1745
+ --muted: oklch(94.0% 0.0060 265.0);
1746
+
1747
+ /* Overlay */
1748
+ --color-overlay: oklch(100.0% 0.0060 265.0);
1749
+ --overlay: oklch(100.0% 0.0060 265.0);
1750
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
1751
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
1752
+
1753
+ /* Icon - Icon colors */
1754
+ --color-icon: oklch(55.0% 0.1400 145.0);
1755
+
1756
+ /* Accent Text - For overlays and labels */
1757
+ --color-accent-text-overlay: oklch(45.0% 0.1000 145.0);
1758
+ --color-accent-text-page: oklch(50.0% 0.1000 145.0);
1759
+
1760
+ /* Text Selection */
1761
+ --color-text-selection: oklch(55.0% 0.0600 145.0) / 15%;
1762
+
1763
+ /* Canvas Background */
1764
+ --color-canvas-bg: #f5f5f5;
1765
+
1766
+ /* =================================================================
1767
+ * SEMANTIC RADIUS - Preset: sharp
1768
+ * ================================================================= */
1769
+ --radius-button: var(--radius-sm);
1770
+ --radius-input: var(--radius-sm);
1771
+ --radius-card: var(--radius-sm);
1772
+ --radius-modal: var(--radius-md);
1773
+ --radius-badge: var(--radius-sm);
1774
+ --radius-avatar: var(--radius-md);
1775
+ --radius-tooltip: 0;
1776
+ --radius-image: var(--radius-sm);
1777
+ }
1778
+ /* Medium Dark */
1779
+ .dark[data-theme='ne-medium-dark'],
1780
+ [data-theme='ne-medium-dark'] .dark {
1781
+ color-scheme: dark;
1782
+
1783
+ /* =================================================================
1784
+ * OKLCH-GENERATED COLORS
1785
+ * Theme: Medium Dark | Hue: 145 | Chroma: 0.2
1786
+ * ================================================================= */
1787
+
1788
+ /* Background - Page level */
1789
+ --color-background: oklch(12.0% 0.0060 265.0);
1790
+ --background: oklch(12.0% 0.0060 265.0);
1791
+
1792
+ /* Surface - Cards, panels, modals */
1793
+ --color-surface: oklch(20.0% 0.0060 265.0);
1794
+ --color-card: oklch(20.0% 0.0060 265.0);
1795
+ --surface: oklch(20.0% 0.0060 265.0);
1796
+
1797
+ /* Surface Raised - Popovers, dropdowns */
1798
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
1799
+ --color-popover: oklch(25.0% 0.0060 265.0);
1800
+
1801
+ /* Fields - Form inputs */
1802
+ --color-field: oklch(27.0% 0.0060 265.0);
1803
+ --field: oklch(27.0% 0.0060 265.0);
1804
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
1805
+
1806
+ /* Foreground - Text colors */
1807
+ --color-foreground: oklch(96.0% 0.0060 265.0);
1808
+ --foreground: oklch(96.0% 0.0060 265.0);
1809
+ --color-heading: oklch(96.0% 0.0060 265.0);
1810
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
1811
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
1812
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
1813
+
1814
+ /* Muted Foreground - Secondary text */
1815
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
1816
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
1817
+
1818
+ /* Primary - Brand accent */
1819
+ --color-primary: oklch(70.0% 0.2000 145.0);
1820
+ --primary: oklch(70.0% 0.2000 145.0);
1821
+ --color-accent: oklch(70.0% 0.2000 145.0);
1822
+ --accent: oklch(70.0% 0.2000 145.0);
1823
+ --color-ring: oklch(70.0% 0.2000 145.0);
1824
+ --focus: oklch(70.0% 0.2000 145.0);
1825
+
1826
+ /* Primary Foreground - Text on primary bg */
1827
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
1828
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
1829
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
1830
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
1831
+
1832
+ /* Secondary - Secondary accent */
1833
+ --color-secondary: oklch(68.0% 0.1600 145.0);
1834
+ --secondary: oklch(68.0% 0.1600 145.0);
1835
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
1836
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
1837
+
1838
+ /* Default - Neutral elements */
1839
+ --color-default: oklch(25.0% 0.0060 265.0);
1840
+ --default: oklch(25.0% 0.0060 265.0);
1841
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
1842
+ --default-foreground: oklch(96.0% 0.0060 265.0);
1843
+
1844
+ /* Default on Surface - Secondary buttons/badges when on a surface */
1845
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
1846
+
1847
+ /* Border - Dividers, borders */
1848
+ --color-border: oklch(25.0% 0.0060 265.0);
1849
+ --border: oklch(25.0% 0.0060 265.0);
1850
+ --color-divider: oklch(25.0% 0.0060 265.0);
1851
+ --divider: oklch(25.0% 0.0060 265.0);
1852
+
1853
+ /* Muted - Muted backgrounds */
1854
+ --color-muted: oklch(25.0% 0.0060 265.0);
1855
+ --muted: oklch(25.0% 0.0060 265.0);
1856
+
1857
+ /* Overlay */
1858
+ --color-overlay: oklch(20.0% 0.0060 265.0);
1859
+ --overlay: oklch(20.0% 0.0060 265.0);
1860
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
1861
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
1862
+
1863
+ /* Icon - Icon colors */
1864
+ --color-icon: oklch(75.0% 0.1400 145.0);
1865
+
1866
+ /* Accent Text - For overlays and labels */
1867
+ --color-accent-text-overlay: oklch(75.0% 0.1000 145.0);
1868
+ --color-accent-text-page: oklch(60.0% 0.1000 145.0);
1869
+
1870
+ /* Text Selection */
1871
+ --color-text-selection: oklch(70.0% 0.0600 145.0) / 20%;
1872
+
1873
+ /* Canvas Background */
1874
+ --color-canvas-bg: #080809;
1875
+
1876
+ /* =================================================================
1877
+ * SEMANTIC RADIUS - Preset: sharp
1878
+ * ================================================================= */
1879
+ --radius-button: var(--radius-sm);
1880
+ --radius-input: var(--radius-sm);
1881
+ --radius-card: var(--radius-sm);
1882
+ --radius-modal: var(--radius-md);
1883
+ --radius-badge: var(--radius-sm);
1884
+ --radius-avatar: var(--radius-md);
1885
+ --radius-tooltip: 0;
1886
+ --radius-image: var(--radius-sm);
1887
+ }
1888
+
1889
+ /* ==========================================================================
1890
+ FRAMER THEME FAMILY
1891
+ Hue: 200 | Chroma: 0.2
1892
+ ========================================================================== */
1893
+
1894
+ /* Framer */
1895
+ [data-theme='ne-framer'] {
1896
+ color-scheme: light;
1897
+
1898
+ /* =================================================================
1899
+ * OKLCH-GENERATED COLORS
1900
+ * Theme: Framer | Hue: 200 | Chroma: 0.2
1901
+ * ================================================================= */
1902
+
1903
+ /* Background - Page level */
1904
+ --color-background: oklch(97.0% 0.0060 265.0);
1905
+ --background: oklch(97.0% 0.0060 265.0);
1906
+
1907
+ /* Surface - Cards, panels, modals */
1908
+ --color-surface: oklch(100.0% 0.0060 265.0);
1909
+ --color-card: oklch(100.0% 0.0060 265.0);
1910
+ --surface: oklch(100.0% 0.0060 265.0);
1911
+
1912
+ /* Surface Raised - Popovers, dropdowns */
1913
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
1914
+ --color-popover: oklch(94.0% 0.0060 265.0);
1915
+
1916
+ /* Fields - Form inputs */
1917
+ --color-field: oklch(100.0% 0.0060 265.0);
1918
+ --field: oklch(100.0% 0.0060 265.0);
1919
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
1920
+
1921
+ /* Foreground - Text colors */
1922
+ --color-foreground: oklch(15.0% 0.0060 265.0);
1923
+ --foreground: oklch(15.0% 0.0060 265.0);
1924
+ --color-heading: oklch(15.0% 0.0060 265.0);
1925
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
1926
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
1927
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
1928
+
1929
+ /* Muted Foreground - Secondary text */
1930
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
1931
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
1932
+
1933
+ /* Primary - Brand accent */
1934
+ --color-primary: oklch(55.0% 0.2000 200.0);
1935
+ --primary: oklch(55.0% 0.2000 200.0);
1936
+ --color-accent: oklch(55.0% 0.2000 200.0);
1937
+ --accent: oklch(55.0% 0.2000 200.0);
1938
+ --color-ring: oklch(55.0% 0.2000 200.0);
1939
+ --focus: oklch(55.0% 0.2000 200.0);
1940
+
1941
+ /* Primary Foreground - Text on primary bg */
1942
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
1943
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
1944
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
1945
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
1946
+
1947
+ /* Secondary - Secondary accent */
1948
+ --color-secondary: oklch(45.0% 0.1600 200.0);
1949
+ --secondary: oklch(45.0% 0.1600 200.0);
1950
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
1951
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
1952
+
1953
+ /* Default - Neutral elements */
1954
+ --color-default: oklch(94.0% 0.0060 265.0);
1955
+ --default: oklch(94.0% 0.0060 265.0);
1956
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
1957
+ --default-foreground: oklch(15.0% 0.0060 265.0);
1958
+
1959
+ /* Default on Surface - Secondary buttons/badges when on a surface */
1960
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
1961
+
1962
+ /* Border - Dividers, borders */
1963
+ --color-border: oklch(85.0% 0.0060 265.0);
1964
+ --border: oklch(85.0% 0.0060 265.0);
1965
+ --color-divider: oklch(85.0% 0.0060 265.0);
1966
+ --divider: oklch(85.0% 0.0060 265.0);
1967
+
1968
+ /* Muted - Muted backgrounds */
1969
+ --color-muted: oklch(94.0% 0.0060 265.0);
1970
+ --muted: oklch(94.0% 0.0060 265.0);
1971
+
1972
+ /* Overlay */
1973
+ --color-overlay: oklch(100.0% 0.0060 265.0);
1974
+ --overlay: oklch(100.0% 0.0060 265.0);
1975
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
1976
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
1977
+
1978
+ /* Icon - Icon colors */
1979
+ --color-icon: oklch(55.0% 0.1400 200.0);
1980
+
1981
+ /* Accent Text - For overlays and labels */
1982
+ --color-accent-text-overlay: oklch(45.0% 0.1000 200.0);
1983
+ --color-accent-text-page: oklch(50.0% 0.1000 200.0);
1984
+
1985
+ /* Text Selection */
1986
+ --color-text-selection: oklch(55.0% 0.0600 200.0) / 15%;
1987
+
1988
+ /* Canvas Background */
1989
+ --color-canvas-bg: #f5f5f5;
1990
+
1991
+ /* =================================================================
1992
+ * SEMANTIC RADIUS - Preset: playful
1993
+ * ================================================================= */
1994
+ --radius-button: var(--radius-2xl);
1995
+ --radius-input: var(--radius-xl);
1996
+ --radius-card: var(--radius-3xl);
1997
+ --radius-modal: var(--radius-3xl);
1998
+ --radius-badge: var(--radius-full);
1999
+ --radius-avatar: var(--radius-full);
2000
+ --radius-tooltip: var(--radius-xl);
2001
+ --radius-image: var(--radius-2xl);
2002
+ }
2003
+ /* Framer Dark */
2004
+ .dark[data-theme='ne-framer-dark'],
2005
+ [data-theme='ne-framer-dark'] .dark {
2006
+ color-scheme: dark;
2007
+
2008
+ /* =================================================================
2009
+ * OKLCH-GENERATED COLORS
2010
+ * Theme: Framer Dark | Hue: 200 | Chroma: 0.2
2011
+ * ================================================================= */
2012
+
2013
+ /* Background - Page level */
2014
+ --color-background: oklch(12.0% 0.0060 265.0);
2015
+ --background: oklch(12.0% 0.0060 265.0);
2016
+
2017
+ /* Surface - Cards, panels, modals */
2018
+ --color-surface: oklch(20.0% 0.0060 265.0);
2019
+ --color-card: oklch(20.0% 0.0060 265.0);
2020
+ --surface: oklch(20.0% 0.0060 265.0);
2021
+
2022
+ /* Surface Raised - Popovers, dropdowns */
2023
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
2024
+ --color-popover: oklch(25.0% 0.0060 265.0);
2025
+
2026
+ /* Fields - Form inputs */
2027
+ --color-field: oklch(27.0% 0.0060 265.0);
2028
+ --field: oklch(27.0% 0.0060 265.0);
2029
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
2030
+
2031
+ /* Foreground - Text colors */
2032
+ --color-foreground: oklch(96.0% 0.0060 265.0);
2033
+ --foreground: oklch(96.0% 0.0060 265.0);
2034
+ --color-heading: oklch(96.0% 0.0060 265.0);
2035
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
2036
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
2037
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
2038
+
2039
+ /* Muted Foreground - Secondary text */
2040
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
2041
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
2042
+
2043
+ /* Primary - Brand accent */
2044
+ --color-primary: oklch(70.0% 0.2000 200.0);
2045
+ --primary: oklch(70.0% 0.2000 200.0);
2046
+ --color-accent: oklch(70.0% 0.2000 200.0);
2047
+ --accent: oklch(70.0% 0.2000 200.0);
2048
+ --color-ring: oklch(70.0% 0.2000 200.0);
2049
+ --focus: oklch(70.0% 0.2000 200.0);
2050
+
2051
+ /* Primary Foreground - Text on primary bg */
2052
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
2053
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
2054
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
2055
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
2056
+
2057
+ /* Secondary - Secondary accent */
2058
+ --color-secondary: oklch(68.0% 0.1600 200.0);
2059
+ --secondary: oklch(68.0% 0.1600 200.0);
2060
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
2061
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
2062
+
2063
+ /* Default - Neutral elements */
2064
+ --color-default: oklch(25.0% 0.0060 265.0);
2065
+ --default: oklch(25.0% 0.0060 265.0);
2066
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
2067
+ --default-foreground: oklch(96.0% 0.0060 265.0);
2068
+
2069
+ /* Default on Surface - Secondary buttons/badges when on a surface */
2070
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
2071
+
2072
+ /* Border - Dividers, borders */
2073
+ --color-border: oklch(25.0% 0.0060 265.0);
2074
+ --border: oklch(25.0% 0.0060 265.0);
2075
+ --color-divider: oklch(25.0% 0.0060 265.0);
2076
+ --divider: oklch(25.0% 0.0060 265.0);
2077
+
2078
+ /* Muted - Muted backgrounds */
2079
+ --color-muted: oklch(25.0% 0.0060 265.0);
2080
+ --muted: oklch(25.0% 0.0060 265.0);
2081
+
2082
+ /* Overlay */
2083
+ --color-overlay: oklch(20.0% 0.0060 265.0);
2084
+ --overlay: oklch(20.0% 0.0060 265.0);
2085
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
2086
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
2087
+
2088
+ /* Icon - Icon colors */
2089
+ --color-icon: oklch(75.0% 0.1400 200.0);
2090
+
2091
+ /* Accent Text - For overlays and labels */
2092
+ --color-accent-text-overlay: oklch(75.0% 0.1000 200.0);
2093
+ --color-accent-text-page: oklch(60.0% 0.1000 200.0);
2094
+
2095
+ /* Text Selection */
2096
+ --color-text-selection: oklch(70.0% 0.0600 200.0) / 20%;
2097
+
2098
+ /* Canvas Background */
2099
+ --color-canvas-bg: #080809;
2100
+
2101
+ /* =================================================================
2102
+ * SEMANTIC RADIUS - Preset: playful
2103
+ * ================================================================= */
2104
+ --radius-button: var(--radius-2xl);
2105
+ --radius-input: var(--radius-xl);
2106
+ --radius-card: var(--radius-3xl);
2107
+ --radius-modal: var(--radius-3xl);
2108
+ --radius-badge: var(--radius-full);
2109
+ --radius-avatar: var(--radius-full);
2110
+ --radius-tooltip: var(--radius-xl);
2111
+ --radius-image: var(--radius-2xl);
2112
+ }
2113
+
2114
+ /* ==========================================================================
2115
+ FIGMA THEME FAMILY
2116
+ Hue: 195 | Chroma: 0.18
2117
+ ========================================================================== */
2118
+
2119
+ /* Figma */
2120
+ [data-theme='ne-figma'] {
2121
+ color-scheme: light;
2122
+
2123
+ /* =================================================================
2124
+ * OKLCH-GENERATED COLORS
2125
+ * Theme: Figma | Hue: 195 | Chroma: 0.18
2126
+ * ================================================================= */
2127
+
2128
+ /* Background - Page level */
2129
+ --color-background: oklch(97.0% 0.0060 265.0);
2130
+ --background: oklch(97.0% 0.0060 265.0);
2131
+
2132
+ /* Surface - Cards, panels, modals */
2133
+ --color-surface: oklch(100.0% 0.0060 265.0);
2134
+ --color-card: oklch(100.0% 0.0060 265.0);
2135
+ --surface: oklch(100.0% 0.0060 265.0);
2136
+
2137
+ /* Surface Raised - Popovers, dropdowns */
2138
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
2139
+ --color-popover: oklch(94.0% 0.0060 265.0);
2140
+
2141
+ /* Fields - Form inputs */
2142
+ --color-field: oklch(100.0% 0.0060 265.0);
2143
+ --field: oklch(100.0% 0.0060 265.0);
2144
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
2145
+
2146
+ /* Foreground - Text colors */
2147
+ --color-foreground: oklch(15.0% 0.0060 265.0);
2148
+ --foreground: oklch(15.0% 0.0060 265.0);
2149
+ --color-heading: oklch(15.0% 0.0060 265.0);
2150
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
2151
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
2152
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
2153
+
2154
+ /* Muted Foreground - Secondary text */
2155
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
2156
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
2157
+
2158
+ /* Primary - Brand accent */
2159
+ --color-primary: oklch(55.0% 0.1800 195.0);
2160
+ --primary: oklch(55.0% 0.1800 195.0);
2161
+ --color-accent: oklch(55.0% 0.1800 195.0);
2162
+ --accent: oklch(55.0% 0.1800 195.0);
2163
+ --color-ring: oklch(55.0% 0.1800 195.0);
2164
+ --focus: oklch(55.0% 0.1800 195.0);
2165
+
2166
+ /* Primary Foreground - Text on primary bg */
2167
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
2168
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
2169
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
2170
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
2171
+
2172
+ /* Secondary - Secondary accent */
2173
+ --color-secondary: oklch(45.0% 0.1440 195.0);
2174
+ --secondary: oklch(45.0% 0.1440 195.0);
2175
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
2176
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
2177
+
2178
+ /* Default - Neutral elements */
2179
+ --color-default: oklch(94.0% 0.0060 265.0);
2180
+ --default: oklch(94.0% 0.0060 265.0);
2181
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
2182
+ --default-foreground: oklch(15.0% 0.0060 265.0);
2183
+
2184
+ /* Default on Surface - Secondary buttons/badges when on a surface */
2185
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
2186
+
2187
+ /* Border - Dividers, borders */
2188
+ --color-border: oklch(85.0% 0.0060 265.0);
2189
+ --border: oklch(85.0% 0.0060 265.0);
2190
+ --color-divider: oklch(85.0% 0.0060 265.0);
2191
+ --divider: oklch(85.0% 0.0060 265.0);
2192
+
2193
+ /* Muted - Muted backgrounds */
2194
+ --color-muted: oklch(94.0% 0.0060 265.0);
2195
+ --muted: oklch(94.0% 0.0060 265.0);
2196
+
2197
+ /* Overlay */
2198
+ --color-overlay: oklch(100.0% 0.0060 265.0);
2199
+ --overlay: oklch(100.0% 0.0060 265.0);
2200
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
2201
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
2202
+
2203
+ /* Icon - Icon colors */
2204
+ --color-icon: oklch(55.0% 0.1260 195.0);
2205
+
2206
+ /* Accent Text - For overlays and labels */
2207
+ --color-accent-text-overlay: oklch(45.0% 0.0900 195.0);
2208
+ --color-accent-text-page: oklch(50.0% 0.0900 195.0);
2209
+
2210
+ /* Text Selection */
2211
+ --color-text-selection: oklch(55.0% 0.0540 195.0) / 15%;
2212
+
2213
+ /* Canvas Background */
2214
+ --color-canvas-bg: #f5f5f5;
2215
+
2216
+ /* =================================================================
2217
+ * SEMANTIC RADIUS - Preset: sharp
2218
+ * ================================================================= */
2219
+ --radius-button: var(--radius-sm);
2220
+ --radius-input: var(--radius-sm);
2221
+ --radius-card: var(--radius-sm);
2222
+ --radius-modal: var(--radius-md);
2223
+ --radius-badge: var(--radius-sm);
2224
+ --radius-avatar: var(--radius-md);
2225
+ --radius-tooltip: 0;
2226
+ --radius-image: var(--radius-sm);
2227
+ }
2228
+ /* Figma Dark */
2229
+ .dark[data-theme='ne-figma-dark'],
2230
+ [data-theme='ne-figma-dark'] .dark {
2231
+ color-scheme: dark;
2232
+
2233
+ /* =================================================================
2234
+ * OKLCH-GENERATED COLORS
2235
+ * Theme: Figma Dark | Hue: 195 | Chroma: 0.18
2236
+ * ================================================================= */
2237
+
2238
+ /* Background - Page level */
2239
+ --color-background: oklch(12.0% 0.0060 265.0);
2240
+ --background: oklch(12.0% 0.0060 265.0);
2241
+
2242
+ /* Surface - Cards, panels, modals */
2243
+ --color-surface: oklch(20.0% 0.0060 265.0);
2244
+ --color-card: oklch(20.0% 0.0060 265.0);
2245
+ --surface: oklch(20.0% 0.0060 265.0);
2246
+
2247
+ /* Surface Raised - Popovers, dropdowns */
2248
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
2249
+ --color-popover: oklch(25.0% 0.0060 265.0);
2250
+
2251
+ /* Fields - Form inputs */
2252
+ --color-field: oklch(27.0% 0.0060 265.0);
2253
+ --field: oklch(27.0% 0.0060 265.0);
2254
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
2255
+
2256
+ /* Foreground - Text colors */
2257
+ --color-foreground: oklch(96.0% 0.0060 265.0);
2258
+ --foreground: oklch(96.0% 0.0060 265.0);
2259
+ --color-heading: oklch(96.0% 0.0060 265.0);
2260
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
2261
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
2262
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
2263
+
2264
+ /* Muted Foreground - Secondary text */
2265
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
2266
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
2267
+
2268
+ /* Primary - Brand accent */
2269
+ --color-primary: oklch(70.0% 0.1800 195.0);
2270
+ --primary: oklch(70.0% 0.1800 195.0);
2271
+ --color-accent: oklch(70.0% 0.1800 195.0);
2272
+ --accent: oklch(70.0% 0.1800 195.0);
2273
+ --color-ring: oklch(70.0% 0.1800 195.0);
2274
+ --focus: oklch(70.0% 0.1800 195.0);
2275
+
2276
+ /* Primary Foreground - Text on primary bg */
2277
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
2278
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
2279
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
2280
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
2281
+
2282
+ /* Secondary - Secondary accent */
2283
+ --color-secondary: oklch(68.0% 0.1440 195.0);
2284
+ --secondary: oklch(68.0% 0.1440 195.0);
2285
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
2286
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
2287
+
2288
+ /* Default - Neutral elements */
2289
+ --color-default: oklch(25.0% 0.0060 265.0);
2290
+ --default: oklch(25.0% 0.0060 265.0);
2291
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
2292
+ --default-foreground: oklch(96.0% 0.0060 265.0);
2293
+
2294
+ /* Default on Surface - Secondary buttons/badges when on a surface */
2295
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
2296
+
2297
+ /* Border - Dividers, borders */
2298
+ --color-border: oklch(25.0% 0.0060 265.0);
2299
+ --border: oklch(25.0% 0.0060 265.0);
2300
+ --color-divider: oklch(25.0% 0.0060 265.0);
2301
+ --divider: oklch(25.0% 0.0060 265.0);
2302
+
2303
+ /* Muted - Muted backgrounds */
2304
+ --color-muted: oklch(25.0% 0.0060 265.0);
2305
+ --muted: oklch(25.0% 0.0060 265.0);
2306
+
2307
+ /* Overlay */
2308
+ --color-overlay: oklch(20.0% 0.0060 265.0);
2309
+ --overlay: oklch(20.0% 0.0060 265.0);
2310
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
2311
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
2312
+
2313
+ /* Icon - Icon colors */
2314
+ --color-icon: oklch(75.0% 0.1260 195.0);
2315
+
2316
+ /* Accent Text - For overlays and labels */
2317
+ --color-accent-text-overlay: oklch(75.0% 0.0900 195.0);
2318
+ --color-accent-text-page: oklch(60.0% 0.0900 195.0);
2319
+
2320
+ /* Text Selection */
2321
+ --color-text-selection: oklch(70.0% 0.0540 195.0) / 20%;
2322
+
2323
+ /* Canvas Background */
2324
+ --color-canvas-bg: #080809;
2325
+
2326
+ /* =================================================================
2327
+ * SEMANTIC RADIUS - Preset: sharp
2328
+ * ================================================================= */
2329
+ --radius-button: var(--radius-sm);
2330
+ --radius-input: var(--radius-sm);
2331
+ --radius-card: var(--radius-sm);
2332
+ --radius-modal: var(--radius-md);
2333
+ --radius-badge: var(--radius-sm);
2334
+ --radius-avatar: var(--radius-md);
2335
+ --radius-tooltip: 0;
2336
+ --radius-image: var(--radius-sm);
2337
+ }
2338
+
2339
+ /* ==========================================================================
2340
+ APPLE THEME FAMILY
2341
+ Hue: 220 | Chroma: 0.18
2342
+ ========================================================================== */
2343
+
2344
+ /* Apple */
2345
+ [data-theme='ne-apple'] {
2346
+ color-scheme: light;
2347
+
2348
+ /* =================================================================
2349
+ * OKLCH-GENERATED COLORS
2350
+ * Theme: Apple | Hue: 220 | Chroma: 0.18
2351
+ * ================================================================= */
2352
+
2353
+ /* Background - Page level */
2354
+ --color-background: oklch(97.0% 0.0060 265.0);
2355
+ --background: oklch(97.0% 0.0060 265.0);
2356
+
2357
+ /* Surface - Cards, panels, modals */
2358
+ --color-surface: oklch(100.0% 0.0060 265.0);
2359
+ --color-card: oklch(100.0% 0.0060 265.0);
2360
+ --surface: oklch(100.0% 0.0060 265.0);
2361
+
2362
+ /* Surface Raised - Popovers, dropdowns */
2363
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
2364
+ --color-popover: oklch(94.0% 0.0060 265.0);
2365
+
2366
+ /* Fields - Form inputs */
2367
+ --color-field: oklch(100.0% 0.0060 265.0);
2368
+ --field: oklch(100.0% 0.0060 265.0);
2369
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
2370
+
2371
+ /* Foreground - Text colors */
2372
+ --color-foreground: oklch(15.0% 0.0060 265.0);
2373
+ --foreground: oklch(15.0% 0.0060 265.0);
2374
+ --color-heading: oklch(15.0% 0.0060 265.0);
2375
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
2376
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
2377
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
2378
+
2379
+ /* Muted Foreground - Secondary text */
2380
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
2381
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
2382
+
2383
+ /* Primary - Brand accent */
2384
+ --color-primary: oklch(55.0% 0.1800 220.0);
2385
+ --primary: oklch(55.0% 0.1800 220.0);
2386
+ --color-accent: oklch(55.0% 0.1800 220.0);
2387
+ --accent: oklch(55.0% 0.1800 220.0);
2388
+ --color-ring: oklch(55.0% 0.1800 220.0);
2389
+ --focus: oklch(55.0% 0.1800 220.0);
2390
+
2391
+ /* Primary Foreground - Text on primary bg */
2392
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
2393
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
2394
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
2395
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
2396
+
2397
+ /* Secondary - Secondary accent */
2398
+ --color-secondary: oklch(45.0% 0.1440 220.0);
2399
+ --secondary: oklch(45.0% 0.1440 220.0);
2400
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
2401
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
2402
+
2403
+ /* Default - Neutral elements */
2404
+ --color-default: oklch(94.0% 0.0060 265.0);
2405
+ --default: oklch(94.0% 0.0060 265.0);
2406
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
2407
+ --default-foreground: oklch(15.0% 0.0060 265.0);
2408
+
2409
+ /* Default on Surface - Secondary buttons/badges when on a surface */
2410
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
2411
+
2412
+ /* Border - Dividers, borders */
2413
+ --color-border: oklch(85.0% 0.0060 265.0);
2414
+ --border: oklch(85.0% 0.0060 265.0);
2415
+ --color-divider: oklch(85.0% 0.0060 265.0);
2416
+ --divider: oklch(85.0% 0.0060 265.0);
2417
+
2418
+ /* Muted - Muted backgrounds */
2419
+ --color-muted: oklch(94.0% 0.0060 265.0);
2420
+ --muted: oklch(94.0% 0.0060 265.0);
2421
+
2422
+ /* Overlay */
2423
+ --color-overlay: oklch(100.0% 0.0060 265.0);
2424
+ --overlay: oklch(100.0% 0.0060 265.0);
2425
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
2426
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
2427
+
2428
+ /* Icon - Icon colors */
2429
+ --color-icon: oklch(55.0% 0.1260 220.0);
2430
+
2431
+ /* Accent Text - For overlays and labels */
2432
+ --color-accent-text-overlay: oklch(45.0% 0.0900 220.0);
2433
+ --color-accent-text-page: oklch(50.0% 0.0900 220.0);
2434
+
2435
+ /* Text Selection */
2436
+ --color-text-selection: oklch(55.0% 0.0540 220.0) / 15%;
2437
+
2438
+ /* Canvas Background */
2439
+ --color-canvas-bg: #f5f5f5;
2440
+
2441
+ /* =================================================================
2442
+ * SEMANTIC RADIUS - Preset: soft
2443
+ * ================================================================= */
2444
+ --radius-button: var(--radius-full);
2445
+ --radius-input: var(--radius-xl);
2446
+ --radius-card: var(--radius-2xl);
2447
+ --radius-modal: var(--radius-3xl);
2448
+ --radius-badge: var(--radius-full);
2449
+ --radius-avatar: var(--radius-full);
2450
+ --radius-tooltip: var(--radius-lg);
2451
+ --radius-image: var(--radius-xl);
2452
+ }
2453
+ /* Apple Dark */
2454
+ .dark[data-theme='ne-apple-dark'],
2455
+ [data-theme='ne-apple-dark'] .dark {
2456
+ color-scheme: dark;
2457
+
2458
+ /* =================================================================
2459
+ * OKLCH-GENERATED COLORS
2460
+ * Theme: Apple Dark | Hue: 220 | Chroma: 0.18
2461
+ * ================================================================= */
2462
+
2463
+ /* Background - Page level */
2464
+ --color-background: oklch(12.0% 0.0060 265.0);
2465
+ --background: oklch(12.0% 0.0060 265.0);
2466
+
2467
+ /* Surface - Cards, panels, modals */
2468
+ --color-surface: oklch(20.0% 0.0060 265.0);
2469
+ --color-card: oklch(20.0% 0.0060 265.0);
2470
+ --surface: oklch(20.0% 0.0060 265.0);
2471
+
2472
+ /* Surface Raised - Popovers, dropdowns */
2473
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
2474
+ --color-popover: oklch(25.0% 0.0060 265.0);
2475
+
2476
+ /* Fields - Form inputs */
2477
+ --color-field: oklch(27.0% 0.0060 265.0);
2478
+ --field: oklch(27.0% 0.0060 265.0);
2479
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
2480
+
2481
+ /* Foreground - Text colors */
2482
+ --color-foreground: oklch(96.0% 0.0060 265.0);
2483
+ --foreground: oklch(96.0% 0.0060 265.0);
2484
+ --color-heading: oklch(96.0% 0.0060 265.0);
2485
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
2486
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
2487
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
2488
+
2489
+ /* Muted Foreground - Secondary text */
2490
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
2491
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
2492
+
2493
+ /* Primary - Brand accent */
2494
+ --color-primary: oklch(70.0% 0.1800 220.0);
2495
+ --primary: oklch(70.0% 0.1800 220.0);
2496
+ --color-accent: oklch(70.0% 0.1800 220.0);
2497
+ --accent: oklch(70.0% 0.1800 220.0);
2498
+ --color-ring: oklch(70.0% 0.1800 220.0);
2499
+ --focus: oklch(70.0% 0.1800 220.0);
2500
+
2501
+ /* Primary Foreground - Text on primary bg */
2502
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
2503
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
2504
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
2505
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
2506
+
2507
+ /* Secondary - Secondary accent */
2508
+ --color-secondary: oklch(68.0% 0.1440 220.0);
2509
+ --secondary: oklch(68.0% 0.1440 220.0);
2510
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
2511
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
2512
+
2513
+ /* Default - Neutral elements */
2514
+ --color-default: oklch(25.0% 0.0060 265.0);
2515
+ --default: oklch(25.0% 0.0060 265.0);
2516
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
2517
+ --default-foreground: oklch(96.0% 0.0060 265.0);
2518
+
2519
+ /* Default on Surface - Secondary buttons/badges when on a surface */
2520
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
2521
+
2522
+ /* Border - Dividers, borders */
2523
+ --color-border: oklch(25.0% 0.0060 265.0);
2524
+ --border: oklch(25.0% 0.0060 265.0);
2525
+ --color-divider: oklch(25.0% 0.0060 265.0);
2526
+ --divider: oklch(25.0% 0.0060 265.0);
2527
+
2528
+ /* Muted - Muted backgrounds */
2529
+ --color-muted: oklch(25.0% 0.0060 265.0);
2530
+ --muted: oklch(25.0% 0.0060 265.0);
2531
+
2532
+ /* Overlay */
2533
+ --color-overlay: oklch(20.0% 0.0060 265.0);
2534
+ --overlay: oklch(20.0% 0.0060 265.0);
2535
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
2536
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
2537
+
2538
+ /* Icon - Icon colors */
2539
+ --color-icon: oklch(75.0% 0.1260 220.0);
2540
+
2541
+ /* Accent Text - For overlays and labels */
2542
+ --color-accent-text-overlay: oklch(75.0% 0.0900 220.0);
2543
+ --color-accent-text-page: oklch(60.0% 0.0900 220.0);
2544
+
2545
+ /* Text Selection */
2546
+ --color-text-selection: oklch(70.0% 0.0540 220.0) / 20%;
2547
+
2548
+ /* Canvas Background */
2549
+ --color-canvas-bg: #080809;
2550
+
2551
+ /* =================================================================
2552
+ * SEMANTIC RADIUS - Preset: soft
2553
+ * ================================================================= */
2554
+ --radius-button: var(--radius-full);
2555
+ --radius-input: var(--radius-xl);
2556
+ --radius-card: var(--radius-2xl);
2557
+ --radius-modal: var(--radius-3xl);
2558
+ --radius-badge: var(--radius-full);
2559
+ --radius-avatar: var(--radius-full);
2560
+ --radius-tooltip: var(--radius-lg);
2561
+ --radius-image: var(--radius-xl);
2562
+ }
2563
+
2564
+ /* ==========================================================================
2565
+ TAILWIND THEME FAMILY
2566
+ Hue: 190 | Chroma: 0.18
2567
+ ========================================================================== */
2568
+
2569
+ /* Tailwind */
2570
+ [data-theme='ne-tailwind'] {
2571
+ color-scheme: light;
2572
+
2573
+ /* =================================================================
2574
+ * OKLCH-GENERATED COLORS
2575
+ * Theme: Tailwind | Hue: 190 | Chroma: 0.18
2576
+ * ================================================================= */
2577
+
2578
+ /* Background - Page level */
2579
+ --color-background: oklch(97.0% 0.0060 265.0);
2580
+ --background: oklch(97.0% 0.0060 265.0);
2581
+
2582
+ /* Surface - Cards, panels, modals */
2583
+ --color-surface: oklch(100.0% 0.0060 265.0);
2584
+ --color-card: oklch(100.0% 0.0060 265.0);
2585
+ --surface: oklch(100.0% 0.0060 265.0);
2586
+
2587
+ /* Surface Raised - Popovers, dropdowns */
2588
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
2589
+ --color-popover: oklch(94.0% 0.0060 265.0);
2590
+
2591
+ /* Fields - Form inputs */
2592
+ --color-field: oklch(100.0% 0.0060 265.0);
2593
+ --field: oklch(100.0% 0.0060 265.0);
2594
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
2595
+
2596
+ /* Foreground - Text colors */
2597
+ --color-foreground: oklch(15.0% 0.0060 265.0);
2598
+ --foreground: oklch(15.0% 0.0060 265.0);
2599
+ --color-heading: oklch(15.0% 0.0060 265.0);
2600
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
2601
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
2602
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
2603
+
2604
+ /* Muted Foreground - Secondary text */
2605
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
2606
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
2607
+
2608
+ /* Primary - Brand accent */
2609
+ --color-primary: oklch(55.0% 0.1800 190.0);
2610
+ --primary: oklch(55.0% 0.1800 190.0);
2611
+ --color-accent: oklch(55.0% 0.1800 190.0);
2612
+ --accent: oklch(55.0% 0.1800 190.0);
2613
+ --color-ring: oklch(55.0% 0.1800 190.0);
2614
+ --focus: oklch(55.0% 0.1800 190.0);
2615
+
2616
+ /* Primary Foreground - Text on primary bg */
2617
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
2618
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
2619
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
2620
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
2621
+
2622
+ /* Secondary - Secondary accent */
2623
+ --color-secondary: oklch(45.0% 0.1440 190.0);
2624
+ --secondary: oklch(45.0% 0.1440 190.0);
2625
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
2626
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
2627
+
2628
+ /* Default - Neutral elements */
2629
+ --color-default: oklch(94.0% 0.0060 265.0);
2630
+ --default: oklch(94.0% 0.0060 265.0);
2631
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
2632
+ --default-foreground: oklch(15.0% 0.0060 265.0);
2633
+
2634
+ /* Default on Surface - Secondary buttons/badges when on a surface */
2635
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
2636
+
2637
+ /* Border - Dividers, borders */
2638
+ --color-border: oklch(85.0% 0.0060 265.0);
2639
+ --border: oklch(85.0% 0.0060 265.0);
2640
+ --color-divider: oklch(85.0% 0.0060 265.0);
2641
+ --divider: oklch(85.0% 0.0060 265.0);
2642
+
2643
+ /* Muted - Muted backgrounds */
2644
+ --color-muted: oklch(94.0% 0.0060 265.0);
2645
+ --muted: oklch(94.0% 0.0060 265.0);
2646
+
2647
+ /* Overlay */
2648
+ --color-overlay: oklch(100.0% 0.0060 265.0);
2649
+ --overlay: oklch(100.0% 0.0060 265.0);
2650
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
2651
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
2652
+
2653
+ /* Icon - Icon colors */
2654
+ --color-icon: oklch(55.0% 0.1260 190.0);
2655
+
2656
+ /* Accent Text - For overlays and labels */
2657
+ --color-accent-text-overlay: oklch(45.0% 0.0900 190.0);
2658
+ --color-accent-text-page: oklch(50.0% 0.0900 190.0);
2659
+
2660
+ /* Text Selection */
2661
+ --color-text-selection: oklch(55.0% 0.0540 190.0) / 15%;
2662
+
2663
+ /* Canvas Background */
2664
+ --color-canvas-bg: #f5f5f5;
2665
+ }
2666
+ /* Tailwind Dark */
2667
+ .dark[data-theme='ne-tailwind-dark'],
2668
+ [data-theme='ne-tailwind-dark'] .dark {
2669
+ color-scheme: dark;
2670
+
2671
+ /* =================================================================
2672
+ * OKLCH-GENERATED COLORS
2673
+ * Theme: Tailwind Dark | Hue: 190 | Chroma: 0.2
2674
+ * ================================================================= */
2675
+
2676
+ /* Background - Page level */
2677
+ --color-background: oklch(12.0% 0.0060 265.0);
2678
+ --background: oklch(12.0% 0.0060 265.0);
2679
+
2680
+ /* Surface - Cards, panels, modals */
2681
+ --color-surface: oklch(20.0% 0.0060 265.0);
2682
+ --color-card: oklch(20.0% 0.0060 265.0);
2683
+ --surface: oklch(20.0% 0.0060 265.0);
2684
+
2685
+ /* Surface Raised - Popovers, dropdowns */
2686
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
2687
+ --color-popover: oklch(25.0% 0.0060 265.0);
2688
+
2689
+ /* Fields - Form inputs */
2690
+ --color-field: oklch(27.0% 0.0060 265.0);
2691
+ --field: oklch(27.0% 0.0060 265.0);
2692
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
2693
+
2694
+ /* Foreground - Text colors */
2695
+ --color-foreground: oklch(96.0% 0.0060 265.0);
2696
+ --foreground: oklch(96.0% 0.0060 265.0);
2697
+ --color-heading: oklch(96.0% 0.0060 265.0);
2698
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
2699
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
2700
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
2701
+
2702
+ /* Muted Foreground - Secondary text */
2703
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
2704
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
2705
+
2706
+ /* Primary - Brand accent */
2707
+ --color-primary: oklch(70.0% 0.2000 190.0);
2708
+ --primary: oklch(70.0% 0.2000 190.0);
2709
+ --color-accent: oklch(70.0% 0.2000 190.0);
2710
+ --accent: oklch(70.0% 0.2000 190.0);
2711
+ --color-ring: oklch(70.0% 0.2000 190.0);
2712
+ --focus: oklch(70.0% 0.2000 190.0);
2713
+
2714
+ /* Primary Foreground - Text on primary bg */
2715
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
2716
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
2717
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
2718
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
2719
+
2720
+ /* Secondary - Secondary accent */
2721
+ --color-secondary: oklch(68.0% 0.1600 190.0);
2722
+ --secondary: oklch(68.0% 0.1600 190.0);
2723
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
2724
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
2725
+
2726
+ /* Default - Neutral elements */
2727
+ --color-default: oklch(25.0% 0.0060 265.0);
2728
+ --default: oklch(25.0% 0.0060 265.0);
2729
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
2730
+ --default-foreground: oklch(96.0% 0.0060 265.0);
2731
+
2732
+ /* Default on Surface - Secondary buttons/badges when on a surface */
2733
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
2734
+
2735
+ /* Border - Dividers, borders */
2736
+ --color-border: oklch(25.0% 0.0060 265.0);
2737
+ --border: oklch(25.0% 0.0060 265.0);
2738
+ --color-divider: oklch(25.0% 0.0060 265.0);
2739
+ --divider: oklch(25.0% 0.0060 265.0);
2740
+
2741
+ /* Muted - Muted backgrounds */
2742
+ --color-muted: oklch(25.0% 0.0060 265.0);
2743
+ --muted: oklch(25.0% 0.0060 265.0);
2744
+
2745
+ /* Overlay */
2746
+ --color-overlay: oklch(20.0% 0.0060 265.0);
2747
+ --overlay: oklch(20.0% 0.0060 265.0);
2748
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
2749
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
2750
+
2751
+ /* Icon - Icon colors */
2752
+ --color-icon: oklch(75.0% 0.1400 190.0);
2753
+
2754
+ /* Accent Text - For overlays and labels */
2755
+ --color-accent-text-overlay: oklch(75.0% 0.1000 190.0);
2756
+ --color-accent-text-page: oklch(60.0% 0.1000 190.0);
2757
+
2758
+ /* Text Selection */
2759
+ --color-text-selection: oklch(70.0% 0.0600 190.0) / 20%;
2760
+
2761
+ /* Canvas Background */
2762
+ --color-canvas-bg: #080809;
2763
+ }
2764
+
2765
+ /* ==========================================================================
2766
+ SQUIRCLE THEME FAMILY
2767
+ Hue: 270 | Chroma: 0.16
2768
+ ========================================================================== */
2769
+
2770
+ /* Squircle */
2771
+ [data-theme='ne-squircle'] {
2772
+ color-scheme: light;
2773
+
2774
+ /* =================================================================
2775
+ * OKLCH-GENERATED COLORS
2776
+ * Theme: Squircle | Hue: 270 | Chroma: 0.16
2777
+ * ================================================================= */
2778
+
2779
+ /* Background - Page level */
2780
+ --color-background: oklch(97.0% 0.0060 265.0);
2781
+ --background: oklch(97.0% 0.0060 265.0);
2782
+
2783
+ /* Surface - Cards, panels, modals */
2784
+ --color-surface: oklch(100.0% 0.0060 265.0);
2785
+ --color-card: oklch(100.0% 0.0060 265.0);
2786
+ --surface: oklch(100.0% 0.0060 265.0);
2787
+
2788
+ /* Surface Raised - Popovers, dropdowns */
2789
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
2790
+ --color-popover: oklch(94.0% 0.0060 265.0);
2791
+
2792
+ /* Fields - Form inputs */
2793
+ --color-field: oklch(100.0% 0.0060 265.0);
2794
+ --field: oklch(100.0% 0.0060 265.0);
2795
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
2796
+
2797
+ /* Foreground - Text colors */
2798
+ --color-foreground: oklch(15.0% 0.0060 265.0);
2799
+ --foreground: oklch(15.0% 0.0060 265.0);
2800
+ --color-heading: oklch(15.0% 0.0060 265.0);
2801
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
2802
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
2803
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
2804
+
2805
+ /* Muted Foreground - Secondary text */
2806
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
2807
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
2808
+
2809
+ /* Primary - Brand accent */
2810
+ --color-primary: oklch(55.0% 0.1600 270.0);
2811
+ --primary: oklch(55.0% 0.1600 270.0);
2812
+ --color-accent: oklch(55.0% 0.1600 270.0);
2813
+ --accent: oklch(55.0% 0.1600 270.0);
2814
+ --color-ring: oklch(55.0% 0.1600 270.0);
2815
+ --focus: oklch(55.0% 0.1600 270.0);
2816
+
2817
+ /* Primary Foreground - Text on primary bg */
2818
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
2819
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
2820
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
2821
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
2822
+
2823
+ /* Secondary - Secondary accent */
2824
+ --color-secondary: oklch(45.0% 0.1280 270.0);
2825
+ --secondary: oklch(45.0% 0.1280 270.0);
2826
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
2827
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
2828
+
2829
+ /* Default - Neutral elements */
2830
+ --color-default: oklch(94.0% 0.0060 265.0);
2831
+ --default: oklch(94.0% 0.0060 265.0);
2832
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
2833
+ --default-foreground: oklch(15.0% 0.0060 265.0);
2834
+
2835
+ /* Default on Surface - Secondary buttons/badges when on a surface */
2836
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
2837
+
2838
+ /* Border - Dividers, borders */
2839
+ --color-border: oklch(85.0% 0.0060 265.0);
2840
+ --border: oklch(85.0% 0.0060 265.0);
2841
+ --color-divider: oklch(85.0% 0.0060 265.0);
2842
+ --divider: oklch(85.0% 0.0060 265.0);
2843
+
2844
+ /* Muted - Muted backgrounds */
2845
+ --color-muted: oklch(94.0% 0.0060 265.0);
2846
+ --muted: oklch(94.0% 0.0060 265.0);
2847
+
2848
+ /* Overlay */
2849
+ --color-overlay: oklch(100.0% 0.0060 265.0);
2850
+ --overlay: oklch(100.0% 0.0060 265.0);
2851
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
2852
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
2853
+
2854
+ /* Icon - Icon colors */
2855
+ --color-icon: oklch(55.0% 0.1120 270.0);
2856
+
2857
+ /* Accent Text - For overlays and labels */
2858
+ --color-accent-text-overlay: oklch(45.0% 0.0800 270.0);
2859
+ --color-accent-text-page: oklch(50.0% 0.0800 270.0);
2860
+
2861
+ /* Text Selection */
2862
+ --color-text-selection: oklch(55.0% 0.0480 270.0) / 15%;
2863
+
2864
+ /* Canvas Background */
2865
+ --color-canvas-bg: #f5f5f5;
2866
+
2867
+ /* =================================================================
2868
+ * SEMANTIC RADIUS - Preset: soft
2869
+ * ================================================================= */
2870
+ --radius-button: var(--radius-full);
2871
+ --radius-input: var(--radius-xl);
2872
+ --radius-card: var(--radius-2xl);
2873
+ --radius-modal: var(--radius-3xl);
2874
+ --radius-badge: var(--radius-full);
2875
+ --radius-avatar: var(--radius-full);
2876
+ --radius-tooltip: var(--radius-lg);
2877
+ --radius-image: var(--radius-xl);
2878
+ }
2879
+ /* Squircle Dark */
2880
+ .dark[data-theme='ne-squircle-dark'],
2881
+ [data-theme='ne-squircle-dark'] .dark {
2882
+ color-scheme: dark;
2883
+
2884
+ /* =================================================================
2885
+ * OKLCH-GENERATED COLORS
2886
+ * Theme: Squircle Dark | Hue: 270 | Chroma: 0.18
2887
+ * ================================================================= */
2888
+
2889
+ /* Background - Page level */
2890
+ --color-background: oklch(12.0% 0.0060 265.0);
2891
+ --background: oklch(12.0% 0.0060 265.0);
2892
+
2893
+ /* Surface - Cards, panels, modals */
2894
+ --color-surface: oklch(20.0% 0.0060 265.0);
2895
+ --color-card: oklch(20.0% 0.0060 265.0);
2896
+ --surface: oklch(20.0% 0.0060 265.0);
2897
+
2898
+ /* Surface Raised - Popovers, dropdowns */
2899
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
2900
+ --color-popover: oklch(25.0% 0.0060 265.0);
2901
+
2902
+ /* Fields - Form inputs */
2903
+ --color-field: oklch(27.0% 0.0060 265.0);
2904
+ --field: oklch(27.0% 0.0060 265.0);
2905
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
2906
+
2907
+ /* Foreground - Text colors */
2908
+ --color-foreground: oklch(96.0% 0.0060 265.0);
2909
+ --foreground: oklch(96.0% 0.0060 265.0);
2910
+ --color-heading: oklch(96.0% 0.0060 265.0);
2911
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
2912
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
2913
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
2914
+
2915
+ /* Muted Foreground - Secondary text */
2916
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
2917
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
2918
+
2919
+ /* Primary - Brand accent */
2920
+ --color-primary: oklch(70.0% 0.1800 270.0);
2921
+ --primary: oklch(70.0% 0.1800 270.0);
2922
+ --color-accent: oklch(70.0% 0.1800 270.0);
2923
+ --accent: oklch(70.0% 0.1800 270.0);
2924
+ --color-ring: oklch(70.0% 0.1800 270.0);
2925
+ --focus: oklch(70.0% 0.1800 270.0);
2926
+
2927
+ /* Primary Foreground - Text on primary bg */
2928
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
2929
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
2930
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
2931
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
2932
+
2933
+ /* Secondary - Secondary accent */
2934
+ --color-secondary: oklch(68.0% 0.1440 270.0);
2935
+ --secondary: oklch(68.0% 0.1440 270.0);
2936
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
2937
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
2938
+
2939
+ /* Default - Neutral elements */
2940
+ --color-default: oklch(25.0% 0.0060 265.0);
2941
+ --default: oklch(25.0% 0.0060 265.0);
2942
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
2943
+ --default-foreground: oklch(96.0% 0.0060 265.0);
2944
+
2945
+ /* Default on Surface - Secondary buttons/badges when on a surface */
2946
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
2947
+
2948
+ /* Border - Dividers, borders */
2949
+ --color-border: oklch(25.0% 0.0060 265.0);
2950
+ --border: oklch(25.0% 0.0060 265.0);
2951
+ --color-divider: oklch(25.0% 0.0060 265.0);
2952
+ --divider: oklch(25.0% 0.0060 265.0);
2953
+
2954
+ /* Muted - Muted backgrounds */
2955
+ --color-muted: oklch(25.0% 0.0060 265.0);
2956
+ --muted: oklch(25.0% 0.0060 265.0);
2957
+
2958
+ /* Overlay */
2959
+ --color-overlay: oklch(20.0% 0.0060 265.0);
2960
+ --overlay: oklch(20.0% 0.0060 265.0);
2961
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
2962
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
2963
+
2964
+ /* Icon - Icon colors */
2965
+ --color-icon: oklch(75.0% 0.1260 270.0);
2966
+
2967
+ /* Accent Text - For overlays and labels */
2968
+ --color-accent-text-overlay: oklch(75.0% 0.0900 270.0);
2969
+ --color-accent-text-page: oklch(60.0% 0.0900 270.0);
2970
+
2971
+ /* Text Selection */
2972
+ --color-text-selection: oklch(70.0% 0.0540 270.0) / 20%;
2973
+
2974
+ /* Canvas Background */
2975
+ --color-canvas-bg: #080809;
2976
+
2977
+ /* =================================================================
2978
+ * SEMANTIC RADIUS - Preset: soft
2979
+ * ================================================================= */
2980
+ --radius-button: var(--radius-full);
2981
+ --radius-input: var(--radius-xl);
2982
+ --radius-card: var(--radius-2xl);
2983
+ --radius-modal: var(--radius-3xl);
2984
+ --radius-badge: var(--radius-full);
2985
+ --radius-avatar: var(--radius-full);
2986
+ --radius-tooltip: var(--radius-lg);
2987
+ --radius-image: var(--radius-xl);
2988
+ }
2989
+
2990
+ /* ==========================================================================
2991
+ PILL UI THEME FAMILY
2992
+ Hue: 220 | Chroma: 0.18
2993
+ ========================================================================== */
2994
+
2995
+ /* Pill UI */
2996
+ [data-theme='ne-pill-ui'] {
2997
+ color-scheme: light;
2998
+
2999
+ /* =================================================================
3000
+ * OKLCH-GENERATED COLORS
3001
+ * Theme: Pill UI | Hue: 220 | Chroma: 0.18
3002
+ * ================================================================= */
3003
+
3004
+ /* Background - Page level */
3005
+ --color-background: oklch(97.0% 0.0060 265.0);
3006
+ --background: oklch(97.0% 0.0060 265.0);
3007
+
3008
+ /* Surface - Cards, panels, modals */
3009
+ --color-surface: oklch(100.0% 0.0060 265.0);
3010
+ --color-card: oklch(100.0% 0.0060 265.0);
3011
+ --surface: oklch(100.0% 0.0060 265.0);
3012
+
3013
+ /* Surface Raised - Popovers, dropdowns */
3014
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
3015
+ --color-popover: oklch(94.0% 0.0060 265.0);
3016
+
3017
+ /* Fields - Form inputs */
3018
+ --color-field: oklch(100.0% 0.0060 265.0);
3019
+ --field: oklch(100.0% 0.0060 265.0);
3020
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
3021
+
3022
+ /* Foreground - Text colors */
3023
+ --color-foreground: oklch(15.0% 0.0060 265.0);
3024
+ --foreground: oklch(15.0% 0.0060 265.0);
3025
+ --color-heading: oklch(15.0% 0.0060 265.0);
3026
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
3027
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
3028
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
3029
+
3030
+ /* Muted Foreground - Secondary text */
3031
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
3032
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
3033
+
3034
+ /* Primary - Brand accent */
3035
+ --color-primary: oklch(55.0% 0.1800 220.0);
3036
+ --primary: oklch(55.0% 0.1800 220.0);
3037
+ --color-accent: oklch(55.0% 0.1800 220.0);
3038
+ --accent: oklch(55.0% 0.1800 220.0);
3039
+ --color-ring: oklch(55.0% 0.1800 220.0);
3040
+ --focus: oklch(55.0% 0.1800 220.0);
3041
+
3042
+ /* Primary Foreground - Text on primary bg */
3043
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
3044
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
3045
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
3046
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
3047
+
3048
+ /* Secondary - Secondary accent */
3049
+ --color-secondary: oklch(45.0% 0.1440 220.0);
3050
+ --secondary: oklch(45.0% 0.1440 220.0);
3051
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
3052
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
3053
+
3054
+ /* Default - Neutral elements */
3055
+ --color-default: oklch(94.0% 0.0060 265.0);
3056
+ --default: oklch(94.0% 0.0060 265.0);
3057
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
3058
+ --default-foreground: oklch(15.0% 0.0060 265.0);
3059
+
3060
+ /* Default on Surface - Secondary buttons/badges when on a surface */
3061
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
3062
+
3063
+ /* Border - Dividers, borders */
3064
+ --color-border: oklch(85.0% 0.0060 265.0);
3065
+ --border: oklch(85.0% 0.0060 265.0);
3066
+ --color-divider: oklch(85.0% 0.0060 265.0);
3067
+ --divider: oklch(85.0% 0.0060 265.0);
3068
+
3069
+ /* Muted - Muted backgrounds */
3070
+ --color-muted: oklch(94.0% 0.0060 265.0);
3071
+ --muted: oklch(94.0% 0.0060 265.0);
3072
+
3073
+ /* Overlay */
3074
+ --color-overlay: oklch(100.0% 0.0060 265.0);
3075
+ --overlay: oklch(100.0% 0.0060 265.0);
3076
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
3077
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
3078
+
3079
+ /* Icon - Icon colors */
3080
+ --color-icon: oklch(55.0% 0.1260 220.0);
3081
+
3082
+ /* Accent Text - For overlays and labels */
3083
+ --color-accent-text-overlay: oklch(45.0% 0.0900 220.0);
3084
+ --color-accent-text-page: oklch(50.0% 0.0900 220.0);
3085
+
3086
+ /* Text Selection */
3087
+ --color-text-selection: oklch(55.0% 0.0540 220.0) / 15%;
3088
+
3089
+ /* Canvas Background */
3090
+ --color-canvas-bg: #f5f5f5;
3091
+
3092
+ /* =================================================================
3093
+ * SEMANTIC RADIUS - Preset: soft
3094
+ * ================================================================= */
3095
+ --radius-button: var(--radius-full);
3096
+ --radius-input: var(--radius-xl);
3097
+ --radius-card: var(--radius-2xl);
3098
+ --radius-modal: var(--radius-3xl);
3099
+ --radius-badge: var(--radius-full);
3100
+ --radius-avatar: var(--radius-full);
3101
+ --radius-tooltip: var(--radius-lg);
3102
+ --radius-image: var(--radius-xl);
3103
+ }
3104
+ /* Pill UI Dark */
3105
+ .dark[data-theme='ne-pill-ui-dark'],
3106
+ [data-theme='ne-pill-ui-dark'] .dark {
3107
+ color-scheme: dark;
3108
+
3109
+ /* =================================================================
3110
+ * OKLCH-GENERATED COLORS
3111
+ * Theme: Pill UI Dark | Hue: 220 | Chroma: 0.18
3112
+ * ================================================================= */
3113
+
3114
+ /* Background - Page level */
3115
+ --color-background: oklch(12.0% 0.0060 265.0);
3116
+ --background: oklch(12.0% 0.0060 265.0);
3117
+
3118
+ /* Surface - Cards, panels, modals */
3119
+ --color-surface: oklch(20.0% 0.0060 265.0);
3120
+ --color-card: oklch(20.0% 0.0060 265.0);
3121
+ --surface: oklch(20.0% 0.0060 265.0);
3122
+
3123
+ /* Surface Raised - Popovers, dropdowns */
3124
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
3125
+ --color-popover: oklch(25.0% 0.0060 265.0);
3126
+
3127
+ /* Fields - Form inputs */
3128
+ --color-field: oklch(27.0% 0.0060 265.0);
3129
+ --field: oklch(27.0% 0.0060 265.0);
3130
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
3131
+
3132
+ /* Foreground - Text colors */
3133
+ --color-foreground: oklch(96.0% 0.0060 265.0);
3134
+ --foreground: oklch(96.0% 0.0060 265.0);
3135
+ --color-heading: oklch(96.0% 0.0060 265.0);
3136
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
3137
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
3138
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
3139
+
3140
+ /* Muted Foreground - Secondary text */
3141
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
3142
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
3143
+
3144
+ /* Primary - Brand accent */
3145
+ --color-primary: oklch(70.0% 0.1800 220.0);
3146
+ --primary: oklch(70.0% 0.1800 220.0);
3147
+ --color-accent: oklch(70.0% 0.1800 220.0);
3148
+ --accent: oklch(70.0% 0.1800 220.0);
3149
+ --color-ring: oklch(70.0% 0.1800 220.0);
3150
+ --focus: oklch(70.0% 0.1800 220.0);
3151
+
3152
+ /* Primary Foreground - Text on primary bg */
3153
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
3154
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
3155
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
3156
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
3157
+
3158
+ /* Secondary - Secondary accent */
3159
+ --color-secondary: oklch(68.0% 0.1440 220.0);
3160
+ --secondary: oklch(68.0% 0.1440 220.0);
3161
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
3162
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
3163
+
3164
+ /* Default - Neutral elements */
3165
+ --color-default: oklch(25.0% 0.0060 265.0);
3166
+ --default: oklch(25.0% 0.0060 265.0);
3167
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
3168
+ --default-foreground: oklch(96.0% 0.0060 265.0);
3169
+
3170
+ /* Default on Surface - Secondary buttons/badges when on a surface */
3171
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
3172
+
3173
+ /* Border - Dividers, borders */
3174
+ --color-border: oklch(25.0% 0.0060 265.0);
3175
+ --border: oklch(25.0% 0.0060 265.0);
3176
+ --color-divider: oklch(25.0% 0.0060 265.0);
3177
+ --divider: oklch(25.0% 0.0060 265.0);
3178
+
3179
+ /* Muted - Muted backgrounds */
3180
+ --color-muted: oklch(25.0% 0.0060 265.0);
3181
+ --muted: oklch(25.0% 0.0060 265.0);
3182
+
3183
+ /* Overlay */
3184
+ --color-overlay: oklch(20.0% 0.0060 265.0);
3185
+ --overlay: oklch(20.0% 0.0060 265.0);
3186
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
3187
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
3188
+
3189
+ /* Icon - Icon colors */
3190
+ --color-icon: oklch(75.0% 0.1260 220.0);
3191
+
3192
+ /* Accent Text - For overlays and labels */
3193
+ --color-accent-text-overlay: oklch(75.0% 0.0900 220.0);
3194
+ --color-accent-text-page: oklch(60.0% 0.0900 220.0);
3195
+
3196
+ /* Text Selection */
3197
+ --color-text-selection: oklch(70.0% 0.0540 220.0) / 20%;
3198
+
3199
+ /* Canvas Background */
3200
+ --color-canvas-bg: #080809;
3201
+
3202
+ /* =================================================================
3203
+ * SEMANTIC RADIUS - Preset: soft
3204
+ * ================================================================= */
3205
+ --radius-button: var(--radius-full);
3206
+ --radius-input: var(--radius-xl);
3207
+ --radius-card: var(--radius-2xl);
3208
+ --radius-modal: var(--radius-3xl);
3209
+ --radius-badge: var(--radius-full);
3210
+ --radius-avatar: var(--radius-full);
3211
+ --radius-tooltip: var(--radius-lg);
3212
+ --radius-image: var(--radius-xl);
3213
+ }
3214
+
3215
+ /* ==========================================================================
3216
+ MODERN STORE THEME FAMILY
3217
+ Hue: 225 | Chroma: 0.2
3218
+ ========================================================================== */
3219
+
3220
+ /* Modern Store */
3221
+ [data-theme='ne-modern-store'] {
3222
+ color-scheme: light;
3223
+
3224
+ /* =================================================================
3225
+ * OKLCH-GENERATED COLORS
3226
+ * Theme: Modern Store | Hue: 225 | Chroma: 0.2
3227
+ * ================================================================= */
3228
+
3229
+ /* Background - Page level */
3230
+ --color-background: oklch(97.0% 0.0060 265.0);
3231
+ --background: oklch(97.0% 0.0060 265.0);
3232
+
3233
+ /* Surface - Cards, panels, modals */
3234
+ --color-surface: oklch(100.0% 0.0060 265.0);
3235
+ --color-card: oklch(100.0% 0.0060 265.0);
3236
+ --surface: oklch(100.0% 0.0060 265.0);
3237
+
3238
+ /* Surface Raised - Popovers, dropdowns */
3239
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
3240
+ --color-popover: oklch(94.0% 0.0060 265.0);
3241
+
3242
+ /* Fields - Form inputs */
3243
+ --color-field: oklch(100.0% 0.0060 265.0);
3244
+ --field: oklch(100.0% 0.0060 265.0);
3245
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
3246
+
3247
+ /* Foreground - Text colors */
3248
+ --color-foreground: oklch(15.0% 0.0060 265.0);
3249
+ --foreground: oklch(15.0% 0.0060 265.0);
3250
+ --color-heading: oklch(15.0% 0.0060 265.0);
3251
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
3252
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
3253
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
3254
+
3255
+ /* Muted Foreground - Secondary text */
3256
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
3257
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
3258
+
3259
+ /* Primary - Brand accent */
3260
+ --color-primary: oklch(55.0% 0.2000 225.0);
3261
+ --primary: oklch(55.0% 0.2000 225.0);
3262
+ --color-accent: oklch(55.0% 0.2000 225.0);
3263
+ --accent: oklch(55.0% 0.2000 225.0);
3264
+ --color-ring: oklch(55.0% 0.2000 225.0);
3265
+ --focus: oklch(55.0% 0.2000 225.0);
3266
+
3267
+ /* Primary Foreground - Text on primary bg */
3268
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
3269
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
3270
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
3271
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
3272
+
3273
+ /* Secondary - Secondary accent */
3274
+ --color-secondary: oklch(45.0% 0.1600 225.0);
3275
+ --secondary: oklch(45.0% 0.1600 225.0);
3276
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
3277
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
3278
+
3279
+ /* Default - Neutral elements */
3280
+ --color-default: oklch(94.0% 0.0060 265.0);
3281
+ --default: oklch(94.0% 0.0060 265.0);
3282
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
3283
+ --default-foreground: oklch(15.0% 0.0060 265.0);
3284
+
3285
+ /* Default on Surface - Secondary buttons/badges when on a surface */
3286
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
3287
+
3288
+ /* Border - Dividers, borders */
3289
+ --color-border: oklch(85.0% 0.0060 265.0);
3290
+ --border: oklch(85.0% 0.0060 265.0);
3291
+ --color-divider: oklch(85.0% 0.0060 265.0);
3292
+ --divider: oklch(85.0% 0.0060 265.0);
3293
+
3294
+ /* Muted - Muted backgrounds */
3295
+ --color-muted: oklch(94.0% 0.0060 265.0);
3296
+ --muted: oklch(94.0% 0.0060 265.0);
3297
+
3298
+ /* Overlay */
3299
+ --color-overlay: oklch(100.0% 0.0060 265.0);
3300
+ --overlay: oklch(100.0% 0.0060 265.0);
3301
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
3302
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
3303
+
3304
+ /* Icon - Icon colors */
3305
+ --color-icon: oklch(55.0% 0.1400 225.0);
3306
+
3307
+ /* Accent Text - For overlays and labels */
3308
+ --color-accent-text-overlay: oklch(45.0% 0.1000 225.0);
3309
+ --color-accent-text-page: oklch(50.0% 0.1000 225.0);
3310
+
3311
+ /* Text Selection */
3312
+ --color-text-selection: oklch(55.0% 0.0600 225.0) / 15%;
3313
+
3314
+ /* Canvas Background */
3315
+ --color-canvas-bg: #f5f5f5;
3316
+ }
3317
+ /* Modern Store Dark */
3318
+ .dark[data-theme='ne-modern-store-dark'],
3319
+ [data-theme='ne-modern-store-dark'] .dark {
3320
+ color-scheme: dark;
3321
+
3322
+ /* =================================================================
3323
+ * OKLCH-GENERATED COLORS
3324
+ * Theme: Modern Store Dark | Hue: 225 | Chroma: 0.18
3325
+ * ================================================================= */
3326
+
3327
+ /* Background - Page level */
3328
+ --color-background: oklch(12.0% 0.0060 265.0);
3329
+ --background: oklch(12.0% 0.0060 265.0);
3330
+
3331
+ /* Surface - Cards, panels, modals */
3332
+ --color-surface: oklch(20.0% 0.0060 265.0);
3333
+ --color-card: oklch(20.0% 0.0060 265.0);
3334
+ --surface: oklch(20.0% 0.0060 265.0);
3335
+
3336
+ /* Surface Raised - Popovers, dropdowns */
3337
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
3338
+ --color-popover: oklch(25.0% 0.0060 265.0);
3339
+
3340
+ /* Fields - Form inputs */
3341
+ --color-field: oklch(27.0% 0.0060 265.0);
3342
+ --field: oklch(27.0% 0.0060 265.0);
3343
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
3344
+
3345
+ /* Foreground - Text colors */
3346
+ --color-foreground: oklch(96.0% 0.0060 265.0);
3347
+ --foreground: oklch(96.0% 0.0060 265.0);
3348
+ --color-heading: oklch(96.0% 0.0060 265.0);
3349
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
3350
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
3351
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
3352
+
3353
+ /* Muted Foreground - Secondary text */
3354
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
3355
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
3356
+
3357
+ /* Primary - Brand accent */
3358
+ --color-primary: oklch(70.0% 0.1800 225.0);
3359
+ --primary: oklch(70.0% 0.1800 225.0);
3360
+ --color-accent: oklch(70.0% 0.1800 225.0);
3361
+ --accent: oklch(70.0% 0.1800 225.0);
3362
+ --color-ring: oklch(70.0% 0.1800 225.0);
3363
+ --focus: oklch(70.0% 0.1800 225.0);
3364
+
3365
+ /* Primary Foreground - Text on primary bg */
3366
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
3367
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
3368
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
3369
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
3370
+
3371
+ /* Secondary - Secondary accent */
3372
+ --color-secondary: oklch(68.0% 0.1440 225.0);
3373
+ --secondary: oklch(68.0% 0.1440 225.0);
3374
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
3375
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
3376
+
3377
+ /* Default - Neutral elements */
3378
+ --color-default: oklch(25.0% 0.0060 265.0);
3379
+ --default: oklch(25.0% 0.0060 265.0);
3380
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
3381
+ --default-foreground: oklch(96.0% 0.0060 265.0);
3382
+
3383
+ /* Default on Surface - Secondary buttons/badges when on a surface */
3384
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
3385
+
3386
+ /* Border - Dividers, borders */
3387
+ --color-border: oklch(25.0% 0.0060 265.0);
3388
+ --border: oklch(25.0% 0.0060 265.0);
3389
+ --color-divider: oklch(25.0% 0.0060 265.0);
3390
+ --divider: oklch(25.0% 0.0060 265.0);
3391
+
3392
+ /* Muted - Muted backgrounds */
3393
+ --color-muted: oklch(25.0% 0.0060 265.0);
3394
+ --muted: oklch(25.0% 0.0060 265.0);
3395
+
3396
+ /* Overlay */
3397
+ --color-overlay: oklch(20.0% 0.0060 265.0);
3398
+ --overlay: oklch(20.0% 0.0060 265.0);
3399
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
3400
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
3401
+
3402
+ /* Icon - Icon colors */
3403
+ --color-icon: oklch(75.0% 0.1260 225.0);
3404
+
3405
+ /* Accent Text - For overlays and labels */
3406
+ --color-accent-text-overlay: oklch(75.0% 0.0900 225.0);
3407
+ --color-accent-text-page: oklch(60.0% 0.0900 225.0);
3408
+
3409
+ /* Text Selection */
3410
+ --color-text-selection: oklch(70.0% 0.0540 225.0) / 20%;
3411
+
3412
+ /* Canvas Background */
3413
+ --color-canvas-bg: #080809;
3414
+ }
3415
+
3416
+ /* ==========================================================================
3417
+ LUXURY RETAIL THEME FAMILY
3418
+ Hue: 25 | Chroma: 0.22
3419
+ ========================================================================== */
3420
+
3421
+ /* Luxury Retail */
3422
+ [data-theme='ne-luxury-retail'] {
3423
+ color-scheme: light;
3424
+
3425
+ /* =================================================================
3426
+ * OKLCH-GENERATED COLORS
3427
+ * Theme: Luxury Retail | Hue: 25 | Chroma: 0.22
3428
+ * ================================================================= */
3429
+
3430
+ /* Background - Page level */
3431
+ --color-background: oklch(97.0% 0.0060 265.0);
3432
+ --background: oklch(97.0% 0.0060 265.0);
3433
+
3434
+ /* Surface - Cards, panels, modals */
3435
+ --color-surface: oklch(100.0% 0.0060 265.0);
3436
+ --color-card: oklch(100.0% 0.0060 265.0);
3437
+ --surface: oklch(100.0% 0.0060 265.0);
3438
+
3439
+ /* Surface Raised - Popovers, dropdowns */
3440
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
3441
+ --color-popover: oklch(94.0% 0.0060 265.0);
3442
+
3443
+ /* Fields - Form inputs */
3444
+ --color-field: oklch(100.0% 0.0060 265.0);
3445
+ --field: oklch(100.0% 0.0060 265.0);
3446
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
3447
+
3448
+ /* Foreground - Text colors */
3449
+ --color-foreground: oklch(15.0% 0.0060 265.0);
3450
+ --foreground: oklch(15.0% 0.0060 265.0);
3451
+ --color-heading: oklch(15.0% 0.0060 265.0);
3452
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
3453
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
3454
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
3455
+
3456
+ /* Muted Foreground - Secondary text */
3457
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
3458
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
3459
+
3460
+ /* Primary - Brand accent */
3461
+ --color-primary: oklch(55.0% 0.2200 25.0);
3462
+ --primary: oklch(55.0% 0.2200 25.0);
3463
+ --color-accent: oklch(55.0% 0.2200 25.0);
3464
+ --accent: oklch(55.0% 0.2200 25.0);
3465
+ --color-ring: oklch(55.0% 0.2200 25.0);
3466
+ --focus: oklch(55.0% 0.2200 25.0);
3467
+
3468
+ /* Primary Foreground - Text on primary bg */
3469
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
3470
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
3471
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
3472
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
3473
+
3474
+ /* Secondary - Secondary accent */
3475
+ --color-secondary: oklch(45.0% 0.1760 25.0);
3476
+ --secondary: oklch(45.0% 0.1760 25.0);
3477
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
3478
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
3479
+
3480
+ /* Default - Neutral elements */
3481
+ --color-default: oklch(94.0% 0.0060 265.0);
3482
+ --default: oklch(94.0% 0.0060 265.0);
3483
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
3484
+ --default-foreground: oklch(15.0% 0.0060 265.0);
3485
+
3486
+ /* Default on Surface - Secondary buttons/badges when on a surface */
3487
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
3488
+
3489
+ /* Border - Dividers, borders */
3490
+ --color-border: oklch(85.0% 0.0060 265.0);
3491
+ --border: oklch(85.0% 0.0060 265.0);
3492
+ --color-divider: oklch(85.0% 0.0060 265.0);
3493
+ --divider: oklch(85.0% 0.0060 265.0);
3494
+
3495
+ /* Muted - Muted backgrounds */
3496
+ --color-muted: oklch(94.0% 0.0060 265.0);
3497
+ --muted: oklch(94.0% 0.0060 265.0);
3498
+
3499
+ /* Overlay */
3500
+ --color-overlay: oklch(100.0% 0.0060 265.0);
3501
+ --overlay: oklch(100.0% 0.0060 265.0);
3502
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
3503
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
3504
+
3505
+ /* Icon - Icon colors */
3506
+ --color-icon: oklch(55.0% 0.1540 25.0);
3507
+
3508
+ /* Accent Text - For overlays and labels */
3509
+ --color-accent-text-overlay: oklch(45.0% 0.1100 25.0);
3510
+ --color-accent-text-page: oklch(50.0% 0.1100 25.0);
3511
+
3512
+ /* Text Selection */
3513
+ --color-text-selection: oklch(55.0% 0.0660 25.0) / 15%;
3514
+
3515
+ /* Canvas Background */
3516
+ --color-canvas-bg: #f5f5f5;
3517
+
3518
+ /* =================================================================
3519
+ * SEMANTIC RADIUS - Preset: sharp
3520
+ * ================================================================= */
3521
+ --radius-button: var(--radius-sm);
3522
+ --radius-input: var(--radius-sm);
3523
+ --radius-card: var(--radius-sm);
3524
+ --radius-modal: var(--radius-md);
3525
+ --radius-badge: var(--radius-sm);
3526
+ --radius-avatar: var(--radius-md);
3527
+ --radius-tooltip: 0;
3528
+ --radius-image: var(--radius-sm);
3529
+ }
3530
+ /* Luxury Retail Dark */
3531
+ .dark[data-theme='ne-luxury-retail-dark'],
3532
+ [data-theme='ne-luxury-retail-dark'] .dark {
3533
+ color-scheme: dark;
3534
+
3535
+ /* =================================================================
3536
+ * OKLCH-GENERATED COLORS
3537
+ * Theme: Luxury Retail Dark | Hue: 25 | Chroma: 0.2
3538
+ * ================================================================= */
3539
+
3540
+ /* Background - Page level */
3541
+ --color-background: oklch(12.0% 0.0060 265.0);
3542
+ --background: oklch(12.0% 0.0060 265.0);
3543
+
3544
+ /* Surface - Cards, panels, modals */
3545
+ --color-surface: oklch(20.0% 0.0060 265.0);
3546
+ --color-card: oklch(20.0% 0.0060 265.0);
3547
+ --surface: oklch(20.0% 0.0060 265.0);
3548
+
3549
+ /* Surface Raised - Popovers, dropdowns */
3550
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
3551
+ --color-popover: oklch(25.0% 0.0060 265.0);
3552
+
3553
+ /* Fields - Form inputs */
3554
+ --color-field: oklch(27.0% 0.0060 265.0);
3555
+ --field: oklch(27.0% 0.0060 265.0);
3556
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
3557
+
3558
+ /* Foreground - Text colors */
3559
+ --color-foreground: oklch(96.0% 0.0060 265.0);
3560
+ --foreground: oklch(96.0% 0.0060 265.0);
3561
+ --color-heading: oklch(96.0% 0.0060 265.0);
3562
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
3563
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
3564
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
3565
+
3566
+ /* Muted Foreground - Secondary text */
3567
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
3568
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
3569
+
3570
+ /* Primary - Brand accent */
3571
+ --color-primary: oklch(70.0% 0.2000 25.0);
3572
+ --primary: oklch(70.0% 0.2000 25.0);
3573
+ --color-accent: oklch(70.0% 0.2000 25.0);
3574
+ --accent: oklch(70.0% 0.2000 25.0);
3575
+ --color-ring: oklch(70.0% 0.2000 25.0);
3576
+ --focus: oklch(70.0% 0.2000 25.0);
3577
+
3578
+ /* Primary Foreground - Text on primary bg */
3579
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
3580
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
3581
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
3582
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
3583
+
3584
+ /* Secondary - Secondary accent */
3585
+ --color-secondary: oklch(68.0% 0.1600 25.0);
3586
+ --secondary: oklch(68.0% 0.1600 25.0);
3587
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
3588
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
3589
+
3590
+ /* Default - Neutral elements */
3591
+ --color-default: oklch(25.0% 0.0060 265.0);
3592
+ --default: oklch(25.0% 0.0060 265.0);
3593
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
3594
+ --default-foreground: oklch(96.0% 0.0060 265.0);
3595
+
3596
+ /* Default on Surface - Secondary buttons/badges when on a surface */
3597
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
3598
+
3599
+ /* Border - Dividers, borders */
3600
+ --color-border: oklch(25.0% 0.0060 265.0);
3601
+ --border: oklch(25.0% 0.0060 265.0);
3602
+ --color-divider: oklch(25.0% 0.0060 265.0);
3603
+ --divider: oklch(25.0% 0.0060 265.0);
3604
+
3605
+ /* Muted - Muted backgrounds */
3606
+ --color-muted: oklch(25.0% 0.0060 265.0);
3607
+ --muted: oklch(25.0% 0.0060 265.0);
3608
+
3609
+ /* Overlay */
3610
+ --color-overlay: oklch(20.0% 0.0060 265.0);
3611
+ --overlay: oklch(20.0% 0.0060 265.0);
3612
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
3613
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
3614
+
3615
+ /* Icon - Icon colors */
3616
+ --color-icon: oklch(75.0% 0.1400 25.0);
3617
+
3618
+ /* Accent Text - For overlays and labels */
3619
+ --color-accent-text-overlay: oklch(75.0% 0.1000 25.0);
3620
+ --color-accent-text-page: oklch(60.0% 0.1000 25.0);
3621
+
3622
+ /* Text Selection */
3623
+ --color-text-selection: oklch(70.0% 0.0600 25.0) / 20%;
3624
+
3625
+ /* Canvas Background */
3626
+ --color-canvas-bg: #080809;
3627
+ }
3628
+
3629
+ /* ==========================================================================
3630
+ CORPORATE PRO THEME FAMILY
3631
+ Hue: 160 | Chroma: 0.18
3632
+ ========================================================================== */
3633
+
3634
+ /* Corporate Pro */
3635
+ [data-theme='ne-corporate-pro'] {
3636
+ color-scheme: light;
3637
+
3638
+ /* =================================================================
3639
+ * OKLCH-GENERATED COLORS
3640
+ * Theme: Corporate Pro | Hue: 160 | Chroma: 0.18
3641
+ * ================================================================= */
3642
+
3643
+ /* Background - Page level */
3644
+ --color-background: oklch(97.0% 0.0060 265.0);
3645
+ --background: oklch(97.0% 0.0060 265.0);
3646
+
3647
+ /* Surface - Cards, panels, modals */
3648
+ --color-surface: oklch(100.0% 0.0060 265.0);
3649
+ --color-card: oklch(100.0% 0.0060 265.0);
3650
+ --surface: oklch(100.0% 0.0060 265.0);
3651
+
3652
+ /* Surface Raised - Popovers, dropdowns */
3653
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
3654
+ --color-popover: oklch(94.0% 0.0060 265.0);
3655
+
3656
+ /* Fields - Form inputs */
3657
+ --color-field: oklch(100.0% 0.0060 265.0);
3658
+ --field: oklch(100.0% 0.0060 265.0);
3659
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
3660
+
3661
+ /* Foreground - Text colors */
3662
+ --color-foreground: oklch(15.0% 0.0060 265.0);
3663
+ --foreground: oklch(15.0% 0.0060 265.0);
3664
+ --color-heading: oklch(15.0% 0.0060 265.0);
3665
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
3666
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
3667
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
3668
+
3669
+ /* Muted Foreground - Secondary text */
3670
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
3671
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
3672
+
3673
+ /* Primary - Brand accent */
3674
+ --color-primary: oklch(55.0% 0.1800 160.0);
3675
+ --primary: oklch(55.0% 0.1800 160.0);
3676
+ --color-accent: oklch(55.0% 0.1800 160.0);
3677
+ --accent: oklch(55.0% 0.1800 160.0);
3678
+ --color-ring: oklch(55.0% 0.1800 160.0);
3679
+ --focus: oklch(55.0% 0.1800 160.0);
3680
+
3681
+ /* Primary Foreground - Text on primary bg */
3682
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
3683
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
3684
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
3685
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
3686
+
3687
+ /* Secondary - Secondary accent */
3688
+ --color-secondary: oklch(45.0% 0.1440 160.0);
3689
+ --secondary: oklch(45.0% 0.1440 160.0);
3690
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
3691
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
3692
+
3693
+ /* Default - Neutral elements */
3694
+ --color-default: oklch(94.0% 0.0060 265.0);
3695
+ --default: oklch(94.0% 0.0060 265.0);
3696
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
3697
+ --default-foreground: oklch(15.0% 0.0060 265.0);
3698
+
3699
+ /* Default on Surface - Secondary buttons/badges when on a surface */
3700
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
3701
+
3702
+ /* Border - Dividers, borders */
3703
+ --color-border: oklch(85.0% 0.0060 265.0);
3704
+ --border: oklch(85.0% 0.0060 265.0);
3705
+ --color-divider: oklch(85.0% 0.0060 265.0);
3706
+ --divider: oklch(85.0% 0.0060 265.0);
3707
+
3708
+ /* Muted - Muted backgrounds */
3709
+ --color-muted: oklch(94.0% 0.0060 265.0);
3710
+ --muted: oklch(94.0% 0.0060 265.0);
3711
+
3712
+ /* Overlay */
3713
+ --color-overlay: oklch(100.0% 0.0060 265.0);
3714
+ --overlay: oklch(100.0% 0.0060 265.0);
3715
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
3716
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
3717
+
3718
+ /* Icon - Icon colors */
3719
+ --color-icon: oklch(55.0% 0.1260 160.0);
3720
+
3721
+ /* Accent Text - For overlays and labels */
3722
+ --color-accent-text-overlay: oklch(45.0% 0.0900 160.0);
3723
+ --color-accent-text-page: oklch(50.0% 0.0900 160.0);
3724
+
3725
+ /* Text Selection */
3726
+ --color-text-selection: oklch(55.0% 0.0540 160.0) / 15%;
3727
+
3728
+ /* Canvas Background */
3729
+ --color-canvas-bg: #f5f5f5;
3730
+
3731
+ /* =================================================================
3732
+ * SEMANTIC RADIUS - Preset: sharp
3733
+ * ================================================================= */
3734
+ --radius-button: var(--radius-sm);
3735
+ --radius-input: var(--radius-sm);
3736
+ --radius-card: var(--radius-sm);
3737
+ --radius-modal: var(--radius-md);
3738
+ --radius-badge: var(--radius-sm);
3739
+ --radius-avatar: var(--radius-md);
3740
+ --radius-tooltip: 0;
3741
+ --radius-image: var(--radius-sm);
3742
+ }
3743
+ /* Corporate Pro Dark */
3744
+ .dark[data-theme='ne-corporate-pro-dark'],
3745
+ [data-theme='ne-corporate-pro-dark'] .dark {
3746
+ color-scheme: dark;
3747
+
3748
+ /* =================================================================
3749
+ * OKLCH-GENERATED COLORS
3750
+ * Theme: Corporate Pro Dark | Hue: 160 | Chroma: 0.2
3751
+ * ================================================================= */
3752
+
3753
+ /* Background - Page level */
3754
+ --color-background: oklch(12.0% 0.0060 265.0);
3755
+ --background: oklch(12.0% 0.0060 265.0);
3756
+
3757
+ /* Surface - Cards, panels, modals */
3758
+ --color-surface: oklch(20.0% 0.0060 265.0);
3759
+ --color-card: oklch(20.0% 0.0060 265.0);
3760
+ --surface: oklch(20.0% 0.0060 265.0);
3761
+
3762
+ /* Surface Raised - Popovers, dropdowns */
3763
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
3764
+ --color-popover: oklch(25.0% 0.0060 265.0);
3765
+
3766
+ /* Fields - Form inputs */
3767
+ --color-field: oklch(27.0% 0.0060 265.0);
3768
+ --field: oklch(27.0% 0.0060 265.0);
3769
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
3770
+
3771
+ /* Foreground - Text colors */
3772
+ --color-foreground: oklch(96.0% 0.0060 265.0);
3773
+ --foreground: oklch(96.0% 0.0060 265.0);
3774
+ --color-heading: oklch(96.0% 0.0060 265.0);
3775
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
3776
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
3777
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
3778
+
3779
+ /* Muted Foreground - Secondary text */
3780
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
3781
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
3782
+
3783
+ /* Primary - Brand accent */
3784
+ --color-primary: oklch(70.0% 0.2000 160.0);
3785
+ --primary: oklch(70.0% 0.2000 160.0);
3786
+ --color-accent: oklch(70.0% 0.2000 160.0);
3787
+ --accent: oklch(70.0% 0.2000 160.0);
3788
+ --color-ring: oklch(70.0% 0.2000 160.0);
3789
+ --focus: oklch(70.0% 0.2000 160.0);
3790
+
3791
+ /* Primary Foreground - Text on primary bg */
3792
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
3793
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
3794
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
3795
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
3796
+
3797
+ /* Secondary - Secondary accent */
3798
+ --color-secondary: oklch(68.0% 0.1600 160.0);
3799
+ --secondary: oklch(68.0% 0.1600 160.0);
3800
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
3801
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
3802
+
3803
+ /* Default - Neutral elements */
3804
+ --color-default: oklch(25.0% 0.0060 265.0);
3805
+ --default: oklch(25.0% 0.0060 265.0);
3806
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
3807
+ --default-foreground: oklch(96.0% 0.0060 265.0);
3808
+
3809
+ /* Default on Surface - Secondary buttons/badges when on a surface */
3810
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
3811
+
3812
+ /* Border - Dividers, borders */
3813
+ --color-border: oklch(25.0% 0.0060 265.0);
3814
+ --border: oklch(25.0% 0.0060 265.0);
3815
+ --color-divider: oklch(25.0% 0.0060 265.0);
3816
+ --divider: oklch(25.0% 0.0060 265.0);
3817
+
3818
+ /* Muted - Muted backgrounds */
3819
+ --color-muted: oklch(25.0% 0.0060 265.0);
3820
+ --muted: oklch(25.0% 0.0060 265.0);
3821
+
3822
+ /* Overlay */
3823
+ --color-overlay: oklch(20.0% 0.0060 265.0);
3824
+ --overlay: oklch(20.0% 0.0060 265.0);
3825
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
3826
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
3827
+
3828
+ /* Icon - Icon colors */
3829
+ --color-icon: oklch(75.0% 0.1400 160.0);
3830
+
3831
+ /* Accent Text - For overlays and labels */
3832
+ --color-accent-text-overlay: oklch(75.0% 0.1000 160.0);
3833
+ --color-accent-text-page: oklch(60.0% 0.1000 160.0);
3834
+
3835
+ /* Text Selection */
3836
+ --color-text-selection: oklch(70.0% 0.0600 160.0) / 20%;
3837
+
3838
+ /* Canvas Background */
3839
+ --color-canvas-bg: #080809;
3840
+
3841
+ /* =================================================================
3842
+ * SEMANTIC RADIUS - Preset: sharp
3843
+ * ================================================================= */
3844
+ --radius-button: var(--radius-sm);
3845
+ --radius-input: var(--radius-sm);
3846
+ --radius-card: var(--radius-sm);
3847
+ --radius-modal: var(--radius-md);
3848
+ --radius-badge: var(--radius-sm);
3849
+ --radius-avatar: var(--radius-md);
3850
+ --radius-tooltip: 0;
3851
+ --radius-image: var(--radius-sm);
3852
+ }
3853
+
3854
+ /* ==========================================================================
3855
+ NEON THEME FAMILY
3856
+ Hue: 95 | Chroma: 0.22
3857
+ ========================================================================== */
3858
+
3859
+ /* Neon */
3860
+ [data-theme='ne-neon'] {
3861
+ color-scheme: light;
3862
+
3863
+ /* =================================================================
3864
+ * OKLCH-GENERATED COLORS
3865
+ * Theme: Neon | Hue: 95 | Chroma: 0.22
3866
+ * ================================================================= */
3867
+
3868
+ /* Background - Page level */
3869
+ --color-background: oklch(97.0% 0.0060 265.0);
3870
+ --background: oklch(97.0% 0.0060 265.0);
3871
+
3872
+ /* Surface - Cards, panels, modals */
3873
+ --color-surface: oklch(100.0% 0.0060 265.0);
3874
+ --color-card: oklch(100.0% 0.0060 265.0);
3875
+ --surface: oklch(100.0% 0.0060 265.0);
3876
+
3877
+ /* Surface Raised - Popovers, dropdowns */
3878
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
3879
+ --color-popover: oklch(94.0% 0.0060 265.0);
3880
+
3881
+ /* Fields - Form inputs */
3882
+ --color-field: oklch(100.0% 0.0060 265.0);
3883
+ --field: oklch(100.0% 0.0060 265.0);
3884
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
3885
+
3886
+ /* Foreground - Text colors */
3887
+ --color-foreground: oklch(15.0% 0.0060 265.0);
3888
+ --foreground: oklch(15.0% 0.0060 265.0);
3889
+ --color-heading: oklch(15.0% 0.0060 265.0);
3890
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
3891
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
3892
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
3893
+
3894
+ /* Muted Foreground - Secondary text */
3895
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
3896
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
3897
+
3898
+ /* Primary - Brand accent */
3899
+ --color-primary: oklch(55.0% 0.2200 95.0);
3900
+ --primary: oklch(55.0% 0.2200 95.0);
3901
+ --color-accent: oklch(55.0% 0.2200 95.0);
3902
+ --accent: oklch(55.0% 0.2200 95.0);
3903
+ --color-ring: oklch(55.0% 0.2200 95.0);
3904
+ --focus: oklch(55.0% 0.2200 95.0);
3905
+
3906
+ /* Primary Foreground - Text on primary bg */
3907
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
3908
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
3909
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
3910
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
3911
+
3912
+ /* Secondary - Secondary accent */
3913
+ --color-secondary: oklch(45.0% 0.1760 95.0);
3914
+ --secondary: oklch(45.0% 0.1760 95.0);
3915
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
3916
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
3917
+
3918
+ /* Default - Neutral elements */
3919
+ --color-default: oklch(94.0% 0.0060 265.0);
3920
+ --default: oklch(94.0% 0.0060 265.0);
3921
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
3922
+ --default-foreground: oklch(15.0% 0.0060 265.0);
3923
+
3924
+ /* Default on Surface - Secondary buttons/badges when on a surface */
3925
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
3926
+
3927
+ /* Border - Dividers, borders */
3928
+ --color-border: oklch(85.0% 0.0060 265.0);
3929
+ --border: oklch(85.0% 0.0060 265.0);
3930
+ --color-divider: oklch(85.0% 0.0060 265.0);
3931
+ --divider: oklch(85.0% 0.0060 265.0);
3932
+
3933
+ /* Muted - Muted backgrounds */
3934
+ --color-muted: oklch(94.0% 0.0060 265.0);
3935
+ --muted: oklch(94.0% 0.0060 265.0);
3936
+
3937
+ /* Overlay */
3938
+ --color-overlay: oklch(100.0% 0.0060 265.0);
3939
+ --overlay: oklch(100.0% 0.0060 265.0);
3940
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
3941
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
3942
+
3943
+ /* Icon - Icon colors */
3944
+ --color-icon: oklch(55.0% 0.1540 95.0);
3945
+
3946
+ /* Accent Text - For overlays and labels */
3947
+ --color-accent-text-overlay: oklch(45.0% 0.1100 95.0);
3948
+ --color-accent-text-page: oklch(50.0% 0.1100 95.0);
3949
+
3950
+ /* Text Selection */
3951
+ --color-text-selection: oklch(55.0% 0.0660 95.0) / 15%;
3952
+
3953
+ /* Canvas Background */
3954
+ --color-canvas-bg: #f5f5f5;
3955
+ }
3956
+ /* Neon Dark */
3957
+ .dark[data-theme='ne-neon-dark'],
3958
+ [data-theme='ne-neon-dark'] .dark {
3959
+ color-scheme: dark;
3960
+
3961
+ /* =================================================================
3962
+ * OKLCH-GENERATED COLORS
3963
+ * Theme: Neon Dark | Hue: 95 | Chroma: 0.25
3964
+ * ================================================================= */
3965
+
3966
+ /* Background - Page level */
3967
+ --color-background: oklch(12.0% 0.0060 265.0);
3968
+ --background: oklch(12.0% 0.0060 265.0);
3969
+
3970
+ /* Surface - Cards, panels, modals */
3971
+ --color-surface: oklch(20.0% 0.0060 265.0);
3972
+ --color-card: oklch(20.0% 0.0060 265.0);
3973
+ --surface: oklch(20.0% 0.0060 265.0);
3974
+
3975
+ /* Surface Raised - Popovers, dropdowns */
3976
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
3977
+ --color-popover: oklch(25.0% 0.0060 265.0);
3978
+
3979
+ /* Fields - Form inputs */
3980
+ --color-field: oklch(27.0% 0.0060 265.0);
3981
+ --field: oklch(27.0% 0.0060 265.0);
3982
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
3983
+
3984
+ /* Foreground - Text colors */
3985
+ --color-foreground: oklch(96.0% 0.0060 265.0);
3986
+ --foreground: oklch(96.0% 0.0060 265.0);
3987
+ --color-heading: oklch(96.0% 0.0060 265.0);
3988
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
3989
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
3990
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
3991
+
3992
+ /* Muted Foreground - Secondary text */
3993
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
3994
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
3995
+
3996
+ /* Primary - Brand accent */
3997
+ --color-primary: oklch(70.0% 0.2500 95.0);
3998
+ --primary: oklch(70.0% 0.2500 95.0);
3999
+ --color-accent: oklch(70.0% 0.2500 95.0);
4000
+ --accent: oklch(70.0% 0.2500 95.0);
4001
+ --color-ring: oklch(70.0% 0.2500 95.0);
4002
+ --focus: oklch(70.0% 0.2500 95.0);
4003
+
4004
+ /* Primary Foreground - Text on primary bg */
4005
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
4006
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
4007
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
4008
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
4009
+
4010
+ /* Secondary - Secondary accent */
4011
+ --color-secondary: oklch(68.0% 0.2000 95.0);
4012
+ --secondary: oklch(68.0% 0.2000 95.0);
4013
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
4014
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
4015
+
4016
+ /* Default - Neutral elements */
4017
+ --color-default: oklch(25.0% 0.0060 265.0);
4018
+ --default: oklch(25.0% 0.0060 265.0);
4019
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
4020
+ --default-foreground: oklch(96.0% 0.0060 265.0);
4021
+
4022
+ /* Default on Surface - Secondary buttons/badges when on a surface */
4023
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
4024
+
4025
+ /* Border - Dividers, borders */
4026
+ --color-border: oklch(25.0% 0.0060 265.0);
4027
+ --border: oklch(25.0% 0.0060 265.0);
4028
+ --color-divider: oklch(25.0% 0.0060 265.0);
4029
+ --divider: oklch(25.0% 0.0060 265.0);
4030
+
4031
+ /* Muted - Muted backgrounds */
4032
+ --color-muted: oklch(25.0% 0.0060 265.0);
4033
+ --muted: oklch(25.0% 0.0060 265.0);
4034
+
4035
+ /* Overlay */
4036
+ --color-overlay: oklch(20.0% 0.0060 265.0);
4037
+ --overlay: oklch(20.0% 0.0060 265.0);
4038
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
4039
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
4040
+
4041
+ /* Icon - Icon colors */
4042
+ --color-icon: oklch(75.0% 0.1750 95.0);
4043
+
4044
+ /* Accent Text - For overlays and labels */
4045
+ --color-accent-text-overlay: oklch(75.0% 0.1250 95.0);
4046
+ --color-accent-text-page: oklch(60.0% 0.1250 95.0);
4047
+
4048
+ /* Text Selection */
4049
+ --color-text-selection: oklch(70.0% 0.0750 95.0) / 20%;
4050
+
4051
+ /* Canvas Background */
4052
+ --color-canvas-bg: #080809;
4053
+
4054
+ /* =================================================================
4055
+ * SEMANTIC RADIUS - Preset: playful
4056
+ * ================================================================= */
4057
+ --radius-button: var(--radius-2xl);
4058
+ --radius-input: var(--radius-xl);
4059
+ --radius-card: var(--radius-3xl);
4060
+ --radius-modal: var(--radius-3xl);
4061
+ --radius-badge: var(--radius-full);
4062
+ --radius-avatar: var(--radius-full);
4063
+ --radius-tooltip: var(--radius-xl);
4064
+ --radius-image: var(--radius-2xl);
4065
+ }
4066
+
4067
+ /* ==========================================================================
4068
+ NEO BRUTAL THEME FAMILY
4069
+ Hue: 50 | Chroma: 0.25
4070
+ ========================================================================== */
4071
+
4072
+ /* Neo Brutal */
4073
+ [data-theme='ne-neo-brutal'] {
4074
+ color-scheme: light;
4075
+
4076
+ /* =================================================================
4077
+ * OKLCH-GENERATED COLORS
4078
+ * Theme: Neo Brutal | Hue: 50 | Chroma: 0.25
4079
+ * ================================================================= */
4080
+
4081
+ /* Background - Page level */
4082
+ --color-background: oklch(97.0% 0.0060 265.0);
4083
+ --background: oklch(97.0% 0.0060 265.0);
4084
+
4085
+ /* Surface - Cards, panels, modals */
4086
+ --color-surface: oklch(100.0% 0.0060 265.0);
4087
+ --color-card: oklch(100.0% 0.0060 265.0);
4088
+ --surface: oklch(100.0% 0.0060 265.0);
4089
+
4090
+ /* Surface Raised - Popovers, dropdowns */
4091
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
4092
+ --color-popover: oklch(94.0% 0.0060 265.0);
4093
+
4094
+ /* Fields - Form inputs */
4095
+ --color-field: oklch(100.0% 0.0060 265.0);
4096
+ --field: oklch(100.0% 0.0060 265.0);
4097
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
4098
+
4099
+ /* Foreground - Text colors */
4100
+ --color-foreground: oklch(15.0% 0.0060 265.0);
4101
+ --foreground: oklch(15.0% 0.0060 265.0);
4102
+ --color-heading: oklch(15.0% 0.0060 265.0);
4103
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
4104
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
4105
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
4106
+
4107
+ /* Muted Foreground - Secondary text */
4108
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
4109
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
4110
+
4111
+ /* Primary - Brand accent */
4112
+ --color-primary: oklch(55.0% 0.2500 50.0);
4113
+ --primary: oklch(55.0% 0.2500 50.0);
4114
+ --color-accent: oklch(55.0% 0.2500 50.0);
4115
+ --accent: oklch(55.0% 0.2500 50.0);
4116
+ --color-ring: oklch(55.0% 0.2500 50.0);
4117
+ --focus: oklch(55.0% 0.2500 50.0);
4118
+
4119
+ /* Primary Foreground - Text on primary bg */
4120
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
4121
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
4122
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
4123
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
4124
+
4125
+ /* Secondary - Secondary accent */
4126
+ --color-secondary: oklch(45.0% 0.2000 50.0);
4127
+ --secondary: oklch(45.0% 0.2000 50.0);
4128
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
4129
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
4130
+
4131
+ /* Default - Neutral elements */
4132
+ --color-default: oklch(94.0% 0.0060 265.0);
4133
+ --default: oklch(94.0% 0.0060 265.0);
4134
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
4135
+ --default-foreground: oklch(15.0% 0.0060 265.0);
4136
+
4137
+ /* Default on Surface - Secondary buttons/badges when on a surface */
4138
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
4139
+
4140
+ /* Border - Dividers, borders */
4141
+ --color-border: oklch(85.0% 0.0060 265.0);
4142
+ --border: oklch(85.0% 0.0060 265.0);
4143
+ --color-divider: oklch(85.0% 0.0060 265.0);
4144
+ --divider: oklch(85.0% 0.0060 265.0);
4145
+
4146
+ /* Muted - Muted backgrounds */
4147
+ --color-muted: oklch(94.0% 0.0060 265.0);
4148
+ --muted: oklch(94.0% 0.0060 265.0);
4149
+
4150
+ /* Overlay */
4151
+ --color-overlay: oklch(100.0% 0.0060 265.0);
4152
+ --overlay: oklch(100.0% 0.0060 265.0);
4153
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
4154
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
4155
+
4156
+ /* Icon - Icon colors */
4157
+ --color-icon: oklch(55.0% 0.1750 50.0);
4158
+
4159
+ /* Accent Text - For overlays and labels */
4160
+ --color-accent-text-overlay: oklch(45.0% 0.1250 50.0);
4161
+ --color-accent-text-page: oklch(50.0% 0.1250 50.0);
4162
+
4163
+ /* Text Selection */
4164
+ --color-text-selection: oklch(55.0% 0.0750 50.0) / 15%;
4165
+
4166
+ /* Canvas Background */
4167
+ --color-canvas-bg: #f5f5f5;
4168
+
4169
+ /* =================================================================
4170
+ * SEMANTIC RADIUS - Preset: brutalist
4171
+ * ================================================================= */
4172
+ --radius-button: 0;
4173
+ --radius-input: 0;
4174
+ --radius-card: 0;
4175
+ --radius-modal: 0;
4176
+ --radius-badge: 0;
4177
+ --radius-avatar: 0;
4178
+ --radius-tooltip: 0;
4179
+ --radius-image: 0;
4180
+ }
4181
+ /* Neo Brutal Dark */
4182
+ .dark[data-theme='ne-neo-brutal-dark'],
4183
+ [data-theme='ne-neo-brutal-dark'] .dark {
4184
+ color-scheme: dark;
4185
+
4186
+ /* =================================================================
4187
+ * OKLCH-GENERATED COLORS
4188
+ * Theme: Neo Brutal Dark | Hue: 155 | Chroma: 0.3
4189
+ * ================================================================= */
4190
+
4191
+ /* Background - Page level */
4192
+ --color-background: oklch(12.0% 0.0060 265.0);
4193
+ --background: oklch(12.0% 0.0060 265.0);
4194
+
4195
+ /* Surface - Cards, panels, modals */
4196
+ --color-surface: oklch(20.0% 0.0060 265.0);
4197
+ --color-card: oklch(20.0% 0.0060 265.0);
4198
+ --surface: oklch(20.0% 0.0060 265.0);
4199
+
4200
+ /* Surface Raised - Popovers, dropdowns */
4201
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
4202
+ --color-popover: oklch(25.0% 0.0060 265.0);
4203
+
4204
+ /* Fields - Form inputs */
4205
+ --color-field: oklch(27.0% 0.0060 265.0);
4206
+ --field: oklch(27.0% 0.0060 265.0);
4207
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
4208
+
4209
+ /* Foreground - Text colors */
4210
+ --color-foreground: oklch(96.0% 0.0060 265.0);
4211
+ --foreground: oklch(96.0% 0.0060 265.0);
4212
+ --color-heading: oklch(96.0% 0.0060 265.0);
4213
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
4214
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
4215
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
4216
+
4217
+ /* Muted Foreground - Secondary text */
4218
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
4219
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
4220
+
4221
+ /* Primary - Brand accent */
4222
+ --color-primary: oklch(70.0% 0.3000 155.0);
4223
+ --primary: oklch(70.0% 0.3000 155.0);
4224
+ --color-accent: oklch(70.0% 0.3000 155.0);
4225
+ --accent: oklch(70.0% 0.3000 155.0);
4226
+ --color-ring: oklch(70.0% 0.3000 155.0);
4227
+ --focus: oklch(70.0% 0.3000 155.0);
4228
+
4229
+ /* Primary Foreground - Text on primary bg */
4230
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
4231
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
4232
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
4233
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
4234
+
4235
+ /* Secondary - Secondary accent */
4236
+ --color-secondary: oklch(68.0% 0.2400 155.0);
4237
+ --secondary: oklch(68.0% 0.2400 155.0);
4238
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
4239
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
4240
+
4241
+ /* Default - Neutral elements */
4242
+ --color-default: oklch(25.0% 0.0060 265.0);
4243
+ --default: oklch(25.0% 0.0060 265.0);
4244
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
4245
+ --default-foreground: oklch(96.0% 0.0060 265.0);
4246
+
4247
+ /* Default on Surface - Secondary buttons/badges when on a surface */
4248
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
4249
+
4250
+ /* Border - Dividers, borders */
4251
+ --color-border: oklch(25.0% 0.0060 265.0);
4252
+ --border: oklch(25.0% 0.0060 265.0);
4253
+ --color-divider: oklch(25.0% 0.0060 265.0);
4254
+ --divider: oklch(25.0% 0.0060 265.0);
4255
+
4256
+ /* Muted - Muted backgrounds */
4257
+ --color-muted: oklch(25.0% 0.0060 265.0);
4258
+ --muted: oklch(25.0% 0.0060 265.0);
4259
+
4260
+ /* Overlay */
4261
+ --color-overlay: oklch(20.0% 0.0060 265.0);
4262
+ --overlay: oklch(20.0% 0.0060 265.0);
4263
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
4264
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
4265
+
4266
+ /* Icon - Icon colors */
4267
+ --color-icon: oklch(75.0% 0.2100 155.0);
4268
+
4269
+ /* Accent Text - For overlays and labels */
4270
+ --color-accent-text-overlay: oklch(75.0% 0.1500 155.0);
4271
+ --color-accent-text-page: oklch(60.0% 0.1500 155.0);
4272
+
4273
+ /* Text Selection */
4274
+ --color-text-selection: oklch(70.0% 0.0900 155.0) / 20%;
4275
+
4276
+ /* Canvas Background */
4277
+ --color-canvas-bg: #080809;
4278
+
4279
+ /* =================================================================
4280
+ * SEMANTIC RADIUS - Preset: brutalist
4281
+ * ================================================================= */
4282
+ --radius-button: 0;
4283
+ --radius-input: 0;
4284
+ --radius-card: 0;
4285
+ --radius-modal: 0;
4286
+ --radius-badge: 0;
4287
+ --radius-avatar: 0;
4288
+ --radius-tooltip: 0;
4289
+ --radius-image: 0;
4290
+ }
4291
+
4292
+ /* ==========================================================================
4293
+ AURORA THEME FAMILY
4294
+ Hue: 250 | Chroma: 0.16
4295
+ ========================================================================== */
4296
+
4297
+ /* Aurora */
4298
+ [data-theme='ne-aurora'] {
4299
+ color-scheme: light;
4300
+
4301
+ /* =================================================================
4302
+ * OKLCH-GENERATED COLORS
4303
+ * Theme: Aurora | Hue: 250 | Chroma: 0.16
4304
+ * ================================================================= */
4305
+
4306
+ /* Background - Page level */
4307
+ --color-background: oklch(97.0% 0.0060 265.0);
4308
+ --background: oklch(97.0% 0.0060 265.0);
4309
+
4310
+ /* Surface - Cards, panels, modals */
4311
+ --color-surface: oklch(100.0% 0.0060 265.0);
4312
+ --color-card: oklch(100.0% 0.0060 265.0);
4313
+ --surface: oklch(100.0% 0.0060 265.0);
4314
+
4315
+ /* Surface Raised - Popovers, dropdowns */
4316
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
4317
+ --color-popover: oklch(94.0% 0.0060 265.0);
4318
+
4319
+ /* Fields - Form inputs */
4320
+ --color-field: oklch(100.0% 0.0060 265.0);
4321
+ --field: oklch(100.0% 0.0060 265.0);
4322
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
4323
+
4324
+ /* Foreground - Text colors */
4325
+ --color-foreground: oklch(15.0% 0.0060 265.0);
4326
+ --foreground: oklch(15.0% 0.0060 265.0);
4327
+ --color-heading: oklch(15.0% 0.0060 265.0);
4328
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
4329
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
4330
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
4331
+
4332
+ /* Muted Foreground - Secondary text */
4333
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
4334
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
4335
+
4336
+ /* Primary - Brand accent */
4337
+ --color-primary: oklch(55.0% 0.1600 250.0);
4338
+ --primary: oklch(55.0% 0.1600 250.0);
4339
+ --color-accent: oklch(55.0% 0.1600 250.0);
4340
+ --accent: oklch(55.0% 0.1600 250.0);
4341
+ --color-ring: oklch(55.0% 0.1600 250.0);
4342
+ --focus: oklch(55.0% 0.1600 250.0);
4343
+
4344
+ /* Primary Foreground - Text on primary bg */
4345
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
4346
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
4347
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
4348
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
4349
+
4350
+ /* Secondary - Secondary accent */
4351
+ --color-secondary: oklch(45.0% 0.1280 250.0);
4352
+ --secondary: oklch(45.0% 0.1280 250.0);
4353
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
4354
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
4355
+
4356
+ /* Default - Neutral elements */
4357
+ --color-default: oklch(94.0% 0.0060 265.0);
4358
+ --default: oklch(94.0% 0.0060 265.0);
4359
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
4360
+ --default-foreground: oklch(15.0% 0.0060 265.0);
4361
+
4362
+ /* Default on Surface - Secondary buttons/badges when on a surface */
4363
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
4364
+
4365
+ /* Border - Dividers, borders */
4366
+ --color-border: oklch(85.0% 0.0060 265.0);
4367
+ --border: oklch(85.0% 0.0060 265.0);
4368
+ --color-divider: oklch(85.0% 0.0060 265.0);
4369
+ --divider: oklch(85.0% 0.0060 265.0);
4370
+
4371
+ /* Muted - Muted backgrounds */
4372
+ --color-muted: oklch(94.0% 0.0060 265.0);
4373
+ --muted: oklch(94.0% 0.0060 265.0);
4374
+
4375
+ /* Overlay */
4376
+ --color-overlay: oklch(100.0% 0.0060 265.0);
4377
+ --overlay: oklch(100.0% 0.0060 265.0);
4378
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
4379
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
4380
+
4381
+ /* Icon - Icon colors */
4382
+ --color-icon: oklch(55.0% 0.1120 250.0);
4383
+
4384
+ /* Accent Text - For overlays and labels */
4385
+ --color-accent-text-overlay: oklch(45.0% 0.0800 250.0);
4386
+ --color-accent-text-page: oklch(50.0% 0.0800 250.0);
4387
+
4388
+ /* Text Selection */
4389
+ --color-text-selection: oklch(55.0% 0.0480 250.0) / 15%;
4390
+
4391
+ /* Canvas Background */
4392
+ --color-canvas-bg: #f5f5f5;
4393
+
4394
+ /* =================================================================
4395
+ * SEMANTIC RADIUS - Preset: soft
4396
+ * ================================================================= */
4397
+ --radius-button: var(--radius-full);
4398
+ --radius-input: var(--radius-xl);
4399
+ --radius-card: var(--radius-2xl);
4400
+ --radius-modal: var(--radius-3xl);
4401
+ --radius-badge: var(--radius-full);
4402
+ --radius-avatar: var(--radius-full);
4403
+ --radius-tooltip: var(--radius-lg);
4404
+ --radius-image: var(--radius-xl);
4405
+ }
4406
+ /* Aurora Dark */
4407
+ .dark[data-theme='ne-aurora-dark'],
4408
+ [data-theme='ne-aurora-dark'] .dark {
4409
+ color-scheme: dark;
4410
+
4411
+ /* =================================================================
4412
+ * OKLCH-GENERATED COLORS
4413
+ * Theme: Aurora Dark | Hue: 260 | Chroma: 0.18
4414
+ * ================================================================= */
4415
+
4416
+ /* Background - Page level */
4417
+ --color-background: oklch(12.0% 0.0060 265.0);
4418
+ --background: oklch(12.0% 0.0060 265.0);
4419
+
4420
+ /* Surface - Cards, panels, modals */
4421
+ --color-surface: oklch(20.0% 0.0060 265.0);
4422
+ --color-card: oklch(20.0% 0.0060 265.0);
4423
+ --surface: oklch(20.0% 0.0060 265.0);
4424
+
4425
+ /* Surface Raised - Popovers, dropdowns */
4426
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
4427
+ --color-popover: oklch(25.0% 0.0060 265.0);
4428
+
4429
+ /* Fields - Form inputs */
4430
+ --color-field: oklch(27.0% 0.0060 265.0);
4431
+ --field: oklch(27.0% 0.0060 265.0);
4432
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
4433
+
4434
+ /* Foreground - Text colors */
4435
+ --color-foreground: oklch(96.0% 0.0060 265.0);
4436
+ --foreground: oklch(96.0% 0.0060 265.0);
4437
+ --color-heading: oklch(96.0% 0.0060 265.0);
4438
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
4439
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
4440
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
4441
+
4442
+ /* Muted Foreground - Secondary text */
4443
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
4444
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
4445
+
4446
+ /* Primary - Brand accent */
4447
+ --color-primary: oklch(70.0% 0.1800 260.0);
4448
+ --primary: oklch(70.0% 0.1800 260.0);
4449
+ --color-accent: oklch(70.0% 0.1800 260.0);
4450
+ --accent: oklch(70.0% 0.1800 260.0);
4451
+ --color-ring: oklch(70.0% 0.1800 260.0);
4452
+ --focus: oklch(70.0% 0.1800 260.0);
4453
+
4454
+ /* Primary Foreground - Text on primary bg */
4455
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
4456
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
4457
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
4458
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
4459
+
4460
+ /* Secondary - Secondary accent */
4461
+ --color-secondary: oklch(68.0% 0.1440 260.0);
4462
+ --secondary: oklch(68.0% 0.1440 260.0);
4463
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
4464
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
4465
+
4466
+ /* Default - Neutral elements */
4467
+ --color-default: oklch(25.0% 0.0060 265.0);
4468
+ --default: oklch(25.0% 0.0060 265.0);
4469
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
4470
+ --default-foreground: oklch(96.0% 0.0060 265.0);
4471
+
4472
+ /* Default on Surface - Secondary buttons/badges when on a surface */
4473
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
4474
+
4475
+ /* Border - Dividers, borders */
4476
+ --color-border: oklch(25.0% 0.0060 265.0);
4477
+ --border: oklch(25.0% 0.0060 265.0);
4478
+ --color-divider: oklch(25.0% 0.0060 265.0);
4479
+ --divider: oklch(25.0% 0.0060 265.0);
4480
+
4481
+ /* Muted - Muted backgrounds */
4482
+ --color-muted: oklch(25.0% 0.0060 265.0);
4483
+ --muted: oklch(25.0% 0.0060 265.0);
4484
+
4485
+ /* Overlay */
4486
+ --color-overlay: oklch(20.0% 0.0060 265.0);
4487
+ --overlay: oklch(20.0% 0.0060 265.0);
4488
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
4489
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
4490
+
4491
+ /* Icon - Icon colors */
4492
+ --color-icon: oklch(75.0% 0.1260 260.0);
4493
+
4494
+ /* Accent Text - For overlays and labels */
4495
+ --color-accent-text-overlay: oklch(75.0% 0.0900 260.0);
4496
+ --color-accent-text-page: oklch(60.0% 0.0900 260.0);
4497
+
4498
+ /* Text Selection */
4499
+ --color-text-selection: oklch(70.0% 0.0540 260.0) / 20%;
4500
+
4501
+ /* Canvas Background */
4502
+ --color-canvas-bg: #080809;
4503
+
4504
+ /* =================================================================
4505
+ * SEMANTIC RADIUS - Preset: soft
4506
+ * ================================================================= */
4507
+ --radius-button: var(--radius-full);
4508
+ --radius-input: var(--radius-xl);
4509
+ --radius-card: var(--radius-2xl);
4510
+ --radius-modal: var(--radius-3xl);
4511
+ --radius-badge: var(--radius-full);
4512
+ --radius-avatar: var(--radius-full);
4513
+ --radius-tooltip: var(--radius-lg);
4514
+ --radius-image: var(--radius-xl);
4515
+ }
4516
+
4517
+ /* ==========================================================================
4518
+ CANDY THEME FAMILY
4519
+ Hue: 330 | Chroma: 0.2
4520
+ ========================================================================== */
4521
+
4522
+ /* Candy */
4523
+ [data-theme='ne-candy'] {
4524
+ color-scheme: light;
4525
+
4526
+ /* =================================================================
4527
+ * OKLCH-GENERATED COLORS
4528
+ * Theme: Candy | Hue: 330 | Chroma: 0.2
4529
+ * ================================================================= */
4530
+
4531
+ /* Background - Page level */
4532
+ --color-background: oklch(97.0% 0.0060 265.0);
4533
+ --background: oklch(97.0% 0.0060 265.0);
4534
+
4535
+ /* Surface - Cards, panels, modals */
4536
+ --color-surface: oklch(100.0% 0.0060 265.0);
4537
+ --color-card: oklch(100.0% 0.0060 265.0);
4538
+ --surface: oklch(100.0% 0.0060 265.0);
4539
+
4540
+ /* Surface Raised - Popovers, dropdowns */
4541
+ --color-surface-raised: oklch(94.0% 0.0060 265.0);
4542
+ --color-popover: oklch(94.0% 0.0060 265.0);
4543
+
4544
+ /* Fields - Form inputs */
4545
+ --color-field: oklch(100.0% 0.0060 265.0);
4546
+ --field: oklch(100.0% 0.0060 265.0);
4547
+ --color-field-on-surface: oklch(96.0% 0.0060 265.0);
4548
+
4549
+ /* Foreground - Text colors */
4550
+ --color-foreground: oklch(15.0% 0.0060 265.0);
4551
+ --foreground: oklch(15.0% 0.0060 265.0);
4552
+ --color-heading: oklch(15.0% 0.0060 265.0);
4553
+ --color-card-foreground: oklch(15.0% 0.0060 265.0);
4554
+ --color-popover-foreground: oklch(15.0% 0.0060 265.0);
4555
+ --surface-foreground: oklch(15.0% 0.0060 265.0);
4556
+
4557
+ /* Muted Foreground - Secondary text */
4558
+ --color-muted-foreground: oklch(45.0% 0.0060 265.0);
4559
+ --muted-foreground: oklch(45.0% 0.0060 265.0);
4560
+
4561
+ /* Primary - Brand accent */
4562
+ --color-primary: oklch(55.0% 0.2000 330.0);
4563
+ --primary: oklch(55.0% 0.2000 330.0);
4564
+ --color-accent: oklch(55.0% 0.2000 330.0);
4565
+ --accent: oklch(55.0% 0.2000 330.0);
4566
+ --color-ring: oklch(55.0% 0.2000 330.0);
4567
+ --focus: oklch(55.0% 0.2000 330.0);
4568
+
4569
+ /* Primary Foreground - Text on primary bg */
4570
+ --color-primary-foreground: oklch(96.0% 0.0060 265.0);
4571
+ --primary-foreground: oklch(96.0% 0.0060 265.0);
4572
+ --color-accent-foreground: oklch(96.0% 0.0060 265.0);
4573
+ --accent-foreground: oklch(96.0% 0.0060 265.0);
4574
+
4575
+ /* Secondary - Secondary accent */
4576
+ --color-secondary: oklch(45.0% 0.1600 330.0);
4577
+ --secondary: oklch(45.0% 0.1600 330.0);
4578
+ --color-secondary-foreground: oklch(15.0% 0.0060 265.0);
4579
+ --secondary-foreground: oklch(15.0% 0.0060 265.0);
4580
+
4581
+ /* Default - Neutral elements */
4582
+ --color-default: oklch(94.0% 0.0060 265.0);
4583
+ --default: oklch(94.0% 0.0060 265.0);
4584
+ --color-default-foreground: oklch(15.0% 0.0060 265.0);
4585
+ --default-foreground: oklch(15.0% 0.0060 265.0);
4586
+
4587
+ /* Default on Surface - Secondary buttons/badges when on a surface */
4588
+ --color-default-on-surface: oklch(90.0% 0.0060 265.0);
4589
+
4590
+ /* Border - Dividers, borders */
4591
+ --color-border: oklch(85.0% 0.0060 265.0);
4592
+ --border: oklch(85.0% 0.0060 265.0);
4593
+ --color-divider: oklch(85.0% 0.0060 265.0);
4594
+ --divider: oklch(85.0% 0.0060 265.0);
4595
+
4596
+ /* Muted - Muted backgrounds */
4597
+ --color-muted: oklch(94.0% 0.0060 265.0);
4598
+ --muted: oklch(94.0% 0.0060 265.0);
4599
+
4600
+ /* Overlay */
4601
+ --color-overlay: oklch(100.0% 0.0060 265.0);
4602
+ --overlay: oklch(100.0% 0.0060 265.0);
4603
+ --color-overlay-foreground: oklch(15.0% 0.0060 265.0);
4604
+ --overlay-foreground: oklch(15.0% 0.0060 265.0);
4605
+
4606
+ /* Icon - Icon colors */
4607
+ --color-icon: oklch(55.0% 0.1400 330.0);
4608
+
4609
+ /* Accent Text - For overlays and labels */
4610
+ --color-accent-text-overlay: oklch(45.0% 0.1000 330.0);
4611
+ --color-accent-text-page: oklch(50.0% 0.1000 330.0);
4612
+
4613
+ /* Text Selection */
4614
+ --color-text-selection: oklch(55.0% 0.0600 330.0) / 15%;
4615
+
4616
+ /* Canvas Background */
4617
+ --color-canvas-bg: #f5f5f5;
4618
+
4619
+ /* =================================================================
4620
+ * SEMANTIC RADIUS - Preset: playful
4621
+ * ================================================================= */
4622
+ --radius-button: var(--radius-2xl);
4623
+ --radius-input: var(--radius-xl);
4624
+ --radius-card: var(--radius-3xl);
4625
+ --radius-modal: var(--radius-3xl);
4626
+ --radius-badge: var(--radius-full);
4627
+ --radius-avatar: var(--radius-full);
4628
+ --radius-tooltip: var(--radius-xl);
4629
+ --radius-image: var(--radius-2xl);
4630
+ }
4631
+ /* Candy Dark */
4632
+ .dark[data-theme='ne-candy-dark'],
4633
+ [data-theme='ne-candy-dark'] .dark {
4634
+ color-scheme: dark;
4635
+
4636
+ /* =================================================================
4637
+ * OKLCH-GENERATED COLORS
4638
+ * Theme: Candy Dark | Hue: 330 | Chroma: 0.22
4639
+ * ================================================================= */
4640
+
4641
+ /* Background - Page level */
4642
+ --color-background: oklch(12.0% 0.0060 265.0);
4643
+ --background: oklch(12.0% 0.0060 265.0);
4644
+
4645
+ /* Surface - Cards, panels, modals */
4646
+ --color-surface: oklch(20.0% 0.0060 265.0);
4647
+ --color-card: oklch(20.0% 0.0060 265.0);
4648
+ --surface: oklch(20.0% 0.0060 265.0);
4649
+
4650
+ /* Surface Raised - Popovers, dropdowns */
4651
+ --color-surface-raised: oklch(25.0% 0.0060 265.0);
4652
+ --color-popover: oklch(25.0% 0.0060 265.0);
4653
+
4654
+ /* Fields - Form inputs */
4655
+ --color-field: oklch(27.0% 0.0060 265.0);
4656
+ --field: oklch(27.0% 0.0060 265.0);
4657
+ --color-field-on-surface: oklch(27.0% 0.0060 265.0);
4658
+
4659
+ /* Foreground - Text colors */
4660
+ --color-foreground: oklch(96.0% 0.0060 265.0);
4661
+ --foreground: oklch(96.0% 0.0060 265.0);
4662
+ --color-heading: oklch(96.0% 0.0060 265.0);
4663
+ --color-card-foreground: oklch(96.0% 0.0060 265.0);
4664
+ --color-popover-foreground: oklch(96.0% 0.0060 265.0);
4665
+ --surface-foreground: oklch(96.0% 0.0060 265.0);
4666
+
4667
+ /* Muted Foreground - Secondary text */
4668
+ --color-muted-foreground: oklch(65.0% 0.0060 265.0);
4669
+ --muted-foreground: oklch(65.0% 0.0060 265.0);
4670
+
4671
+ /* Primary - Brand accent */
4672
+ --color-primary: oklch(70.0% 0.2200 330.0);
4673
+ --primary: oklch(70.0% 0.2200 330.0);
4674
+ --color-accent: oklch(70.0% 0.2200 330.0);
4675
+ --accent: oklch(70.0% 0.2200 330.0);
4676
+ --color-ring: oklch(70.0% 0.2200 330.0);
4677
+ --focus: oklch(70.0% 0.2200 330.0);
4678
+
4679
+ /* Primary Foreground - Text on primary bg */
4680
+ --color-primary-foreground: oklch(12.0% 0.0060 265.0);
4681
+ --primary-foreground: oklch(12.0% 0.0060 265.0);
4682
+ --color-accent-foreground: oklch(12.0% 0.0060 265.0);
4683
+ --accent-foreground: oklch(12.0% 0.0060 265.0);
4684
+
4685
+ /* Secondary - Secondary accent */
4686
+ --color-secondary: oklch(68.0% 0.1760 330.0);
4687
+ --secondary: oklch(68.0% 0.1760 330.0);
4688
+ --color-secondary-foreground: oklch(96.0% 0.0060 265.0);
4689
+ --secondary-foreground: oklch(96.0% 0.0060 265.0);
4690
+
4691
+ /* Default - Neutral elements */
4692
+ --color-default: oklch(25.0% 0.0060 265.0);
4693
+ --default: oklch(25.0% 0.0060 265.0);
4694
+ --color-default-foreground: oklch(96.0% 0.0060 265.0);
4695
+ --default-foreground: oklch(96.0% 0.0060 265.0);
4696
+
4697
+ /* Default on Surface - Secondary buttons/badges when on a surface */
4698
+ --color-default-on-surface: oklch(30.0% 0.0060 265.0);
4699
+
4700
+ /* Border - Dividers, borders */
4701
+ --color-border: oklch(25.0% 0.0060 265.0);
4702
+ --border: oklch(25.0% 0.0060 265.0);
4703
+ --color-divider: oklch(25.0% 0.0060 265.0);
4704
+ --divider: oklch(25.0% 0.0060 265.0);
4705
+
4706
+ /* Muted - Muted backgrounds */
4707
+ --color-muted: oklch(25.0% 0.0060 265.0);
4708
+ --muted: oklch(25.0% 0.0060 265.0);
4709
+
4710
+ /* Overlay */
4711
+ --color-overlay: oklch(20.0% 0.0060 265.0);
4712
+ --overlay: oklch(20.0% 0.0060 265.0);
4713
+ --color-overlay-foreground: oklch(96.0% 0.0060 265.0);
4714
+ --overlay-foreground: oklch(96.0% 0.0060 265.0);
4715
+
4716
+ /* Icon - Icon colors */
4717
+ --color-icon: oklch(75.0% 0.1540 330.0);
4718
+
4719
+ /* Accent Text - For overlays and labels */
4720
+ --color-accent-text-overlay: oklch(75.0% 0.1100 330.0);
4721
+ --color-accent-text-page: oklch(60.0% 0.1100 330.0);
4722
+
4723
+ /* Text Selection */
4724
+ --color-text-selection: oklch(70.0% 0.0660 330.0) / 20%;
4725
+
4726
+ /* Canvas Background */
4727
+ --color-canvas-bg: #080809;
4728
+
4729
+ /* =================================================================
4730
+ * SEMANTIC RADIUS - Preset: playful
4731
+ * ================================================================= */
4732
+ --radius-button: var(--radius-2xl);
4733
+ --radius-input: var(--radius-xl);
4734
+ --radius-card: var(--radius-3xl);
4735
+ --radius-modal: var(--radius-3xl);
4736
+ --radius-badge: var(--radius-full);
4737
+ --radius-avatar: var(--radius-full);
4738
+ --radius-tooltip: var(--radius-xl);
4739
+ --radius-image: var(--radius-2xl);
4740
+ }