gui.do
Barazo default frontend
barazo.forum
1@import 'tailwindcss';
2@plugin '@tailwindcss/typography';
3
4@custom-variant dark (&:where(.dark, .dark *));
5
6@import '@radix-ui/colors/gray.css';
7@import '@radix-ui/colors/gray-dark.css';
8@import '@radix-ui/colors/sand.css';
9@import '@radix-ui/colors/sand-dark.css';
10@import '@radix-ui/colors/cyan.css';
11@import '@radix-ui/colors/cyan-dark.css';
12@import '@radix-ui/colors/purple.css';
13@import '@radix-ui/colors/purple-dark.css';
14@import '@radix-ui/colors/green.css';
15@import '@radix-ui/colors/green-dark.css';
16@import '@radix-ui/colors/orange.css';
17@import '@radix-ui/colors/orange-dark.css';
18@import '@radix-ui/colors/red.css';
19@import '@radix-ui/colors/red-dark.css';
20
21/**
22 * Barazo Design System
23 * Radix Colors (structural) + Flexoki accent hues
24 * @see decisions/frontend.md
25 */
26
27@theme inline {
28 /* Typography -- system font stack for body, Source Code Pro for code */
29 --font-mono: var(--font-source-code);
30
31 /* Radix Color Tokens - mapped to semantic roles */
32 /* Gray scale (neutral) */
33 --color-gray-1: var(--gray-1);
34 --color-gray-2: var(--gray-2);
35 --color-gray-3: var(--gray-3);
36 --color-gray-4: var(--gray-4);
37 --color-gray-5: var(--gray-5);
38 --color-gray-6: var(--gray-6);
39 --color-gray-7: var(--gray-7);
40 --color-gray-8: var(--gray-8);
41 --color-gray-9: var(--gray-9);
42 --color-gray-10: var(--gray-10);
43 --color-gray-11: var(--gray-11);
44 --color-gray-12: var(--gray-12);
45
46 /* Sand scale (warm neutral backgrounds) */
47 --color-sand-1: var(--sand-1);
48 --color-sand-2: var(--sand-2);
49 --color-sand-3: var(--sand-3);
50 --color-sand-4: var(--sand-4);
51 --color-sand-5: var(--sand-5);
52 --color-sand-6: var(--sand-6);
53 --color-sand-7: var(--sand-7);
54 --color-sand-8: var(--sand-8);
55 --color-sand-9: var(--sand-9);
56 --color-sand-10: var(--sand-10);
57 --color-sand-11: var(--sand-11);
58 --color-sand-12: var(--sand-12);
59
60 /* Primary accent - Cyan (Flexoki-inspired) */
61 --color-cyan-1: var(--cyan-1);
62 --color-cyan-2: var(--cyan-2);
63 --color-cyan-3: var(--cyan-3);
64 --color-cyan-4: var(--cyan-4);
65 --color-cyan-5: var(--cyan-5);
66 --color-cyan-6: var(--cyan-6);
67 --color-cyan-7: var(--cyan-7);
68 --color-cyan-8: var(--cyan-8);
69 --color-cyan-9: var(--cyan-9);
70 --color-cyan-10: var(--cyan-10);
71 --color-cyan-11: var(--cyan-11);
72 --color-cyan-12: var(--cyan-12);
73
74 /* Secondary accent - Purple */
75 --color-purple-1: var(--purple-1);
76 --color-purple-2: var(--purple-2);
77 --color-purple-3: var(--purple-3);
78 --color-purple-4: var(--purple-4);
79 --color-purple-5: var(--purple-5);
80 --color-purple-6: var(--purple-6);
81 --color-purple-7: var(--purple-7);
82 --color-purple-8: var(--purple-8);
83 --color-purple-9: var(--purple-9);
84 --color-purple-10: var(--purple-10);
85 --color-purple-11: var(--purple-11);
86 --color-purple-12: var(--purple-12);
87
88 /* Semantic colors - Success (Green) */
89 --color-green-1: var(--green-1);
90 --color-green-2: var(--green-2);
91 --color-green-3: var(--green-3);
92 --color-green-4: var(--green-4);
93 --color-green-5: var(--green-5);
94 --color-green-6: var(--green-6);
95 --color-green-7: var(--green-7);
96 --color-green-8: var(--green-8);
97 --color-green-9: var(--green-9);
98 --color-green-10: var(--green-10);
99 --color-green-11: var(--green-11);
100 --color-green-12: var(--green-12);
101
102 /* Semantic colors - Warning (Orange) */
103 --color-orange-1: var(--orange-1);
104 --color-orange-2: var(--orange-2);
105 --color-orange-3: var(--orange-3);
106 --color-orange-4: var(--orange-4);
107 --color-orange-5: var(--orange-5);
108 --color-orange-6: var(--orange-6);
109 --color-orange-7: var(--orange-7);
110 --color-orange-8: var(--orange-8);
111 --color-orange-9: var(--orange-9);
112 --color-orange-10: var(--orange-10);
113 --color-orange-11: var(--orange-11);
114 --color-orange-12: var(--orange-12);
115
116 /* Semantic colors - Error (Red) */
117 --color-red-1: var(--red-1);
118 --color-red-2: var(--red-2);
119 --color-red-3: var(--red-3);
120 --color-red-4: var(--red-4);
121 --color-red-5: var(--red-5);
122 --color-red-6: var(--red-6);
123 --color-red-7: var(--red-7);
124 --color-red-8: var(--red-8);
125 --color-red-9: var(--red-9);
126 --color-red-10: var(--red-10);
127 --color-red-11: var(--red-11);
128 --color-red-12: var(--red-12);
129
130 /* Semantic mapping */
131 --color-background: var(--sand-1);
132 --color-foreground: var(--sand-12);
133 --color-muted: var(--sand-3);
134 --color-muted-foreground: var(--sand-11);
135 --color-border: var(--sand-6);
136 --color-border-hover: var(--sand-7);
137 --color-input: var(--sand-3);
138 --color-input-focus: var(--sand-4);
139 --color-ring: var(--cyan-8);
140 --color-ring-offset: var(--sand-1);
141
142 /* Primary (Cyan) - cyan-9 is bright, needs dark text for AA contrast
143 Hardcoded from --sand-12 to avoid CSS var resolution issues in a11y tools */
144 --color-primary: var(--cyan-9);
145 --color-primary-foreground: #21201c;
146 --color-primary-hover: var(--cyan-10);
147 --color-primary-active: var(--cyan-11);
148 --color-primary-muted: var(--cyan-3);
149
150 /* Secondary (Purple) */
151 --color-secondary: var(--purple-9);
152 --color-secondary-foreground: #fff;
153 --color-secondary-hover: var(--purple-10);
154 --color-secondary-active: var(--purple-11);
155 --color-secondary-muted: var(--purple-3);
156
157 /* Accent (Cyan for interactive highlights) */
158 --color-accent: var(--cyan-4);
159 --color-accent-foreground: var(--cyan-12);
160
161 /* Destructive (Red) - uses var() refs so Radix dark mode auto-switches.
162 Light: #ce2c31 text (5.21:1 vs white), Dark: #ff9592 text (8.95:1 vs dark bg).
163 Foreground uses --red-1 for AA contrast on destructive backgrounds in both modes. */
164 --color-destructive: var(--red-11);
165 --color-destructive-foreground: var(--red-1);
166 --color-destructive-hover: var(--red-12);
167 --color-destructive-muted: var(--red-3);
168
169 /* Success (Green) */
170 --color-success: var(--green-9);
171 --color-success-foreground: var(--sand-12);
172 --color-success-hover: var(--green-10);
173 --color-success-muted: var(--green-3);
174
175 /* Warning (Orange) */
176 --color-warning: var(--orange-9);
177 --color-warning-foreground: var(--sand-12);
178 --color-warning-hover: var(--orange-10);
179 --color-warning-muted: var(--orange-3);
180
181 /* Info (Purple) */
182 --color-info: var(--purple-9);
183 --color-info-foreground: #fff;
184 --color-info-hover: var(--purple-10);
185 --color-info-muted: var(--purple-3);
186
187 /* Card/Surface */
188 --color-card: var(--sand-2);
189 --color-card-foreground: var(--sand-12);
190 --color-card-hover: var(--sand-3);
191 --color-popover: var(--sand-1);
192 --color-popover-foreground: var(--sand-12);
193
194 /* Shadows */
195 --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
196 --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
197 --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
198 --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
199 --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
200
201 /* Border radius */
202 --radius-sm: 0.25rem;
203 --radius-md: 0.375rem;
204 --radius-lg: 0.5rem;
205 --radius-xl: 0.75rem;
206 --radius-2xl: 1rem;
207 --radius-full: 9999px;
208}
209
210.dark {
211 /* Dark mode uses Radix dark color scales */
212 --color-background: var(--sand-dark-1);
213 --color-foreground: var(--sand-dark-12);
214 --color-muted: var(--sand-dark-3);
215 --color-muted-foreground: var(--sand-dark-11);
216 --color-border: var(--sand-dark-6);
217 --color-border-hover: var(--sand-dark-7);
218 --color-input: var(--sand-dark-3);
219 --color-input-focus: var(--sand-dark-4);
220 --color-ring: var(--cyan-dark-8);
221 --color-ring-offset: var(--sand-dark-1);
222
223 --color-card: var(--sand-dark-2);
224 --color-card-foreground: var(--sand-dark-12);
225 --color-card-hover: var(--sand-dark-3);
226 --color-popover: var(--sand-dark-1);
227 --color-popover-foreground: var(--sand-dark-12);
228}
229
230/* Container -- Tailwind v4 no longer includes mx-auto/padding by default */
231@utility container {
232 margin-inline: auto;
233 padding-inline: 1rem;
234 max-width: 80rem;
235}
236
237/* Restore centering for native <dialog> elements.
238 Tailwind's preflight resets margin to 0, which strips the browser's
239 default margin:auto that centers modal dialogs opened via showModal(). */
240dialog {
241 margin: auto;
242}
243
244/* Base styles */
245* {
246 border-color: var(--color-border);
247}
248
249html {
250 scroll-behavior: smooth;
251}
252
253body {
254 background-color: var(--color-background);
255 color: var(--color-foreground);
256 font-feature-settings:
257 'rlig' 1,
258 'calt' 1;
259}
260
261/* Focus visible styles */
262:focus-visible {
263 outline: 2px solid var(--color-ring);
264 outline-offset: 2px;
265}
266
267/* Reduced motion */
268@media (prefers-reduced-motion: reduce) {
269 *,
270 *::before,
271 *::after {
272 animation-duration: 0.01ms !important;
273 animation-iteration-count: 1 !important;
274 transition-duration: 0.01ms !important;
275 scroll-behavior: auto !important;
276 }
277}
278
279/* Selection color */
280::selection {
281 background-color: var(--color-primary-muted);
282 color: var(--color-primary);
283}
284
285/* Drawer animations for admin mobile sidebar */
286@keyframes slide-in-left {
287 from {
288 transform: translateX(-100%);
289 }
290 to {
291 transform: translateX(0);
292 }
293}
294
295@keyframes slide-out-left {
296 from {
297 transform: translateX(0);
298 }
299 to {
300 transform: translateX(-100%);
301 }
302}
303
304@keyframes fade-in {
305 from {
306 opacity: 0;
307 }
308 to {
309 opacity: 1;
310 }
311}
312
313@keyframes fade-out {
314 from {
315 opacity: 1;
316 }
317 to {
318 opacity: 0;
319 }
320}
321
322@utility animate-slide-in-left {
323 animation: slide-in-left 200ms ease-out;
324}
325
326@utility animate-slide-out-left {
327 animation: slide-out-left 200ms ease-in;
328}
329
330@utility animate-fade-in {
331 animation: fade-in 200ms ease-out;
332}
333
334@utility animate-fade-out {
335 animation: fade-out 200ms ease-in;
336}
337
338/* Component classes */
339@layer components {
340 .prose-barazo a {
341 color: var(--cyan-11);
342 text-decoration: underline;
343 text-decoration-color: color-mix(in srgb, var(--cyan-11) 40%, transparent);
344 text-underline-offset: 2px;
345 }
346 .prose-barazo a:hover {
347 text-decoration-color: var(--cyan-11);
348 }
349}