krz/brand-bench
A dynamic brand documentation generator with Ollama integration.
clone: git clone https://gitbay.org/krz/brand-bench.git
main: src/styles/globals.css · raw
1/* ── Reset ───────────────────────────────────────────────────────────────── */
2
3*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
4html { font-size: 14px; }
5
6/* ── Tokens ──────────────────────────────────────────────────────────────── */
7
8:root {
9 --bg: #0d0d0d;
10 --bg-1: #111111;
11 --bg-2: #161616;
12 --bg-3: #1c1c1c;
13 --bg-4: #222222;
14
15 --border: #242424;
16 --border-2: #1a1a1a;
17 --border-3: #2e2e2e;
18
19 --text: #dedede;
20 --text-2: #999999;
21 --text-3: #555555;
22 --text-4: #333333;
23
24 --accent: #c9a96e;
25 --accent-dim: #7a6341;
26
27 --success: #4a9470;
28 --danger: #8a3030;
29
30 --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
31 --font-mono: ui-monospace, 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, monospace;
32
33 --r: 4px;
34 --r-lg: 6px;
35 --header-h: 44px;
36 --panel-w: 360px;
37}
38
39/* ── Base ────────────────────────────────────────────────────────────────── */
40
41body {
42 background: var(--bg);
43 color: var(--text);
44 font-family: var(--font-sans);
45 font-size: 13px;
46 line-height: 1.5;
47 -webkit-font-smoothing: antialiased;
48 overflow: hidden;
49 height: 100vh;
50}
51
52#root { height: 100vh; display: flex; flex-direction: column; }
53
54/* ── App Header ──────────────────────────────────────────────────────────── */
55
56.app-header {
57 height: var(--header-h);
58 min-height: var(--header-h);
59 display: flex;
60 align-items: center;
61 justify-content: space-between;
62 padding: 0 16px;
63 border-bottom: 1px solid var(--border);
64 background: var(--bg-1);
65 flex-shrink: 0;
66 gap: 12px;
67}
68
69.app-header-left {
70 display: flex;
71 align-items: center;
72 gap: 12px;
73 min-width: 0;
74}
75
76.app-wordmark {
77 font-size: 12px;
78 font-weight: 600;
79 letter-spacing: 0.05em;
80 color: var(--text);
81 text-transform: uppercase;
82 flex-shrink: 0;
83}
84
85.app-wordmark span {
86 color: var(--text-3);
87 font-weight: 400;
88}
89
90.app-project-name {
91 font-size: 12px;
92 color: var(--text-3);
93 overflow: hidden;
94 text-overflow: ellipsis;
95 white-space: nowrap;
96}
97
98.app-project-name::before {
99 content: '/ ';
100 color: var(--text-4);
101}
102
103.app-header-right {
104 display: flex;
105 align-items: center;
106 gap: 6px;
107 flex-shrink: 0;
108}
109
110/* ── Package Switcher ────────────────────────────────────────────────────── */
111
112.pkg-switcher {
113 display: flex;
114 align-items: center;
115 gap: 2px;
116 overflow-x: auto;
117 scrollbar-width: none;
118 max-width: 480px;
119}
120
121.pkg-switcher::-webkit-scrollbar { display: none; }
122
123.pkg-tab {
124 display: flex;
125 align-items: center;
126 gap: 4px;
127 padding: 0 8px;
128 height: 26px;
129 border-radius: var(--r);
130 border: 1px solid transparent;
131 font-size: 12px;
132 color: var(--text-3);
133 cursor: pointer;
134 white-space: nowrap;
135 user-select: none;
136 transition: all 0.1s;
137 flex-shrink: 0;
138}
139
140.pkg-tab:hover {
141 background: var(--bg-3);
142 color: var(--text-2);
143}
144
145.pkg-tab.active {
146 background: var(--bg-3);
147 border-color: var(--border);
148 color: var(--text);
149}
150
151.pkg-tab-name {
152 max-width: 120px;
153 overflow: hidden;
154 text-overflow: ellipsis;
155}
156
157.pkg-tab-input {
158 width: 100px;
159 background: transparent;
160 border: none;
161 outline: none;
162 font-size: 12px;
163 font-family: inherit;
164 color: var(--text);
165 padding: 0;
166}
167
168.pkg-tab-actions {
169 display: flex;
170 align-items: center;
171 gap: 2px;
172 margin-left: 2px;
173 opacity: 0;
174 transition: opacity 0.1s;
175}
176
177.pkg-tab:hover .pkg-tab-actions,
178.pkg-tab.active .pkg-tab-actions {
179 opacity: 1;
180}
181
182.pkg-tab-close, .pkg-tab-menu-btn {
183 background: none;
184 border: none;
185 color: var(--text-4);
186 cursor: pointer;
187 font-size: 12px;
188 padding: 0 2px;
189 line-height: 1;
190 display: flex;
191 align-items: center;
192 border-radius: 2px;
193 height: 16px;
194}
195
196.pkg-tab-close:hover, .pkg-tab-menu-btn:hover {
197 background: var(--bg-4);
198 color: var(--text-2);
199}
200
201.pkg-tab-menu-btn {
202 letter-spacing: -1px;
203 font-size: 10px;
204}
205
206.pkg-tab-dropdown {
207 background: var(--bg-3);
208 border: 1px solid var(--border-3);
209 border-radius: var(--r-lg);
210 padding: 4px;
211 z-index: 100;
212 min-width: 120px;
213 box-shadow: 0 4px 16px rgba(0,0,0,0.4);
214}
215
216.pkg-tab-dropdown button {
217 display: block;
218 width: 100%;
219 text-align: left;
220 background: none;
221 border: none;
222 color: var(--text-2);
223 font-size: 12px;
224 font-family: inherit;
225 padding: 5px 8px;
226 border-radius: var(--r);
227 cursor: pointer;
228}
229
230.pkg-tab-dropdown button:hover {
231 background: var(--bg-4);
232 color: var(--text);
233}
234
235.pkg-tab-dropdown button.danger { color: #c04040; }
236.pkg-tab-dropdown button.danger:hover { background: rgba(192,64,64,0.15); }
237
238.pkg-new-btn {
239 width: 26px;
240 height: 26px;
241 border-radius: var(--r);
242 border: 1px dashed var(--border-3);
243 background: none;
244 color: var(--text-4);
245 font-size: 16px;
246 cursor: pointer;
247 display: flex;
248 align-items: center;
249 justify-content: center;
250 flex-shrink: 0;
251 transition: all 0.1s;
252}
253
254.pkg-new-btn:hover {
255 border-color: var(--text-3);
256 color: var(--text-2);
257 background: var(--bg-3);
258}
259
260/* ── App Shell ───────────────────────────────────────────────────────────── */
261
262.app-shell {
263 display: flex;
264 flex: 1;
265 min-height: 0;
266 overflow: hidden;
267}
268
269/* ── Input Panel ─────────────────────────────────────────────────────────── */
270
271.input-panel {
272 width: var(--panel-w);
273 min-width: var(--panel-w);
274 border-right: 1px solid var(--border);
275 display: flex;
276 flex-direction: column;
277 overflow-y: auto;
278 background: var(--bg-1);
279}
280
281.input-panel::-webkit-scrollbar { width: 4px; }
282.input-panel::-webkit-scrollbar-track { background: transparent; }
283.input-panel::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 2px; }
284
285.input-section {
286 padding: 16px;
287 border-bottom: 1px solid var(--border-2);
288}
289
290.input-section:last-of-type { border-bottom: none; }
291
292.input-section-label {
293 font-size: 10px;
294 font-weight: 600;
295 letter-spacing: 0.1em;
296 text-transform: uppercase;
297 color: var(--text-3);
298 margin-bottom: 12px;
299}
300
301/* ── Form Fields ─────────────────────────────────────────────────────────── */
302
303.field {
304 display: flex;
305 flex-direction: column;
306 gap: 5px;
307 margin-bottom: 10px;
308}
309
310.field:last-child { margin-bottom: 0; }
311
312.field-label {
313 font-size: 11px;
314 color: var(--text-2);
315 font-weight: 500;
316}
317
318.field-input,
319.field-textarea {
320 background: var(--bg);
321 border: 1px solid var(--border);
322 border-radius: var(--r);
323 color: var(--text);
324 font-family: var(--font-sans);
325 font-size: 13px;
326 padding: 7px 10px;
327 width: 100%;
328 transition: border-color 0.1s;
329 outline: none;
330}
331
332.field-input::placeholder,
333.field-textarea::placeholder {
334 color: var(--text-4);
335}
336
337.field-input:focus,
338.field-textarea:focus {
339 border-color: var(--border-3);
340}
341
342.field-textarea {
343 resize: vertical;
344 min-height: 72px;
345 line-height: 1.5;
346}
347
348/* ── Token Input ─────────────────────────────────────────────────────────── */
349
350.token-field {
351 display: flex;
352 flex-direction: column;
353 gap: 5px;
354}
355
356.token-container {
357 display: flex;
358 flex-wrap: wrap;
359 gap: 5px;
360 background: var(--bg);
361 border: 1px solid var(--border);
362 border-radius: var(--r);
363 padding: 6px;
364 min-height: 36px;
365 cursor: text;
366 transition: border-color 0.1s;
367}
368
369.token-container:focus-within {
370 border-color: var(--border-3);
371}
372
373.token {
374 display: flex;
375 align-items: center;
376 gap: 4px;
377 background: var(--bg-3);
378 border: 1px solid var(--border);
379 border-radius: 3px;
380 padding: 2px 7px 2px 8px;
381 font-size: 12px;
382 color: var(--text-2);
383 line-height: 1;
384 height: 22px;
385}
386
387.token-remove {
388 background: none;
389 border: none;
390 color: var(--text-3);
391 cursor: pointer;
392 font-size: 14px;
393 line-height: 1;
394 padding: 0;
395 display: flex;
396 align-items: center;
397 margin-left: 1px;
398 opacity: 0.7;
399}
400
401.token-remove:hover { color: var(--text); opacity: 1; }
402
403.token-input {
404 background: none;
405 border: none;
406 color: var(--text);
407 font-family: var(--font-sans);
408 font-size: 12px;
409 outline: none;
410 min-width: 80px;
411 flex: 1;
412 padding: 2px 2px;
413}
414
415.token-input::placeholder { color: var(--text-4); }
416
417.token-suggestions {
418 display: flex;
419 flex-wrap: wrap;
420 gap: 4px;
421 margin-top: 6px;
422}
423
424.token-suggestion {
425 background: none;
426 border: 1px solid var(--border);
427 border-radius: 3px;
428 color: var(--text-3);
429 cursor: pointer;
430 font-family: var(--font-sans);
431 font-size: 11px;
432 padding: 2px 7px;
433 transition: all 0.1s;
434}
435
436.token-suggestion:hover {
437 border-color: var(--border-3);
438 color: var(--text-2);
439}
440
441.token-suggestion.active {
442 background: var(--bg-3);
443 border-color: var(--border-3);
444 color: var(--text);
445}
446
447/* ── Generate Button ─────────────────────────────────────────────────────── */
448
449.generate-area {
450 padding: 12px 16px 16px;
451}
452
453.btn-generate {
454 width: 100%;
455 background: var(--text);
456 border: none;
457 border-radius: var(--r);
458 color: var(--bg);
459 cursor: pointer;
460 font-family: var(--font-sans);
461 font-size: 13px;
462 font-weight: 600;
463 height: 36px;
464 letter-spacing: 0.01em;
465 transition: opacity 0.1s, background 0.1s;
466}
467
468.btn-generate:hover:not(:disabled) {
469 opacity: 0.9;
470}
471
472.btn-generate:disabled {
473 opacity: 0.4;
474 cursor: not-allowed;
475}
476
477.btn-generate.generating {
478 background: var(--bg-3);
479 color: var(--text-2);
480}
481
482/* ── Shared Buttons ──────────────────────────────────────────────────────── */
483
484.btn {
485 align-items: center;
486 background: var(--bg-3);
487 border: 1px solid var(--border);
488 border-radius: var(--r);
489 color: var(--text-2);
490 cursor: pointer;
491 display: inline-flex;
492 font-family: var(--font-sans);
493 font-size: 12px;
494 gap: 5px;
495 height: 28px;
496 padding: 0 10px;
497 transition: all 0.1s;
498 white-space: nowrap;
499}
500
501.btn:hover {
502 border-color: var(--border-3);
503 color: var(--text);
504}
505
506.btn-ghost {
507 background: none;
508 border-color: transparent;
509 color: var(--text-3);
510}
511
512.btn-ghost:hover {
513 background: var(--bg-3);
514 border-color: var(--border);
515 color: var(--text-2);
516}
517
518.btn-icon {
519 padding: 0;
520 width: 28px;
521 justify-content: center;
522}
523
524/* ── Preview Panel ───────────────────────────────────────────────────────── */
525
526.preview-panel {
527 flex: 1;
528 min-width: 0;
529 display: flex;
530 flex-direction: column;
531 overflow: hidden;
532 background: var(--bg);
533}
534
535.preview-toolbar {
536 height: 40px;
537 min-height: 40px;
538 display: flex;
539 align-items: center;
540 justify-content: space-between;
541 padding: 0 20px;
542 border-bottom: 1px solid var(--border-2);
543 background: var(--bg);
544 flex-shrink: 0;
545 gap: 12px;
546}
547
548.preview-toolbar-left {
549 display: flex;
550 align-items: center;
551 gap: 10px;
552}
553
554.preview-toolbar-right {
555 display: flex;
556 align-items: center;
557 gap: 6px;
558}
559
560.preview-doc-label {
561 font-size: 11px;
562 color: var(--text-3);
563 font-weight: 500;
564}
565
566.preview-scroll {
567 flex: 1;
568 overflow-y: auto;
569 padding: 40px 48px 80px;
570}
571
572.preview-scroll::-webkit-scrollbar { width: 6px; }
573.preview-scroll::-webkit-scrollbar-track { background: transparent; }
574.preview-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
575
576/* ── Empty State ─────────────────────────────────────────────────────────── */
577
578.empty-state {
579 display: flex;
580 flex-direction: column;
581 align-items: center;
582 justify-content: center;
583 height: 100%;
584 gap: 8px;
585 color: var(--text-4);
586}
587
588.empty-state-title {
589 font-size: 14px;
590 color: var(--text-3);
591 font-weight: 500;
592}
593
594.empty-state-sub {
595 font-size: 12px;
596 color: var(--text-4);
597}
598
599/* ── Brand Document ──────────────────────────────────────────────────────── */
600
601.brand-doc {
602 max-width: 720px;
603}
604
605.brand-doc-header {
606 margin-bottom: 40px;
607 padding-bottom: 24px;
608 border-bottom: 1px solid var(--border-2);
609}
610
611.brand-doc-title {
612 font-size: 28px;
613 font-weight: 600;
614 letter-spacing: -0.02em;
615 color: var(--text);
616 line-height: 1.2;
617 margin-bottom: 6px;
618}
619
620.brand-doc-meta {
621 font-size: 11px;
622 color: var(--text-3);
623 display: flex;
624 gap: 12px;
625}
626
627.brand-doc-meta-item {
628 display: flex;
629 gap: 5px;
630}
631
632.brand-doc-meta-label {
633 color: var(--text-4);
634}
635
636/* ── Doc Section ─────────────────────────────────────────────────────────── */
637
638.doc-section {
639 margin-bottom: 36px;
640 border-radius: var(--r);
641 padding: 2px;
642 margin: -2px -2px 36px;
643}
644
645.doc-section.is-locked {
646 background: rgba(201, 169, 110, 0.025);
647}
648
649.doc-section-header {
650 display: flex;
651 align-items: center;
652 justify-content: space-between;
653 margin-bottom: 14px;
654 gap: 8px;
655}
656
657.doc-section-title {
658 font-size: 10px;
659 font-weight: 600;
660 letter-spacing: 0.12em;
661 text-transform: uppercase;
662 color: var(--text-3);
663 display: flex;
664 align-items: center;
665 gap: 7px;
666}
667
668.section-lock {
669 background: none;
670 border: 1px solid transparent;
671 border-radius: 3px;
672 color: var(--text-4);
673 cursor: pointer;
674 font-family: var(--font-sans);
675 font-size: 10px;
676 letter-spacing: 0.04em;
677 padding: 2px 6px;
678 height: 20px;
679 display: inline-flex;
680 align-items: center;
681 transition: all 0.1s;
682 line-height: 1;
683 white-space: nowrap;
684}
685
686.section-lock:hover {
687 border-color: var(--border);
688 color: var(--text-3);
689 background: var(--bg-3);
690}
691
692.section-lock.locked {
693 color: var(--accent);
694 border-color: var(--accent-dim);
695 background: rgba(201, 169, 110, 0.06);
696}
697
698.doc-section-actions {
699 display: flex;
700 align-items: center;
701 gap: 4px;
702 opacity: 0;
703 transition: opacity 0.15s;
704}
705
706.doc-section:hover .doc-section-actions { opacity: 1; }
707.doc-section .doc-section-actions:has(.section-lock.locked) { opacity: 1; }
708
709.doc-section-body {
710 border-left: 1px solid var(--border);
711 padding-left: 16px;
712}
713
714.doc-section.is-locked .doc-section-body {
715 border-left-color: var(--accent-dim);
716 border-left-width: 2px;
717}
718
719/* ── Editable Text ───────────────────────────────────────────────────────── */
720
721.editable-text {
722 cursor: text;
723 border-radius: 3px;
724 transition: background 0.1s, outline 0.1s;
725 line-height: 1.65;
726 font-size: 14px;
727 color: var(--text);
728 min-height: 1em;
729 outline: 1px solid transparent;
730}
731
732.editable-text:hover {
733 background: var(--bg-2);
734 outline-color: var(--border-2);
735}
736
737.editable-text.editing {
738 background: var(--bg-2);
739 outline: 1px solid var(--border-3);
740 border-radius: 3px;
741}
742
743/* ── Numbered List ───────────────────────────────────────────────────────── */
744
745.numbered-list {
746 display: flex;
747 flex-direction: column;
748 gap: 8px;
749}
750
751.numbered-item {
752 display: flex;
753 gap: 10px;
754 align-items: flex-start;
755}
756
757.numbered-item-num {
758 font-size: 11px;
759 color: var(--text-4);
760 font-family: var(--font-mono);
761 min-width: 16px;
762 margin-top: 2px;
763 flex-shrink: 0;
764}
765
766.numbered-item-text {
767 flex: 1;
768 font-size: 14px;
769 color: var(--text);
770 line-height: 1.5;
771 cursor: text;
772 border-radius: 3px;
773 padding: 1px 4px;
774 margin: -1px -4px;
775 transition: background 0.1s;
776}
777
778.numbered-item-text:hover { background: var(--bg-2); }
779.numbered-item-text:focus { background: var(--bg-2); outline: 1px solid var(--border-3); }
780
781/* ── Bullet List ─────────────────────────────────────────────────────────── */
782
783.bullet-list {
784 display: flex;
785 flex-direction: column;
786 gap: 6px;
787}
788
789.bullet-item {
790 display: flex;
791 gap: 8px;
792 align-items: flex-start;
793 font-size: 13px;
794 color: var(--text-2);
795 line-height: 1.5;
796}
797
798.bullet-item::before {
799 content: '–';
800 color: var(--text-4);
801 flex-shrink: 0;
802 margin-top: 0;
803}
804
805/* ── Tone Section ────────────────────────────────────────────────────────── */
806
807.tone-grid {
808 display: flex;
809 flex-direction: column;
810 gap: 12px;
811}
812
813.tone-row {
814 display: flex;
815 flex-direction: column;
816 gap: 4px;
817}
818
819.tone-row-label {
820 font-size: 11px;
821 color: var(--text-3);
822 font-weight: 500;
823}
824
825.tone-row-value {
826 font-size: 13px;
827 color: var(--text-2);
828 line-height: 1.55;
829}
830
831.tone-tags {
832 display: flex;
833 flex-wrap: wrap;
834 gap: 5px;
835}
836
837.tone-tag {
838 background: var(--bg-3);
839 border: 1px solid var(--border);
840 border-radius: 3px;
841 color: var(--text-2);
842 font-size: 11px;
843 padding: 2px 8px;
844}
845
846.tone-phrases {
847 display: flex;
848 flex-direction: column;
849 gap: 5px;
850}
851
852.tone-phrase {
853 font-family: var(--font-mono);
854 font-size: 12px;
855 color: var(--text-2);
856 padding: 5px 8px;
857 background: var(--bg-2);
858 border-radius: 3px;
859 border-left: 2px solid var(--border-3);
860}
861
862/* ── Visual Directions ───────────────────────────────────────────────────── */
863
864.directions-grid {
865 display: flex;
866 flex-direction: column;
867 gap: 20px;
868}
869
870.direction-card {
871 border: 1px solid var(--border);
872 border-radius: var(--r-lg);
873 padding: 16px;
874 background: var(--bg-1);
875}
876
877.direction-name {
878 font-size: 13px;
879 font-weight: 600;
880 color: var(--text);
881 margin-bottom: 8px;
882}
883
884.direction-desc {
885 font-size: 13px;
886 color: var(--text-2);
887 line-height: 1.6;
888 margin-bottom: 12px;
889}
890
891.direction-attrs {
892 display: flex;
893 flex-direction: column;
894 gap: 6px;
895}
896
897.direction-attr {
898 display: flex;
899 gap: 8px;
900 font-size: 12px;
901 line-height: 1.5;
902}
903
904.direction-attr-label {
905 color: var(--text-4);
906 font-weight: 500;
907 min-width: 88px;
908 flex-shrink: 0;
909}
910
911.direction-attr-value {
912 color: var(--text-2);
913}
914
915/* ── Logo Concepts ───────────────────────────────────────────────────────── */
916
917.logo-grid {
918 display: flex;
919 flex-direction: column;
920 gap: 20px;
921}
922
923.logo-card {
924 border: 1px solid var(--border);
925 border-radius: var(--r-lg);
926 padding: 16px;
927 background: var(--bg-1);
928}
929
930.logo-card-title {
931 font-size: 13px;
932 font-weight: 600;
933 color: var(--text);
934 margin-bottom: 8px;
935}
936
937.logo-card-concept {
938 font-size: 13px;
939 color: var(--text-2);
940 line-height: 1.6;
941 margin-bottom: 12px;
942}
943
944.logo-card-attrs {
945 display: flex;
946 flex-direction: column;
947 gap: 6px;
948}
949
950.logo-card-attr {
951 display: flex;
952 gap: 8px;
953 font-size: 12px;
954 line-height: 1.5;
955}
956
957.logo-card-attr-label {
958 color: var(--text-4);
959 font-weight: 500;
960 min-width: 72px;
961 flex-shrink: 0;
962}
963
964.logo-card-attr-value {
965 color: var(--text-2);
966}
967
968/* ── Usage Examples ──────────────────────────────────────────────────────── */
969
970.usage-grid {
971 display: flex;
972 flex-direction: column;
973 gap: 16px;
974}
975
976.usage-item {
977 display: flex;
978 flex-direction: column;
979 gap: 6px;
980}
981
982.usage-context {
983 font-size: 10px;
984 font-weight: 600;
985 letter-spacing: 0.08em;
986 text-transform: uppercase;
987 color: var(--text-4);
988}
989
990.usage-text {
991 font-family: var(--font-mono);
992 font-size: 12px;
993 color: var(--text-2);
994 background: var(--bg-2);
995 border: 1px solid var(--border-2);
996 border-radius: var(--r);
997 padding: 10px 12px;
998 white-space: pre-wrap;
999 line-height: 1.6;
1000 position: relative;
1001}
1002
1003.usage-copy {
1004 position: absolute;
1005 top: 6px;
1006 right: 6px;
1007 opacity: 0;
1008 transition: opacity 0.1s;
1009}
1010
1011.usage-item:hover .usage-copy { opacity: 1; }
1012
1013/* ── Typography Section ──────────────────────────────────────────────────── */
1014
1015.type-section {
1016 display: flex;
1017 flex-direction: column;
1018 gap: 20px;
1019}
1020
1021.type-fonts {
1022 display: flex;
1023 flex-direction: column;
1024 gap: 6px;
1025}
1026
1027.type-font-row {
1028 display: flex;
1029 align-items: baseline;
1030 gap: 10px;
1031 font-size: 13px;
1032}
1033
1034.type-font-role {
1035 font-size: 11px;
1036 color: var(--text-4);
1037 font-weight: 500;
1038 min-width: 80px;
1039 flex-shrink: 0;
1040}
1041
1042.type-font-name {
1043 color: var(--text);
1044 font-weight: 500;
1045}
1046
1047.type-pair-note {
1048 font-size: 12px;
1049 color: var(--text-3);
1050 margin-top: 4px;
1051}
1052
1053.type-scale {
1054 display: flex;
1055 flex-direction: column;
1056}
1057
1058.type-scale-header {
1059 display: grid;
1060 grid-template-columns: 90px 52px 56px 1fr;
1061 gap: 0 12px;
1062 font-size: 10px;
1063 font-weight: 600;
1064 color: var(--text-4);
1065 letter-spacing: 0.06em;
1066 text-transform: uppercase;
1067 padding: 0 0 6px;
1068 border-bottom: 1px solid var(--border-2);
1069}
1070
1071.type-scale-row {
1072 display: grid;
1073 grid-template-columns: 90px 52px 56px 1fr;
1074 gap: 0 12px;
1075 font-size: 12px;
1076 padding: 7px 0;
1077 border-bottom: 1px solid var(--border-2);
1078 align-items: center;
1079}
1080
1081.type-scale-row:last-child { border-bottom: none; }
1082
1083.type-scale-label { color: var(--text-2); font-weight: 500; }
1084.type-scale-size { color: var(--text-3); font-family: var(--font-mono); }
1085.type-scale-weight{ color: var(--text-3); font-family: var(--font-mono); }
1086.type-scale-usage { color: var(--text-4); }
1087
1088/* ── Color Palette ───────────────────────────────────────────────────────── */
1089
1090.color-palette {
1091 display: flex;
1092 flex-wrap: wrap;
1093 gap: 10px;
1094 align-items: flex-start;
1095}
1096
1097.color-swatch-card {
1098 display: flex;
1099 flex-direction: column;
1100 width: 88px;
1101 gap: 6px;
1102}
1103
1104.color-swatch-preview {
1105 position: relative;
1106 width: 88px;
1107 height: 60px;
1108 border-radius: var(--r);
1109 border: 1px solid rgba(0,0,0,0.15);
1110 overflow: hidden;
1111 cursor: pointer;
1112}
1113
1114.color-swatch-picker {
1115 position: absolute;
1116 inset: 0;
1117 width: 100%;
1118 height: 100%;
1119 opacity: 0;
1120 cursor: pointer;
1121 border: none;
1122 padding: 0;
1123}
1124
1125.color-swatch-remove {
1126 position: absolute;
1127 top: 4px;
1128 right: 4px;
1129 width: 16px;
1130 height: 16px;
1131 border-radius: 50%;
1132 background: rgba(0,0,0,0.5);
1133 border: none;
1134 color: #fff;
1135 font-size: 12px;
1136 line-height: 1;
1137 cursor: pointer;
1138 display: flex;
1139 align-items: center;
1140 justify-content: center;
1141 opacity: 0;
1142 transition: opacity 0.1s;
1143 padding: 0;
1144 z-index: 1;
1145}
1146
1147.color-swatch-card:hover .color-swatch-remove { opacity: 1; }
1148
1149.color-swatch-info {
1150 display: flex;
1151 flex-direction: column;
1152 gap: 2px;
1153}
1154
1155.color-swatch-name {
1156 font-size: 11px;
1157 font-weight: 500;
1158 color: var(--text-2);
1159 cursor: text;
1160 white-space: nowrap;
1161 overflow: hidden;
1162 text-overflow: ellipsis;
1163}
1164
1165.color-swatch-name:hover { color: var(--text); }
1166
1167.color-swatch-hex {
1168 font-family: var(--font-mono);
1169 font-size: 10px;
1170 color: var(--text-3);
1171 cursor: text;
1172}
1173
1174.color-swatch-hex:hover { color: var(--text-2); }
1175
1176.color-swatch-field-input {
1177 width: 100%;
1178 background: var(--bg-2);
1179 border: 1px solid var(--border-3);
1180 border-radius: 3px;
1181 color: var(--text);
1182 font-family: inherit;
1183 font-size: 11px;
1184 padding: 1px 4px;
1185 outline: none;
1186}
1187
1188.color-swatch-hex-input {
1189 font-family: var(--font-mono);
1190 font-size: 10px;
1191}
1192
1193.color-swatch-add {
1194 width: 88px;
1195 height: 60px;
1196 border-radius: var(--r);
1197 border: 1px dashed var(--border-3);
1198 background: none;
1199 color: var(--text-4);
1200 font-size: 20px;
1201 cursor: pointer;
1202 display: flex;
1203 align-items: center;
1204 justify-content: center;
1205 transition: all 0.1s;
1206 align-self: flex-start;
1207}
1208
1209.color-swatch-add:hover {
1210 border-color: var(--text-3);
1211 color: var(--text-2);
1212 background: var(--bg-2);
1213}
1214
1215/* ── Constraints ─────────────────────────────────────────────────────────── */
1216
1217.constraints-list {
1218 display: flex;
1219 flex-direction: column;
1220 gap: 5px;
1221}
1222
1223.constraint-item {
1224 font-size: 13px;
1225 color: var(--text-2);
1226 line-height: 1.5;
1227 display: flex;
1228 gap: 8px;
1229}
1230
1231.constraint-item::before {
1232 content: '·';
1233 color: var(--text-4);
1234 flex-shrink: 0;
1235}
1236
1237/* ── Copy feedback ───────────────────────────────────────────────────────── */
1238
1239.copy-btn {
1240 background: var(--bg-3);
1241 border: 1px solid var(--border);
1242 border-radius: 3px;
1243 color: var(--text-3);
1244 cursor: pointer;
1245 font-family: var(--font-sans);
1246 font-size: 10px;
1247 padding: 2px 7px;
1248 height: 20px;
1249 display: inline-flex;
1250 align-items: center;
1251 gap: 4px;
1252 transition: all 0.1s;
1253 white-space: nowrap;
1254}
1255
1256.copy-btn:hover {
1257 border-color: var(--border-3);
1258 color: var(--text-2);
1259}
1260
1261.copy-btn.copied {
1262 color: var(--success);
1263 border-color: var(--success);
1264}
1265
1266/* ── Export Bar ──────────────────────────────────────────────────────────── */
1267
1268.export-bar {
1269 height: 44px;
1270 min-height: 44px;
1271 display: flex;
1272 align-items: center;
1273 justify-content: space-between;
1274 padding: 0 20px;
1275 border-top: 1px solid var(--border);
1276 background: var(--bg-1);
1277 flex-shrink: 0;
1278}
1279
1280.export-bar-left {
1281 font-size: 11px;
1282 color: var(--text-4);
1283}
1284
1285.export-bar-right {
1286 display: flex;
1287 gap: 6px;
1288}
1289
1290/* ── AI badge ────────────────────────────────────────────────────────────── */
1291
1292.settings-open-btn { font-size: 16px; }
1293
1294.ai-badge {
1295 font-size: 9px;
1296 font-weight: 700;
1297 letter-spacing: 0.08em;
1298 color: var(--accent);
1299 border: 1px solid var(--accent-dim);
1300 border-radius: 3px;
1301 padding: 1px 5px;
1302 cursor: default;
1303 flex-shrink: 0;
1304}
1305
1306/* ── Generate error banner ───────────────────────────────────────────────── */
1307
1308.generate-error {
1309 display: flex;
1310 align-items: center;
1311 gap: 8px;
1312 padding: 8px 20px;
1313 background: rgba(138, 48, 48, 0.15);
1314 border-bottom: 1px solid rgba(138, 48, 48, 0.3);
1315 font-size: 12px;
1316 flex-shrink: 0;
1317}
1318
1319.generate-error-icon { color: #c04040; flex-shrink: 0; }
1320.generate-error-msg { color: var(--text-2); flex: 1; line-height: 1.4; }
1321.generate-error-retry { margin-left: auto; font-size: 11px; flex-shrink: 0; }
1322
1323/* ── Settings overlay + panel ────────────────────────────────────────────── */
1324
1325.settings-overlay {
1326 position: fixed;
1327 inset: 0;
1328 background: rgba(0, 0, 0, 0.6);
1329 z-index: 200;
1330 display: flex;
1331 align-items: flex-start;
1332 justify-content: flex-end;
1333 padding: var(--header-h) 0 0;
1334}
1335
1336.settings-panel {
1337 width: 400px;
1338 height: calc(100vh - var(--header-h));
1339 background: var(--bg-2);
1340 border-left: 1px solid var(--border-3);
1341 display: flex;
1342 flex-direction: column;
1343 overflow: hidden;
1344}
1345
1346.settings-header {
1347 display: flex;
1348 align-items: center;
1349 justify-content: space-between;
1350 padding: 0 20px;
1351 height: 44px;
1352 border-bottom: 1px solid var(--border);
1353 flex-shrink: 0;
1354}
1355
1356.settings-title {
1357 font-size: 12px;
1358 font-weight: 600;
1359 color: var(--text);
1360 letter-spacing: 0.04em;
1361 text-transform: uppercase;
1362}
1363
1364.settings-close {
1365 background: none;
1366 border: none;
1367 color: var(--text-3);
1368 font-size: 18px;
1369 cursor: pointer;
1370 padding: 0;
1371 line-height: 1;
1372 width: 24px;
1373 height: 24px;
1374 display: flex;
1375 align-items: center;
1376 justify-content: center;
1377 border-radius: var(--r);
1378}
1379
1380.settings-close:hover { background: var(--bg-3); color: var(--text); }
1381
1382.settings-body {
1383 flex: 1;
1384 overflow-y: auto;
1385 padding: 20px;
1386 display: flex;
1387 flex-direction: column;
1388 gap: 28px;
1389}
1390
1391.settings-section {
1392 display: flex;
1393 flex-direction: column;
1394 gap: 12px;
1395}
1396
1397.settings-section-label {
1398 font-size: 10px;
1399 font-weight: 700;
1400 letter-spacing: 0.1em;
1401 text-transform: uppercase;
1402 color: var(--text-4);
1403}
1404
1405.settings-toggle-row {
1406 display: flex;
1407 align-items: center;
1408 justify-content: space-between;
1409 gap: 12px;
1410 cursor: pointer;
1411}
1412
1413.settings-toggle-info {
1414 display: flex;
1415 flex-direction: column;
1416 gap: 2px;
1417}
1418
1419.settings-toggle-name {
1420 font-size: 13px;
1421 color: var(--text);
1422 font-weight: 500;
1423}
1424
1425.settings-toggle-desc {
1426 font-size: 11px;
1427 color: var(--text-3);
1428 line-height: 1.4;
1429}
1430
1431/* Toggle switch */
1432.toggle {
1433 width: 36px;
1434 height: 20px;
1435 background: var(--bg-4);
1436 border: 1px solid var(--border-3);
1437 border-radius: 10px;
1438 cursor: pointer;
1439 position: relative;
1440 flex-shrink: 0;
1441 transition: background 0.15s, border-color 0.15s;
1442}
1443
1444.toggle.on {
1445 background: var(--accent-dim);
1446 border-color: var(--accent);
1447}
1448
1449.toggle-thumb {
1450 position: absolute;
1451 top: 2px;
1452 left: 2px;
1453 width: 14px;
1454 height: 14px;
1455 border-radius: 50%;
1456 background: var(--text-3);
1457 transition: transform 0.15s, background 0.15s;
1458}
1459
1460.toggle.on .toggle-thumb {
1461 transform: translateX(16px);
1462 background: var(--accent);
1463}
1464
1465/* Settings fields */
1466.settings-field {
1467 display: flex;
1468 flex-direction: column;
1469 gap: 6px;
1470}
1471
1472.settings-field-label {
1473 font-size: 11px;
1474 font-weight: 500;
1475 color: var(--text-3);
1476}
1477
1478.settings-field-row {
1479 display: flex;
1480 gap: 6px;
1481}
1482
1483.settings-input {
1484 flex: 1;
1485 background: var(--bg-1);
1486 border: 1px solid var(--border-3);
1487 border-radius: var(--r);
1488 color: var(--text);
1489 font-family: var(--font-mono);
1490 font-size: 12px;
1491 padding: 6px 10px;
1492 outline: none;
1493 width: 100%;
1494 transition: border-color 0.1s;
1495}
1496
1497.settings-input:focus { border-color: var(--accent-dim); }
1498
1499.settings-test-btn { flex-shrink: 0; }
1500.settings-test-btn.testing { opacity: 0.6; }
1501
1502.settings-status {
1503 font-size: 11px;
1504 padding: 4px 8px;
1505 border-radius: var(--r);
1506 line-height: 1.4;
1507}
1508
1509.settings-status.ok { background: rgba(74, 148, 112, 0.15); color: #4a9470; }
1510.settings-status.error { background: rgba(138, 48, 48, 0.15); color: #c04040; }
1511
1512.settings-model-list {
1513 display: flex;
1514 flex-direction: column;
1515 gap: 2px;
1516 max-height: 180px;
1517 overflow-y: auto;
1518 border: 1px solid var(--border);
1519 border-radius: var(--r);
1520 padding: 4px;
1521 background: var(--bg-1);
1522}
1523
1524.settings-model-item {
1525 text-align: left;
1526 background: none;
1527 border: none;
1528 color: var(--text-2);
1529 font-family: var(--font-mono);
1530 font-size: 12px;
1531 padding: 5px 8px;
1532 border-radius: 3px;
1533 cursor: pointer;
1534}
1535
1536.settings-model-item:hover { background: var(--bg-3); color: var(--text); }
1537.settings-model-item.active { background: var(--bg-3); color: var(--accent); }
1538
1539.settings-field-hint {
1540 font-size: 11px;
1541 color: var(--text-4);
1542 line-height: 1.5;
1543}
1544
1545.settings-field-hint code {
1546 font-family: var(--font-mono);
1547 color: var(--text-3);
1548 background: var(--bg-1);
1549 padding: 1px 4px;
1550 border-radius: 3px;
1551}
1552
1553.settings-help p {
1554 font-size: 12px;
1555 color: var(--text-3);
1556 line-height: 1.6;
1557 margin-bottom: 8px;
1558}
1559
1560.settings-help p:last-child { margin-bottom: 0; }
1561
1562.settings-help strong { color: var(--text-2); font-weight: 500; }
1563
1564.settings-help code {
1565 font-family: var(--font-mono);
1566 font-size: 11px;
1567 color: var(--text-3);
1568 background: var(--bg-1);
1569 padding: 2px 5px;
1570 border-radius: 3px;
1571 display: inline-block;
1572 margin-top: 4px;
1573}
1574
1575/* ── Scrollbar global ────────────────────────────────────────────────────── */
1576
1577::-webkit-scrollbar { width: 6px; height: 6px; }
1578::-webkit-scrollbar-track { background: transparent; }
1579::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 3px; }
1580::-webkit-scrollbar-thumb:hover { background: var(--border-3); }
1581
1582/* ── Utilities ───────────────────────────────────────────────────────────── */
1583
1584.sr-only {
1585 position: absolute;
1586 width: 1px;
1587 height: 1px;
1588 padding: 0;
1589 margin: -1px;
1590 overflow: hidden;
1591 clip: rect(0, 0, 0, 0);
1592 white-space: nowrap;
1593 border: 0;
1594}