@1mancompany/onemancompany 0.7.54 → 0.7.55

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 (3) hide show
  1. package/frontend/style.css +679 -638
  2. package/package.json +1 -1
  3. package/pyproject.toml +1 -1
package/frontend/style.css CHANGED
@@ -21,6 +21,44 @@
21
21
  --bg-card: #16162a;
22
22
  --font-boost: 2px; /* Text size boost: 0px (small), 2px (medium, default), 4px (large) */
23
23
 
24
+ /* ═══ Typography Scale (Primitive) ═══ */
25
+ --size-1: calc(5px + var(--font-boost)); /* 7px — micro */
26
+ --size-2: calc(7px + var(--font-boost)); /* 9px — label */
27
+ --size-3: calc(9px + var(--font-boost)); /* 11px — body */
28
+ --size-4: calc(12px + var(--font-boost)); /* 14px — subheading */
29
+ --size-5: calc(16px + var(--font-boost)); /* 18px — heading */
30
+ --size-6: calc(24px + var(--font-boost)); /* 26px — display */
31
+
32
+ /* ═══ Typography Scale (Semantic) ═══ */
33
+ --text-display: var(--size-6);
34
+ --text-heading: var(--size-5);
35
+ --text-subheading: var(--size-4);
36
+ --text-body: var(--size-3);
37
+ --text-label: var(--size-2);
38
+ --text-micro: var(--size-1);
39
+
40
+ /* ═══ Spacing Scale (Primitive) ═══ */
41
+ --sp-1: 4px;
42
+ --sp-2: 8px;
43
+ --sp-3: 12px;
44
+ --sp-4: 16px;
45
+ --sp-5: 24px;
46
+ --sp-6: 32px;
47
+ --sp-8: 48px;
48
+
49
+ /* ═══ Spacing Scale (Semantic) ═══ */
50
+ --gap-inline: var(--sp-2);
51
+ --gap-stack: var(--sp-3);
52
+ --gap-section: var(--sp-5);
53
+ --pad-component: var(--sp-3);
54
+ --pad-panel: var(--sp-4);
55
+ --pad-button: var(--sp-2) var(--sp-3);
56
+
57
+ /* ═══ Radius Scale ═══ */
58
+ --radius-sm: 2px;
59
+ --radius-md: 4px;
60
+ --radius-full: 50%;
61
+
24
62
  /* z-index scale */
25
63
  --z-base: 2;
26
64
  --z-dropdown: 10;
@@ -55,7 +93,7 @@ body {
55
93
  background: var(--bg-dark);
56
94
  color: var(--pixel-white);
57
95
  font-family: 'Press Start 2P', monospace;
58
- font-size: calc(10px + var(--font-boost));
96
+ font-size: var(--text-subheading);
59
97
  margin: 0;
60
98
  overflow: hidden;
61
99
  }
@@ -69,8 +107,8 @@ body {
69
107
  "left-top canvas roster"
70
108
  "left-bottom console console";
71
109
  height: 100vh;
72
- gap: 4px;
73
- padding: 4px;
110
+ gap: var(--sp-1);
111
+ padding: var(--sp-1);
74
112
  }
75
113
 
76
114
  /* During resize drag: prevent canvas/iframes from stealing pointer events */
@@ -106,11 +144,11 @@ body.resize-dragging {
106
144
  .collapsible-header {
107
145
  display: flex;
108
146
  align-items: center;
109
- gap: 8px;
110
- padding: 8px 10px;
147
+ gap: var(--sp-2);
148
+ padding: var(--sp-2) var(--pad-component);
111
149
  background: var(--bg-panel-alt);
112
150
  border: 2px solid var(--border);
113
- border-radius: 2px;
151
+ border-radius: var(--radius-sm);
114
152
  cursor: pointer;
115
153
  user-select: none;
116
154
  transition: background 0.15s;
@@ -125,7 +163,7 @@ body.resize-dragging {
125
163
  }
126
164
 
127
165
  .collapse-arrow {
128
- font-size: calc(8px + var(--font-boost));
166
+ font-size: var(--text-body);
129
167
  color: var(--pixel-cyan);
130
168
  transition: transform 0.25s ease;
131
169
  display: inline-block;
@@ -169,7 +207,7 @@ body.resize-dragging {
169
207
  background: var(--bg-panel);
170
208
  border: 2px solid var(--border);
171
209
  border-top: none;
172
- border-radius: 0 0 2px 2px;
210
+ border-radius: 0 0 var(--radius-sm) var(--radius-sm);
173
211
  overflow-y: auto;
174
212
  flex: 1;
175
213
  }
@@ -179,7 +217,7 @@ body.resize-dragging {
179
217
  grid-area: canvas;
180
218
  background: var(--bg-panel);
181
219
  border: 2px solid var(--border);
182
- border-radius: 2px;
220
+ border-radius: var(--radius-sm);
183
221
  display: flex;
184
222
  flex-direction: column;
185
223
  overflow: hidden;
@@ -190,21 +228,24 @@ body.resize-dragging {
190
228
  display: flex;
191
229
  justify-content: space-between;
192
230
  align-items: center;
193
- padding: 8px 12px;
231
+ padding: var(--pad-button);
194
232
  border-bottom: 2px solid var(--border);
195
233
  background: var(--bg-panel-alt);
196
234
  position: relative;
197
235
  }
198
236
 
199
237
  .pixel-title {
200
- font-size: calc(7px + var(--font-boost));
238
+ font-size: var(--text-label);
201
239
  margin: 0;
202
240
  color: var(--pixel-yellow);
203
241
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
204
242
  }
243
+ h1.pixel-title { font-size: var(--text-subheading); }
244
+ h2.pixel-title { font-size: var(--text-body); }
245
+ h3.pixel-title { font-size: var(--text-label); }
205
246
 
206
247
  .version-badge {
207
- font-size: calc(5px + var(--font-boost));
248
+ font-size: var(--text-micro);
208
249
  color: var(--pixel-blue);
209
250
  opacity: 0.7;
210
251
  margin-left: 4px;
@@ -212,12 +253,12 @@ body.resize-dragging {
212
253
 
213
254
  #status-bar {
214
255
  display: flex;
215
- gap: 12px;
256
+ gap: var(--gap-stack);
216
257
  align-items: center;
217
258
  }
218
259
 
219
260
  .status-item {
220
- font-size: calc(8px + var(--font-boost));
261
+ font-size: var(--text-body);
221
262
  color: var(--pixel-cyan);
222
263
  }
223
264
 
@@ -230,7 +271,7 @@ body.resize-dragging {
230
271
  }
231
272
 
232
273
  #last-sync-time {
233
- font-size: calc(6px + var(--font-boost));
274
+ font-size: var(--text-label);
234
275
  color: var(--text-dim);
235
276
  }
236
277
 
@@ -247,8 +288,8 @@ body.resize-dragging {
247
288
  position: absolute;
248
289
  background: rgba(0, 0, 0, 0.9);
249
290
  border: 2px solid var(--pixel-cyan);
250
- padding: 6px 8px;
251
- font-size: calc(7px + var(--font-boost));
291
+ padding: var(--sp-1) var(--sp-2);
292
+ font-size: var(--text-label);
252
293
  line-height: 1.8;
253
294
  pointer-events: none;
254
295
  z-index: var(--z-dropdown);
@@ -265,10 +306,10 @@ body.resize-dragging {
265
306
  background: none;
266
307
  border: 2px solid var(--pixel-purple);
267
308
  color: var(--pixel-purple);
268
- font-size: calc(14px + var(--font-boost));
309
+ font-size: var(--text-heading);
269
310
  padding: 2px 6px;
270
311
  cursor: pointer;
271
- border-radius: 2px;
312
+ border-radius: var(--radius-sm);
272
313
  transition: background 0.1s, transform 0.05s;
273
314
  line-height: 1;
274
315
  }
@@ -298,24 +339,24 @@ body.resize-dragging {
298
339
  display: flex;
299
340
  justify-content: space-between;
300
341
  align-items: center;
301
- padding: 8px 12px;
342
+ padding: var(--pad-button);
302
343
  border-bottom: 1px solid var(--border, #333);
303
344
  color: var(--pixel-cyan, #0ff);
304
345
  font-family: var(--font-pixel);
305
- font-size: calc(9px + var(--font-boost));
346
+ font-size: var(--text-body);
306
347
  }
307
348
  .floating-panel-close {
308
349
  background: none;
309
350
  border: none;
310
351
  color: #888;
311
352
  cursor: pointer;
312
- font-size: calc(14px + var(--font-boost));
353
+ font-size: var(--text-heading);
313
354
  }
314
355
  .floating-panel-close:hover {
315
356
  color: var(--pixel-white, #fff);
316
357
  }
317
358
  .floating-panel-body {
318
- padding: 8px 12px;
359
+ padding: var(--pad-button);
319
360
  }
320
361
 
321
362
  /* ===== Console Panel (Bottom, spans center+right) ===== */
@@ -341,19 +382,19 @@ body.resize-dragging {
341
382
  #ceo-avatar-area {
342
383
  display: flex;
343
384
  align-items: center;
344
- gap: 8px;
345
- padding: 4px 8px;
385
+ gap: var(--sp-2);
386
+ padding: var(--sp-1) var(--sp-2);
346
387
  flex-shrink: 0;
347
388
  }
348
389
 
349
390
  #ceo-avatar {
350
391
  border: 2px solid var(--pixel-yellow);
351
- border-radius: 4px;
392
+ border-radius: var(--radius-md);
352
393
  object-fit: cover;
353
394
  }
354
395
 
355
396
  .ceo-label {
356
- font-size: calc(8px + var(--font-boost));
397
+ font-size: var(--text-body);
357
398
  color: var(--pixel-yellow);
358
399
  }
359
400
 
@@ -364,10 +405,10 @@ body.resize-dragging {
364
405
  border: 1px solid var(--pixel-orange);
365
406
  color: var(--pixel-orange);
366
407
  font-family: 'Press Start 2P', monospace;
367
- font-size: calc(12px + var(--font-boost));
408
+ font-size: var(--text-subheading);
368
409
  padding: 4px 6px;
369
410
  cursor: pointer;
370
- border-radius: 2px;
411
+ border-radius: var(--radius-sm);
371
412
  transition: background 0.15s, color 0.15s;
372
413
  }
373
414
 
@@ -383,9 +424,9 @@ body.resize-dragging {
383
424
  right: 0;
384
425
  background: var(--pixel-red);
385
426
  color: #fff;
386
- font-size: calc(8px + var(--font-boost));
387
- padding: 4px 8px;
388
- border-radius: 2px;
427
+ font-size: var(--text-body);
428
+ padding: var(--sp-1) var(--sp-2);
429
+ border-radius: var(--radius-sm);
389
430
  white-space: nowrap;
390
431
  pointer-events: none;
391
432
  z-index: var(--z-sticky);
@@ -402,8 +443,8 @@ body.resize-dragging {
402
443
  color: var(--pixel-white);
403
444
  border: 2px solid var(--border);
404
445
  font-family: 'Press Start 2P', monospace;
405
- font-size: calc(8px + var(--font-boost));
406
- padding: 8px;
446
+ font-size: var(--text-body);
447
+ padding: var(--sp-2);
407
448
  resize: none;
408
449
  outline: none;
409
450
  line-height: 1.8;
@@ -440,7 +481,7 @@ body.resize-dragging {
440
481
 
441
482
  .btn-row {
442
483
  display: flex;
443
- gap: 6px;
484
+ gap: var(--sp-1);
444
485
  margin-top: 8px;
445
486
  }
446
487
 
@@ -451,7 +492,7 @@ body.resize-dragging {
451
492
  border: none;
452
493
  padding: 10px 8px;
453
494
  font-family: 'Press Start 2P', monospace;
454
- font-size: calc(7px + var(--font-boost));
495
+ font-size: var(--text-label);
455
496
  cursor: pointer;
456
497
  box-shadow: 3px 3px 0 #00994d;
457
498
  transition: transform 0.05s, box-shadow 0.05s;
@@ -502,10 +543,10 @@ body.resize-dragging {
502
543
  .roster-card {
503
544
  display: flex;
504
545
  align-items: center;
505
- gap: 8px;
546
+ gap: var(--sp-2);
506
547
  padding: 4px 6px;
507
548
  border-bottom: 1px solid var(--border);
508
- font-size: calc(7px + var(--font-boost));
549
+ font-size: var(--text-label);
509
550
  }
510
551
 
511
552
  .roster-card:last-child {
@@ -515,7 +556,7 @@ body.resize-dragging {
515
556
  .roster-avatar {
516
557
  width: 36px;
517
558
  height: 36px;
518
- border-radius: 50%;
559
+ border-radius: var(--radius-full);
519
560
  object-fit: cover;
520
561
  flex-shrink: 0;
521
562
  }
@@ -526,22 +567,22 @@ body.resize-dragging {
526
567
 
527
568
  .roster-name {
528
569
  color: var(--pixel-white);
529
- font-size: calc(9px + var(--font-boost));
570
+ font-size: var(--text-body);
530
571
  }
531
572
 
532
573
  .roster-role {
533
574
  color: var(--pixel-cyan);
534
- font-size: calc(6px + var(--font-boost));
575
+ font-size: var(--text-label);
535
576
  }
536
577
 
537
578
  .roster-quarter {
538
579
  color: var(--text-dim);
539
- font-size: calc(5px + var(--font-boost));
580
+ font-size: var(--text-micro);
540
581
  }
541
582
 
542
583
  .roster-score {
543
584
  color: var(--pixel-yellow);
544
- font-size: calc(8px + var(--font-boost));
585
+ font-size: var(--text-body);
545
586
  font-weight: bold;
546
587
  min-width: 30px;
547
588
  text-align: right;
@@ -557,7 +598,7 @@ body.resize-dragging {
557
598
 
558
599
  .roster-empnum {
559
600
  color: var(--pixel-gray);
560
- font-size: calc(5px + var(--font-boost));
601
+ font-size: var(--text-micro);
561
602
  }
562
603
 
563
604
  /* ===== Roster Filters ===== */
@@ -576,7 +617,7 @@ body.resize-dragging {
576
617
  color: var(--pixel-white);
577
618
  border: 1px solid var(--border);
578
619
  font-family: 'Press Start 2P', monospace;
579
- font-size: calc(5px + var(--font-boost));
620
+ font-size: var(--text-micro);
580
621
  padding: 3px 4px;
581
622
  outline: none;
582
623
  cursor: pointer;
@@ -592,7 +633,7 @@ body.resize-dragging {
592
633
  .roster-filter-select option {
593
634
  background: var(--bg-dark);
594
635
  color: var(--pixel-white);
595
- font-size: calc(5px + var(--font-boost));
636
+ font-size: var(--text-micro);
596
637
  }
597
638
 
598
639
  /* ===== Activity Log ===== */
@@ -600,7 +641,7 @@ body.resize-dragging {
600
641
  background: var(--bg-panel);
601
642
  border: 2px solid var(--border);
602
643
  border-top: none;
603
- border-radius: 0 0 2px 2px;
644
+ border-radius: 0 0 var(--radius-sm) var(--radius-sm);
604
645
  padding: 0; /* xterm.js FitAddon needs zero padding to calculate columns correctly */
605
646
  flex: 1;
606
647
  overflow: hidden; /* xterm.js handles its own scrolling */
@@ -614,7 +655,7 @@ body.resize-dragging {
614
655
  border-left: 3px solid var(--pixel-gray);
615
656
  padding: 3px 8px;
616
657
  margin: 3px 0;
617
- font-size: calc(7px + var(--font-boost));
658
+ font-size: var(--text-label);
618
659
  line-height: 1.6;
619
660
  animation: slide-in 0.15s ease-out;
620
661
  }
@@ -689,18 +730,18 @@ body.resize-dragging {
689
730
 
690
731
  /* ===== Guidance Section (now in modal) ===== */
691
732
  .pixel-title.small {
692
- font-size: calc(8px + var(--font-boost));
733
+ font-size: var(--text-body);
693
734
  }
694
735
 
695
736
  .guidance-controls {
696
737
  display: flex;
697
738
  flex-direction: column;
698
- gap: 8px;
699
- padding: 8px;
739
+ gap: var(--sp-2);
740
+ padding: var(--sp-2);
700
741
  }
701
742
 
702
743
  .guidance-label {
703
- font-size: calc(7px + var(--font-boost));
744
+ font-size: var(--text-label);
704
745
  color: var(--pixel-cyan);
705
746
  }
706
747
 
@@ -710,8 +751,8 @@ body.resize-dragging {
710
751
  color: var(--pixel-white);
711
752
  border: 2px solid var(--border);
712
753
  font-family: 'Press Start 2P', monospace;
713
- font-size: calc(7px + var(--font-boost));
714
- padding: 6px 8px;
754
+ font-size: var(--text-label);
755
+ padding: var(--sp-1) var(--sp-2);
715
756
  outline: none;
716
757
  cursor: pointer;
717
758
  appearance: none;
@@ -736,8 +777,8 @@ body.resize-dragging {
736
777
  color: var(--pixel-white);
737
778
  border: 2px solid var(--border);
738
779
  font-family: 'Press Start 2P', monospace;
739
- font-size: calc(7px + var(--font-boost));
740
- padding: 6px 8px;
780
+ font-size: var(--text-label);
781
+ padding: var(--sp-1) var(--sp-2);
741
782
  resize: none;
742
783
  outline: none;
743
784
  line-height: 1.8;
@@ -773,13 +814,13 @@ body.resize-dragging {
773
814
  }
774
815
 
775
816
  .guidance-notes-header {
776
- font-size: calc(7px + var(--font-boost));
817
+ font-size: var(--text-label);
777
818
  color: var(--pixel-purple);
778
819
  margin-bottom: 4px;
779
820
  }
780
821
 
781
822
  .guidance-note-item {
782
- font-size: calc(6px + var(--font-boost));
823
+ font-size: var(--text-label);
783
824
  color: var(--pixel-white);
784
825
  border-left: 2px solid var(--pixel-purple);
785
826
  padding: 2px 6px;
@@ -822,14 +863,14 @@ body.resize-dragging {
822
863
 
823
864
  .oneonone-actions {
824
865
  display: flex;
825
- gap: 6px;
866
+ gap: var(--sp-1);
826
867
  justify-content: flex-end;
827
868
  padding: 8px 12px 12px;
828
869
  }
829
870
 
830
871
  /* ===== Listening mode badge in roster ===== */
831
872
  .roster-listening {
832
- font-size: calc(6px + var(--font-boost));
873
+ font-size: var(--text-label);
833
874
  color: var(--pixel-purple);
834
875
  animation: pulse-listening 1s ease-in-out infinite;
835
876
  }
@@ -840,7 +881,7 @@ body.resize-dragging {
840
881
  }
841
882
 
842
883
  .roster-remote {
843
- font-size: calc(6px + var(--font-boost));
884
+ font-size: var(--text-label);
844
885
  color: #44cccc;
845
886
  margin-left: 4px;
846
887
  }
@@ -858,8 +899,8 @@ body.resize-dragging {
858
899
  #review-queue-section {
859
900
  background: var(--bg-panel);
860
901
  border: 2px solid var(--pixel-yellow);
861
- border-radius: 2px;
862
- padding: 8px 10px;
902
+ border-radius: var(--radius-sm);
903
+ padding: var(--sp-2) var(--pad-component);
863
904
  max-height: 350px;
864
905
  overflow-y: auto;
865
906
  animation: slide-in 0.2s ease-out;
@@ -882,28 +923,28 @@ body.resize-dragging {
882
923
  }
883
924
 
884
925
  .review-counter {
885
- font-size: calc(8px + var(--font-boost));
926
+ font-size: var(--text-body);
886
927
  font-weight: bold;
887
928
  color: var(--pixel-yellow);
888
929
  background: rgba(255, 215, 0, 0.15);
889
930
  border: 1px solid var(--pixel-yellow);
890
- border-radius: 2px;
931
+ border-radius: var(--radius-sm);
891
932
  padding: 1px 6px;
892
933
  }
893
934
 
894
935
  .review-summary {
895
- font-size: calc(7px + var(--font-boost));
936
+ font-size: var(--text-label);
896
937
  line-height: 1.8;
897
938
  color: var(--pixel-white);
898
939
  border-left: 2px solid var(--pixel-cyan);
899
- padding: 4px 8px;
940
+ padding: var(--sp-1) var(--sp-2);
900
941
  margin-bottom: 6px;
901
942
  max-height: 120px;
902
943
  overflow-y: auto;
903
944
  }
904
945
 
905
946
  .review-action-item {
906
- font-size: calc(7px + var(--font-boost));
947
+ font-size: var(--text-label);
907
948
  padding: 2px 4px;
908
949
  border-bottom: 1px solid var(--border);
909
950
  }
@@ -911,7 +952,7 @@ body.resize-dragging {
911
952
  .review-action-item label {
912
953
  display: flex;
913
954
  align-items: flex-start;
914
- gap: 4px;
955
+ gap: var(--sp-1);
915
956
  cursor: pointer;
916
957
  color: var(--pixel-white);
917
958
  line-height: 1.6;
@@ -949,7 +990,7 @@ body.resize-dragging {
949
990
  .modal-content {
950
991
  background: var(--bg-panel);
951
992
  border: 2px solid var(--pixel-yellow);
952
- border-radius: 2px;
993
+ border-radius: var(--radius-sm);
953
994
  width: 80vw;
954
995
  max-width: 800px;
955
996
  height: 70vh;
@@ -966,7 +1007,7 @@ body.resize-dragging {
966
1007
 
967
1008
  .alert-modal-body {
968
1009
  padding: 12px 16px;
969
- font-size: calc(12px + var(--font-boost));
1010
+ font-size: var(--text-subheading);
970
1011
  line-height: 1.6;
971
1012
  }
972
1013
 
@@ -979,7 +1020,7 @@ body.resize-dragging {
979
1020
  display: flex;
980
1021
  justify-content: space-between;
981
1022
  align-items: center;
982
- padding: 8px 12px;
1023
+ padding: var(--pad-button);
983
1024
  border-bottom: 2px solid var(--border);
984
1025
  background: var(--bg-panel-alt);
985
1026
  }
@@ -989,8 +1030,8 @@ body.resize-dragging {
989
1030
  border: 2px solid var(--pixel-red);
990
1031
  color: var(--pixel-red);
991
1032
  font-family: 'Press Start 2P', monospace;
992
- font-size: calc(8px + var(--font-boost));
993
- padding: 4px 8px;
1033
+ font-size: var(--text-body);
1034
+ padding: var(--sp-1) var(--sp-2);
994
1035
  cursor: pointer;
995
1036
  }
996
1037
 
@@ -1014,8 +1055,8 @@ body.resize-dragging {
1014
1055
  }
1015
1056
 
1016
1057
  .workflow-item {
1017
- padding: 8px 10px;
1018
- font-size: calc(7px + var(--font-boost));
1058
+ padding: var(--sp-2) var(--pad-component);
1059
+ font-size: var(--text-label);
1019
1060
  color: var(--pixel-white);
1020
1061
  cursor: pointer;
1021
1062
  border-bottom: 1px solid var(--border);
@@ -1046,7 +1087,7 @@ body.resize-dragging {
1046
1087
  align-items: center;
1047
1088
  justify-content: center;
1048
1089
  color: var(--text-dim);
1049
- font-size: calc(8px + var(--font-boost));
1090
+ font-size: var(--text-body);
1050
1091
  }
1051
1092
 
1052
1093
  .workflow-placeholder.hidden {
@@ -1060,7 +1101,7 @@ body.resize-dragging {
1060
1101
  color: var(--pixel-white);
1061
1102
  border: none;
1062
1103
  font-family: 'Press Start 2P', monospace;
1063
- font-size: calc(7px + var(--font-boost));
1104
+ font-size: var(--text-label);
1064
1105
  padding: 10px;
1065
1106
  resize: none;
1066
1107
  outline: none;
@@ -1091,8 +1132,8 @@ body.resize-dragging {
1091
1132
 
1092
1133
  .modal-footer {
1093
1134
  display: flex;
1094
- gap: 6px;
1095
- padding: 8px 12px;
1135
+ gap: var(--sp-1);
1136
+ padding: var(--pad-button);
1096
1137
  border-top: 2px solid var(--border);
1097
1138
  }
1098
1139
 
@@ -1117,13 +1158,13 @@ body.resize-dragging {
1117
1158
  .meeting-modal-status {
1118
1159
  display: flex;
1119
1160
  align-items: center;
1120
- gap: 6px;
1161
+ gap: var(--sp-1);
1121
1162
  }
1122
1163
 
1123
1164
  .status-led {
1124
1165
  width: 8px;
1125
1166
  height: 8px;
1126
- border-radius: 50%;
1167
+ border-radius: var(--radius-full);
1127
1168
  display: inline-block;
1128
1169
  }
1129
1170
 
@@ -1144,14 +1185,14 @@ body.resize-dragging {
1144
1185
  }
1145
1186
 
1146
1187
  .status-text {
1147
- font-size: calc(7px + var(--font-boost));
1188
+ font-size: var(--text-label);
1148
1189
  color: var(--pixel-white);
1149
1190
  }
1150
1191
 
1151
1192
  .meeting-info {
1152
1193
  width: 200px;
1153
1194
  border-right: 2px solid var(--border);
1154
- padding: 8px;
1195
+ padding: var(--sp-2);
1155
1196
  overflow-y: auto;
1156
1197
  }
1157
1198
 
@@ -1160,24 +1201,24 @@ body.resize-dragging {
1160
1201
  }
1161
1202
 
1162
1203
  .meeting-info-label {
1163
- font-size: calc(7px + var(--font-boost));
1204
+ font-size: var(--text-label);
1164
1205
  color: var(--pixel-cyan);
1165
1206
  margin-bottom: 4px;
1166
1207
  }
1167
1208
 
1168
1209
  .meeting-info-value {
1169
- font-size: calc(8px + var(--font-boost));
1210
+ font-size: var(--text-body);
1170
1211
  color: var(--pixel-white);
1171
1212
  }
1172
1213
 
1173
1214
  .meeting-participants-list {
1174
- font-size: calc(7px + var(--font-boost));
1215
+ font-size: var(--text-label);
1175
1216
  line-height: 2;
1176
1217
  color: var(--pixel-white);
1177
1218
  }
1178
1219
 
1179
1220
  .meeting-agenda-list {
1180
- font-size: calc(7px + var(--font-boost));
1221
+ font-size: var(--text-label);
1181
1222
  line-height: 1.8;
1182
1223
  color: var(--text-dim);
1183
1224
  }
@@ -1189,7 +1230,7 @@ body.resize-dragging {
1189
1230
  .meeting-participant {
1190
1231
  display: flex;
1191
1232
  align-items: center;
1192
- gap: 4px;
1233
+ gap: var(--sp-1);
1193
1234
  padding: 2px 0;
1194
1235
  border-bottom: 1px solid var(--border);
1195
1236
  }
@@ -1197,7 +1238,7 @@ body.resize-dragging {
1197
1238
  .meeting-participant-dot {
1198
1239
  width: 6px;
1199
1240
  height: 6px;
1200
- border-radius: 50%;
1241
+ border-radius: var(--radius-full);
1201
1242
  display: inline-block;
1202
1243
  }
1203
1244
 
@@ -1209,7 +1250,7 @@ body.resize-dragging {
1209
1250
  }
1210
1251
 
1211
1252
  .meeting-chat-header {
1212
- font-size: calc(7px + var(--font-boost));
1253
+ font-size: var(--text-label);
1213
1254
  color: var(--pixel-cyan);
1214
1255
  padding: 6px 10px;
1215
1256
  border-bottom: 1px solid var(--border);
@@ -1222,13 +1263,13 @@ body.resize-dragging {
1222
1263
  padding: 6px 10px;
1223
1264
  display: flex;
1224
1265
  flex-direction: column;
1225
- gap: 4px;
1266
+ gap: var(--sp-1);
1226
1267
  }
1227
1268
 
1228
1269
  .chat-msg {
1229
- font-size: calc(7px + var(--font-boost));
1270
+ font-size: var(--text-label);
1230
1271
  line-height: 1.8;
1231
- padding: 4px 8px;
1272
+ padding: var(--sp-1) var(--sp-2);
1232
1273
  border-left: 3px solid var(--pixel-gray);
1233
1274
  animation: slide-in 0.15s ease-out;
1234
1275
  }
@@ -1240,7 +1281,7 @@ body.resize-dragging {
1240
1281
 
1241
1282
  .chat-msg .chat-time {
1242
1283
  color: var(--text-dim);
1243
- font-size: calc(6px + var(--font-boost));
1284
+ font-size: var(--text-label);
1244
1285
  }
1245
1286
 
1246
1287
  .chat-msg.role-hr { border-color: var(--pixel-blue); }
@@ -1261,7 +1302,7 @@ body.resize-dragging {
1261
1302
  align-items: center;
1262
1303
  justify-content: center;
1263
1304
  color: var(--text-dim);
1264
- font-size: calc(8px + var(--font-boost));
1305
+ font-size: var(--text-body);
1265
1306
  }
1266
1307
 
1267
1308
  /* ===== Employee Detail Modal ===== */
@@ -1321,14 +1362,14 @@ body.resize-dragging {
1321
1362
  .employee-avatar-section {
1322
1363
  display: flex;
1323
1364
  align-items: center;
1324
- gap: 8px;
1365
+ gap: var(--sp-2);
1325
1366
  margin-bottom: 8px;
1326
1367
  }
1327
1368
 
1328
1369
  .employee-avatar {
1329
1370
  width: 40px;
1330
1371
  height: 40px;
1331
- border-radius: 50%;
1372
+ border-radius: var(--radius-full);
1332
1373
  border: 1px solid var(--pixel-green);
1333
1374
  object-fit: cover;
1334
1375
  background: var(--bg-dark);
@@ -1336,7 +1377,7 @@ body.resize-dragging {
1336
1377
 
1337
1378
  .avatar-upload-btn {
1338
1379
  font-family: 'Press Start 2P', monospace;
1339
- font-size: calc(7px + var(--font-boost));
1380
+ font-size: var(--text-label);
1340
1381
  color: var(--pixel-green);
1341
1382
  cursor: pointer;
1342
1383
  border: 1px solid var(--border);
@@ -1356,7 +1397,7 @@ body.resize-dragging {
1356
1397
 
1357
1398
  .emp-detail-status-card .emp-detail-row {
1358
1399
  padding: 2px 0;
1359
- font-size: calc(7px + var(--font-boost));
1400
+ font-size: var(--text-label);
1360
1401
  }
1361
1402
 
1362
1403
  .emp-detail-flex-section {
@@ -1380,7 +1421,7 @@ body.resize-dragging {
1380
1421
  .emp-detail-row {
1381
1422
  display: flex;
1382
1423
  align-items: flex-start;
1383
- gap: 8px;
1424
+ gap: var(--sp-2);
1384
1425
  padding: 5px 0;
1385
1426
  border-bottom: 1px solid var(--border);
1386
1427
  font-size: clamp(7px, 1.2vw, 10px);
@@ -1407,8 +1448,8 @@ body.resize-dragging {
1407
1448
  .perm-tag {
1408
1449
  display: inline-block;
1409
1450
  padding: 1px 4px;
1410
- border-radius: 3px;
1411
- font-size: calc(6px + var(--font-boost));
1451
+ border-radius: var(--radius-sm);
1452
+ font-size: var(--text-label);
1412
1453
  margin: 1px 2px;
1413
1454
  background: var(--pixel-dark);
1414
1455
  color: var(--pixel-gray);
@@ -1427,7 +1468,7 @@ body.resize-dragging {
1427
1468
 
1428
1469
  .perf-quarters {
1429
1470
  display: flex;
1430
- gap: 6px;
1471
+ gap: var(--sp-1);
1431
1472
  margin-bottom: 4px;
1432
1473
  }
1433
1474
 
@@ -1436,18 +1477,18 @@ body.resize-dragging {
1436
1477
  text-align: center;
1437
1478
  padding: 4px 2px;
1438
1479
  border: 1px solid var(--border);
1439
- border-radius: 2px;
1480
+ border-radius: var(--radius-sm);
1440
1481
  background: #0a0a18;
1441
1482
  }
1442
1483
 
1443
1484
  .perf-quarter-card .pq-label {
1444
- font-size: calc(5px + var(--font-boost));
1485
+ font-size: var(--text-micro);
1445
1486
  color: var(--text-dim);
1446
1487
  margin-bottom: 2px;
1447
1488
  }
1448
1489
 
1449
1490
  .perf-quarter-card .pq-score {
1450
- font-size: calc(8px + var(--font-boost));
1491
+ font-size: var(--text-body);
1451
1492
  font-weight: bold;
1452
1493
  color: var(--pixel-yellow);
1453
1494
  }
@@ -1475,7 +1516,7 @@ body.resize-dragging {
1475
1516
  }
1476
1517
 
1477
1518
  .perf-current-q {
1478
- font-size: calc(6px + var(--font-boost));
1519
+ font-size: var(--text-label);
1479
1520
  color: var(--text-dim);
1480
1521
  }
1481
1522
 
@@ -1516,7 +1557,7 @@ body.resize-dragging {
1516
1557
 
1517
1558
  .emp-model-section {
1518
1559
  display: flex;
1519
- gap: 6px;
1560
+ gap: var(--sp-1);
1520
1561
  align-items: center;
1521
1562
  flex-wrap: wrap;
1522
1563
  }
@@ -1542,7 +1583,7 @@ body.resize-dragging {
1542
1583
 
1543
1584
  .pixel-btn.small {
1544
1585
  font-size: clamp(6px, 1.2vw, 9px);
1545
- padding: 4px 8px;
1586
+ padding: var(--sp-1) var(--sp-2);
1546
1587
  white-space: nowrap;
1547
1588
  }
1548
1589
 
@@ -1563,7 +1604,7 @@ body.resize-dragging {
1563
1604
  display: flex;
1564
1605
  align-items: center;
1565
1606
  justify-content: space-between;
1566
- padding: 8px 10px;
1607
+ padding: var(--sp-2) var(--pad-component);
1567
1608
  border: 1px solid var(--border);
1568
1609
  margin-bottom: 4px;
1569
1610
  background: var(--bg-dark);
@@ -1580,19 +1621,19 @@ body.resize-dragging {
1580
1621
  }
1581
1622
 
1582
1623
  .ex-emp-name {
1583
- font-size: calc(7px + var(--font-boost));
1624
+ font-size: var(--text-label);
1584
1625
  color: var(--pixel-white);
1585
1626
  opacity: 0.8;
1586
1627
  }
1587
1628
 
1588
1629
  .ex-emp-role {
1589
- font-size: calc(6px + var(--font-boost));
1630
+ font-size: var(--text-label);
1590
1631
  color: var(--text-dim);
1591
1632
  margin-top: 2px;
1592
1633
  }
1593
1634
 
1594
1635
  .ex-emp-skills {
1595
- font-size: calc(5px + var(--font-boost));
1636
+ font-size: var(--text-micro);
1596
1637
  color: var(--pixel-gray);
1597
1638
  margin-top: 1px;
1598
1639
  }
@@ -1619,7 +1660,7 @@ body.resize-dragging {
1619
1660
  }
1620
1661
 
1621
1662
  .project-card {
1622
- padding: 8px;
1663
+ padding: var(--sp-2);
1623
1664
  border: 1px solid var(--border);
1624
1665
  margin-bottom: 4px;
1625
1666
  background: var(--bg-dark);
@@ -1633,17 +1674,17 @@ body.resize-dragging {
1633
1674
  .project-card-header {
1634
1675
  display: flex;
1635
1676
  justify-content: space-between;
1636
- font-size: calc(7px + var(--font-boost));
1677
+ font-size: var(--text-label);
1637
1678
  color: var(--pixel-white);
1638
1679
  }
1639
1680
 
1640
1681
  .project-card-date {
1641
1682
  color: var(--text-dim);
1642
- font-size: calc(6px + var(--font-boost));
1683
+ font-size: var(--text-label);
1643
1684
  }
1644
1685
 
1645
1686
  .project-card-meta {
1646
- font-size: calc(5px + var(--font-boost));
1687
+ font-size: var(--text-micro);
1647
1688
  color: var(--text-dim);
1648
1689
  margin-top: 3px;
1649
1690
  }
@@ -1656,7 +1697,7 @@ body.resize-dragging {
1656
1697
 
1657
1698
  .project-detail-split {
1658
1699
  display: flex;
1659
- gap: 8px;
1700
+ gap: var(--sp-2);
1660
1701
  min-height: 200px;
1661
1702
  }
1662
1703
 
@@ -1675,7 +1716,7 @@ body.resize-dragging {
1675
1716
  background: var(--bg-dark);
1676
1717
  cursor: pointer;
1677
1718
  transition: border-color 0.15s;
1678
- font-size: calc(6px + var(--font-boost));
1719
+ font-size: var(--text-label);
1679
1720
  }
1680
1721
 
1681
1722
  .project-iter-card:hover {
@@ -1712,7 +1753,7 @@ body.resize-dragging {
1712
1753
 
1713
1754
  .candidate-modal-body {
1714
1755
  display: flex;
1715
- gap: 8px;
1756
+ gap: var(--sp-2);
1716
1757
  flex-direction: row;
1717
1758
  align-items: flex-start;
1718
1759
  max-height: calc(85vh - 80px);
@@ -1721,7 +1762,7 @@ body.resize-dragging {
1721
1762
  }
1722
1763
 
1723
1764
  .candidate-jd {
1724
- font-size: calc(6px + var(--font-boost));
1765
+ font-size: var(--text-label);
1725
1766
  color: var(--text-dim);
1726
1767
  padding: 6px;
1727
1768
  border: 1px solid var(--border);
@@ -1753,7 +1794,7 @@ body.resize-dragging {
1753
1794
  .role-group-header {
1754
1795
  display: flex;
1755
1796
  align-items: center;
1756
- gap: 6px;
1797
+ gap: var(--sp-1);
1757
1798
  padding: 5px 8px;
1758
1799
  background: linear-gradient(90deg, rgba(0, 221, 255, 0.08), transparent);
1759
1800
  border-bottom: 1px solid var(--border);
@@ -1761,17 +1802,17 @@ body.resize-dragging {
1761
1802
  }
1762
1803
 
1763
1804
  .role-group-icon {
1764
- font-size: calc(12px + var(--font-boost));
1805
+ font-size: var(--text-subheading);
1765
1806
  }
1766
1807
 
1767
1808
  .role-group-title {
1768
- font-size: calc(7px + var(--font-boost));
1809
+ font-size: var(--text-label);
1769
1810
  color: var(--pixel-cyan);
1770
1811
  letter-spacing: 1px;
1771
1812
  }
1772
1813
 
1773
1814
  .role-group-count {
1774
- font-size: calc(5px + var(--font-boost));
1815
+ font-size: var(--text-micro);
1775
1816
  color: var(--pixel-gray);
1776
1817
  background: var(--bg-dark);
1777
1818
  padding: 1px 4px;
@@ -1779,7 +1820,7 @@ body.resize-dragging {
1779
1820
  }
1780
1821
 
1781
1822
  .role-group-desc {
1782
- font-size: calc(5px + var(--font-boost));
1823
+ font-size: var(--text-micro);
1783
1824
  color: var(--text-dim);
1784
1825
  width: 100%;
1785
1826
  margin-top: 2px;
@@ -1788,9 +1829,9 @@ body.resize-dragging {
1788
1829
 
1789
1830
  .role-group-cards {
1790
1831
  display: flex;
1791
- gap: 8px;
1832
+ gap: var(--sp-2);
1792
1833
  flex-wrap: wrap;
1793
- padding: 8px;
1834
+ padding: var(--sp-2);
1794
1835
  justify-content: flex-start;
1795
1836
  }
1796
1837
 
@@ -1825,7 +1866,7 @@ body.resize-dragging {
1825
1866
  display: flex;
1826
1867
  align-items: center;
1827
1868
  justify-content: center;
1828
- font-size: calc(6px + var(--font-boost));
1869
+ font-size: var(--text-label);
1829
1870
  color: #000;
1830
1871
  transition: opacity 0.15s;
1831
1872
  }
@@ -1852,7 +1893,7 @@ body.resize-dragging {
1852
1893
  height: 100%;
1853
1894
  backface-visibility: hidden;
1854
1895
  border: 2px solid var(--border);
1855
- border-radius: 4px;
1896
+ border-radius: var(--radius-md);
1856
1897
  overflow: hidden;
1857
1898
  }
1858
1899
 
@@ -1870,25 +1911,25 @@ body.resize-dragging {
1870
1911
  .card-front .card-avatar {
1871
1912
  width: 32px;
1872
1913
  height: 32px;
1873
- border-radius: 50%;
1914
+ border-radius: var(--radius-full);
1874
1915
  border: 2px solid var(--pixel-cyan);
1875
1916
  background: var(--bg-dark);
1876
1917
  display: flex;
1877
1918
  align-items: center;
1878
1919
  justify-content: center;
1879
- font-size: calc(16px + var(--font-boost));
1920
+ font-size: var(--text-heading);
1880
1921
  margin-bottom: 3px;
1881
1922
  }
1882
1923
 
1883
1924
  .card-front .card-name {
1884
- font-size: calc(6px + var(--font-boost));
1925
+ font-size: var(--text-label);
1885
1926
  color: var(--pixel-white);
1886
1927
  text-align: center;
1887
1928
  margin-bottom: 2px;
1888
1929
  }
1889
1930
 
1890
1931
  .card-front .card-role {
1891
- font-size: calc(5px + var(--font-boost));
1932
+ font-size: var(--text-micro);
1892
1933
  color: var(--pixel-cyan);
1893
1934
  margin-bottom: 2px;
1894
1935
  }
@@ -1920,13 +1961,13 @@ body.resize-dragging {
1920
1961
  position: absolute;
1921
1962
  top: -1px;
1922
1963
  right: 2px;
1923
- font-size: calc(4px + var(--font-boost));
1964
+ font-size: var(--text-micro);
1924
1965
  color: var(--pixel-white);
1925
1966
  text-shadow: 0 0 2px #000;
1926
1967
  }
1927
1968
 
1928
1969
  .card-reasoning {
1929
- font-size: calc(4px + var(--font-boost));
1970
+ font-size: var(--text-micro);
1930
1971
  color: var(--text-dim);
1931
1972
  text-align: center;
1932
1973
  margin-top: 2px;
@@ -1970,7 +2011,7 @@ body.resize-dragging {
1970
2011
  }
1971
2012
 
1972
2013
  .card-back .card-detail-title {
1973
- font-size: calc(5px + var(--font-boost));
2014
+ font-size: var(--text-micro);
1974
2015
  color: var(--pixel-yellow);
1975
2016
  margin-top: 3px;
1976
2017
  margin-bottom: 1px;
@@ -1988,7 +2029,7 @@ body.resize-dragging {
1988
2029
  }
1989
2030
 
1990
2031
  .card-actions .pixel-btn {
1991
- font-size: calc(5px + var(--font-boost));
2032
+ font-size: var(--text-micro);
1992
2033
  padding: 3px 5px;
1993
2034
  flex: 1;
1994
2035
  }
@@ -2013,7 +2054,7 @@ body.resize-dragging {
2013
2054
  }
2014
2055
 
2015
2056
  .batch-count {
2016
- font-size: calc(6px + var(--font-boost));
2057
+ font-size: var(--text-label);
2017
2058
  color: var(--pixel-gray);
2018
2059
  }
2019
2060
 
@@ -2061,15 +2102,15 @@ body.resize-dragging {
2061
2102
  .onboarding-toast-header {
2062
2103
  display: flex;
2063
2104
  align-items: center;
2064
- padding: 4px 8px;
2105
+ padding: var(--sp-1) var(--sp-2);
2065
2106
  background: var(--bg-dark);
2066
2107
  border-bottom: 1px solid var(--border);
2067
2108
  cursor: pointer;
2068
- gap: 4px;
2109
+ gap: var(--sp-1);
2069
2110
  }
2070
2111
 
2071
2112
  .onboarding-toast-title {
2072
- font-size: calc(7px + var(--font-boost));
2113
+ font-size: var(--text-label);
2073
2114
  color: var(--pixel-cyan);
2074
2115
  flex: 1;
2075
2116
  }
@@ -2079,7 +2120,7 @@ body.resize-dragging {
2079
2120
  background: none;
2080
2121
  border: none;
2081
2122
  color: var(--pixel-gray);
2082
- font-size: calc(7px + var(--font-boost));
2123
+ font-size: var(--text-label);
2083
2124
  cursor: pointer;
2084
2125
  padding: 0 2px;
2085
2126
  }
@@ -2098,7 +2139,7 @@ body.resize-dragging {
2098
2139
  .onboarding-list {
2099
2140
  display: flex;
2100
2141
  flex-direction: column;
2101
- gap: 6px;
2142
+ gap: var(--sp-1);
2102
2143
  }
2103
2144
 
2104
2145
  .onboarding-item {
@@ -2124,12 +2165,12 @@ body.resize-dragging {
2124
2165
  }
2125
2166
 
2126
2167
  .onboarding-item-name {
2127
- font-size: calc(6px + var(--font-boost));
2168
+ font-size: var(--text-label);
2128
2169
  color: var(--pixel-white);
2129
2170
  }
2130
2171
 
2131
2172
  .onboarding-item-role {
2132
- font-size: calc(5px + var(--font-boost));
2173
+ font-size: var(--text-micro);
2133
2174
  color: var(--pixel-cyan);
2134
2175
  }
2135
2176
 
@@ -2144,7 +2185,7 @@ body.resize-dragging {
2144
2185
  align-items: center;
2145
2186
  gap: 2px;
2146
2187
  padding: 1px 3px;
2147
- font-size: calc(4px + var(--font-boost));
2188
+ font-size: var(--text-micro);
2148
2189
  flex: 1;
2149
2190
  }
2150
2191
 
@@ -2210,10 +2251,10 @@ body.resize-dragging {
2210
2251
  display: flex;
2211
2252
  flex-direction: column;
2212
2253
  align-items: center;
2213
- gap: 4px;
2254
+ gap: var(--sp-1);
2214
2255
  }
2215
2256
  .candidate-card-wrapper .card-detail-btn {
2216
- font-size: calc(9px + var(--font-boost));
2257
+ font-size: var(--text-body);
2217
2258
  padding: 2px 8px;
2218
2259
  width: 100%;
2219
2260
  max-width: 105px;
@@ -2227,7 +2268,7 @@ body.resize-dragging {
2227
2268
  flex-shrink: 0;
2228
2269
  background: var(--bg-dark);
2229
2270
  border: 1px solid var(--border);
2230
- border-radius: 6px;
2271
+ border-radius: var(--radius-md);
2231
2272
  display: flex;
2232
2273
  flex-direction: column;
2233
2274
  max-height: calc(85vh - 80px);
@@ -2246,12 +2287,12 @@ body.resize-dragging {
2246
2287
  background: none;
2247
2288
  border: none;
2248
2289
  color: var(--text-dim);
2249
- font-size: calc(16px + var(--font-boost));
2290
+ font-size: var(--text-heading);
2250
2291
  cursor: pointer;
2251
2292
  }
2252
2293
  .detail-panel-close:hover { color: var(--pixel-white); }
2253
2294
  .detail-panel-content {
2254
- padding: 8px 12px;
2295
+ padding: var(--pad-button);
2255
2296
  overflow-y: auto;
2256
2297
  flex: 1;
2257
2298
  min-height: 0;
@@ -2262,20 +2303,20 @@ body.resize-dragging {
2262
2303
  gap: 10px;
2263
2304
  margin-bottom: 12px;
2264
2305
  }
2265
- .detail-avatar { font-size: calc(32px + var(--font-boost)); }
2306
+ .detail-avatar { font-size: var(--text-display); }
2266
2307
  .detail-name-block { flex: 1; }
2267
2308
  .detail-name {
2268
- font-size: calc(14px + var(--font-boost));
2309
+ font-size: var(--text-heading);
2269
2310
  font-weight: bold;
2270
2311
  color: var(--pixel-white);
2271
2312
  }
2272
2313
  .detail-role {
2273
- font-size: calc(11px + var(--font-boost));
2314
+ font-size: var(--text-subheading);
2274
2315
  color: var(--pixel-cyan);
2275
2316
  }
2276
2317
  .detail-score {
2277
2318
  border: 2px solid;
2278
- border-radius: 50%;
2319
+ border-radius: var(--radius-full);
2279
2320
  width: 44px;
2280
2321
  height: 44px;
2281
2322
  display: flex;
@@ -2285,30 +2326,30 @@ body.resize-dragging {
2285
2326
  flex-shrink: 0;
2286
2327
  }
2287
2328
  .detail-score span {
2288
- font-size: calc(14px + var(--font-boost));
2329
+ font-size: var(--text-heading);
2289
2330
  font-weight: bold;
2290
2331
  }
2291
2332
  .detail-score small {
2292
- font-size: calc(8px + var(--font-boost));
2333
+ font-size: var(--text-body);
2293
2334
  color: var(--text-dim);
2294
2335
  }
2295
2336
  .detail-section {
2296
2337
  margin-bottom: 10px;
2297
2338
  }
2298
2339
  .detail-label {
2299
- font-size: calc(9px + var(--font-boost));
2340
+ font-size: var(--text-body);
2300
2341
  color: var(--text-dim);
2301
2342
  text-transform: uppercase;
2302
2343
  letter-spacing: 0.5px;
2303
2344
  margin-bottom: 4px;
2304
2345
  }
2305
2346
  .detail-text {
2306
- font-size: calc(11px + var(--font-boost));
2347
+ font-size: var(--text-subheading);
2307
2348
  color: var(--pixel-white);
2308
2349
  line-height: 1.5;
2309
2350
  }
2310
2351
  .detail-description {
2311
- font-size: calc(10px + var(--font-boost));
2352
+ font-size: var(--text-subheading);
2312
2353
  color: var(--pixel-white);
2313
2354
  line-height: 1.6;
2314
2355
  max-height: 300px;
@@ -2316,55 +2357,55 @@ body.resize-dragging {
2316
2357
  padding: 6px;
2317
2358
  background: var(--bg-dark);
2318
2359
  border: 1px solid var(--border);
2319
- border-radius: 4px;
2360
+ border-radius: var(--radius-md);
2320
2361
  }
2321
2362
  .detail-tags-list,
2322
2363
  .detail-skills-list,
2323
2364
  .detail-tools-list {
2324
2365
  display: flex;
2325
2366
  flex-wrap: wrap;
2326
- gap: 4px;
2367
+ gap: var(--sp-1);
2327
2368
  }
2328
2369
  .detail-tag {
2329
- font-size: calc(9px + var(--font-boost));
2370
+ font-size: var(--text-body);
2330
2371
  padding: 2px 6px;
2331
2372
  background: rgba(255, 255, 0, 0.15);
2332
2373
  color: var(--pixel-yellow);
2333
- border-radius: 3px;
2374
+ border-radius: var(--radius-sm);
2334
2375
  }
2335
2376
  .detail-skill {
2336
- font-size: calc(9px + var(--font-boost));
2377
+ font-size: var(--text-body);
2337
2378
  padding: 2px 6px;
2338
2379
  background: rgba(0, 255, 136, 0.12);
2339
2380
  color: var(--pixel-green);
2340
- border-radius: 3px;
2381
+ border-radius: var(--radius-sm);
2341
2382
  }
2342
2383
  .detail-skill em {
2343
- font-size: calc(8px + var(--font-boost));
2384
+ font-size: var(--text-body);
2344
2385
  color: var(--text-dim);
2345
2386
  margin-left: 2px;
2346
2387
  }
2347
2388
  .detail-tool {
2348
- font-size: calc(9px + var(--font-boost));
2389
+ font-size: var(--text-body);
2349
2390
  padding: 2px 6px;
2350
2391
  background: rgba(74, 158, 255, 0.12);
2351
2392
  color: var(--pixel-cyan);
2352
- border-radius: 3px;
2393
+ border-radius: var(--radius-sm);
2353
2394
  }
2354
2395
  .detail-grid {
2355
2396
  display: grid;
2356
2397
  grid-template-columns: 1fr 1fr;
2357
- gap: 8px;
2398
+ gap: var(--sp-2);
2358
2399
  }
2359
2400
  .detail-panel-actions {
2360
2401
  display: flex;
2361
- gap: 6px;
2362
- padding: 8px 12px;
2402
+ gap: var(--sp-1);
2403
+ padding: var(--pad-button);
2363
2404
  border-top: 1px solid var(--border);
2364
2405
  }
2365
2406
  .detail-panel-actions .pixel-btn {
2366
2407
  flex: 1;
2367
- font-size: calc(10px + var(--font-boost));
2408
+ font-size: var(--text-subheading);
2368
2409
  }
2369
2410
  .detail-panel-actions .pixel-btn:disabled {
2370
2411
  opacity: 0.45;
@@ -2391,24 +2432,24 @@ body.resize-dragging {
2391
2432
  .interview-header-info {
2392
2433
  display: flex;
2393
2434
  align-items: center;
2394
- gap: 8px;
2435
+ gap: var(--sp-2);
2395
2436
  flex: 1;
2396
2437
  }
2397
2438
 
2398
2439
  .interview-model-badge {
2399
- font-size: calc(5px + var(--font-boost));
2440
+ font-size: var(--text-micro);
2400
2441
  color: var(--pixel-cyan);
2401
2442
  background: rgba(0, 204, 255, 0.1);
2402
2443
  border: 1px solid var(--pixel-cyan);
2403
2444
  padding: 2px 6px;
2404
- border-radius: 3px;
2445
+ border-radius: var(--radius-sm);
2405
2446
  white-space: nowrap;
2406
2447
  }
2407
2448
 
2408
2449
  .chat-container {
2409
2450
  flex: 1;
2410
2451
  overflow-y: auto;
2411
- padding: 12px;
2452
+ padding: var(--pad-component);
2412
2453
  background: var(--bg-dark);
2413
2454
  min-height: 300px;
2414
2455
  max-height: 50vh;
@@ -2424,7 +2465,7 @@ body.resize-dragging {
2424
2465
  /* System message */
2425
2466
  .chat-msg-system {
2426
2467
  text-align: center;
2427
- font-size: calc(6px + var(--font-boost));
2468
+ font-size: var(--text-label);
2428
2469
  color: var(--text-dim);
2429
2470
  padding: 4px 12px;
2430
2471
  font-style: italic;
@@ -2433,7 +2474,7 @@ body.resize-dragging {
2433
2474
  /* Message bubble base */
2434
2475
  .chat-bubble {
2435
2476
  display: flex;
2436
- gap: 8px;
2477
+ gap: var(--sp-2);
2437
2478
  max-width: 85%;
2438
2479
  animation: chatFadeIn 0.2s ease-out;
2439
2480
  }
@@ -2452,7 +2493,7 @@ body.resize-dragging {
2452
2493
  .chat-bubble.outgoing .bubble-content {
2453
2494
  background: rgba(0, 204, 255, 0.12);
2454
2495
  border: 1px solid rgba(0, 204, 255, 0.3);
2455
- border-radius: 8px 2px 8px 8px;
2496
+ border-radius: var(--radius-md) var(--radius-sm) var(--radius-md) var(--radius-md);
2456
2497
  }
2457
2498
 
2458
2499
  /* Candidate messages (left-aligned) */
@@ -2463,17 +2504,17 @@ body.resize-dragging {
2463
2504
  .chat-bubble.incoming .bubble-content {
2464
2505
  background: rgba(255, 204, 0, 0.08);
2465
2506
  border: 1px solid rgba(255, 204, 0, 0.2);
2466
- border-radius: 2px 8px 8px 8px;
2507
+ border-radius: var(--radius-sm) var(--radius-md) var(--radius-md) var(--radius-md);
2467
2508
  }
2468
2509
 
2469
2510
  .bubble-avatar {
2470
2511
  width: 20px;
2471
2512
  height: 20px;
2472
- border-radius: 4px;
2513
+ border-radius: var(--radius-md);
2473
2514
  display: flex;
2474
2515
  align-items: center;
2475
2516
  justify-content: center;
2476
- font-size: calc(10px + var(--font-boost));
2517
+ font-size: var(--text-subheading);
2477
2518
  flex-shrink: 0;
2478
2519
  background: var(--bg-panel);
2479
2520
  border: 1px solid var(--border);
@@ -2481,7 +2522,7 @@ body.resize-dragging {
2481
2522
 
2482
2523
  .bubble-content {
2483
2524
  padding: 6px 10px;
2484
- font-size: calc(7px + var(--font-boost));
2525
+ font-size: var(--text-label);
2485
2526
  line-height: 1.6;
2486
2527
  }
2487
2528
 
@@ -2505,7 +2546,7 @@ body.resize-dragging {
2505
2546
  .bubble-image {
2506
2547
  max-width: 200px;
2507
2548
  max-height: 150px;
2508
- border-radius: 4px;
2549
+ border-radius: var(--radius-md);
2509
2550
  margin-top: 4px;
2510
2551
  cursor: pointer;
2511
2552
  border: 1px solid var(--border);
@@ -2519,12 +2560,12 @@ body.resize-dragging {
2519
2560
  .bubble-file {
2520
2561
  display: inline-flex;
2521
2562
  align-items: center;
2522
- gap: 4px;
2563
+ gap: var(--sp-1);
2523
2564
  padding: 3px 8px;
2524
2565
  background: rgba(255, 255, 255, 0.05);
2525
2566
  border: 1px solid var(--border);
2526
- border-radius: 4px;
2527
- font-size: calc(6px + var(--font-boost));
2567
+ border-radius: var(--radius-md);
2568
+ font-size: var(--text-label);
2528
2569
  color: var(--pixel-cyan);
2529
2570
  margin-top: 4px;
2530
2571
  }
@@ -2537,14 +2578,14 @@ body.resize-dragging {
2537
2578
  .chat-typing {
2538
2579
  display: flex;
2539
2580
  align-items: center;
2540
- gap: 6px;
2581
+ gap: var(--sp-1);
2541
2582
  padding: 4px 0;
2542
2583
  }
2543
2584
 
2544
2585
  .chat-typing.hidden { display: none; }
2545
2586
 
2546
2587
  .typing-avatar {
2547
- font-size: calc(10px + var(--font-boost));
2588
+ font-size: var(--text-subheading);
2548
2589
  }
2549
2590
 
2550
2591
  .typing-dots {
@@ -2556,7 +2597,7 @@ body.resize-dragging {
2556
2597
  width: 4px;
2557
2598
  height: 4px;
2558
2599
  background: var(--pixel-yellow);
2559
- border-radius: 50%;
2600
+ border-radius: var(--radius-full);
2560
2601
  animation: typingBounce 1.2s infinite ease-in-out;
2561
2602
  }
2562
2603
 
@@ -2571,7 +2612,7 @@ body.resize-dragging {
2571
2612
  /* File preview bar */
2572
2613
  .chat-preview-bar {
2573
2614
  display: flex;
2574
- gap: 6px;
2615
+ gap: var(--sp-1);
2575
2616
  padding: 6px 12px;
2576
2617
  background: var(--bg-panel);
2577
2618
  border-top: 1px solid var(--border);
@@ -2589,7 +2630,7 @@ body.resize-dragging {
2589
2630
  width: 40px;
2590
2631
  height: 40px;
2591
2632
  object-fit: cover;
2592
- border-radius: 4px;
2633
+ border-radius: var(--radius-md);
2593
2634
  border: 1px solid var(--border);
2594
2635
  }
2595
2636
 
@@ -2601,8 +2642,8 @@ body.resize-dragging {
2601
2642
  justify-content: center;
2602
2643
  background: var(--bg-dark);
2603
2644
  border: 1px solid var(--border);
2604
- border-radius: 4px;
2605
- font-size: calc(5px + var(--font-boost));
2645
+ border-radius: var(--radius-md);
2646
+ font-size: var(--text-micro);
2606
2647
  color: var(--text-dim);
2607
2648
  text-align: center;
2608
2649
  word-break: break-all;
@@ -2618,8 +2659,8 @@ body.resize-dragging {
2618
2659
  background: var(--pixel-red);
2619
2660
  color: #fff;
2620
2661
  border: none;
2621
- border-radius: 50%;
2622
- font-size: calc(6px + var(--font-boost));
2662
+ border-radius: var(--radius-full);
2663
+ font-size: var(--text-label);
2623
2664
  cursor: pointer;
2624
2665
  display: flex;
2625
2666
  align-items: center;
@@ -2631,16 +2672,16 @@ body.resize-dragging {
2631
2672
  .chat-input-area {
2632
2673
  display: flex;
2633
2674
  align-items: flex-end;
2634
- gap: 6px;
2635
- padding: 8px 12px;
2675
+ gap: var(--sp-1);
2676
+ padding: var(--pad-button);
2636
2677
  border-top: 1px solid var(--border);
2637
2678
  background: var(--bg-panel);
2638
2679
  }
2639
2680
 
2640
2681
  .chat-attach-btn {
2641
2682
  cursor: pointer;
2642
- font-size: calc(12px + var(--font-boost));
2643
- padding: 4px;
2683
+ font-size: var(--text-subheading);
2684
+ padding: var(--sp-1);
2644
2685
  opacity: 0.6;
2645
2686
  transition: opacity 0.15s;
2646
2687
  flex-shrink: 0;
@@ -2651,11 +2692,11 @@ body.resize-dragging {
2651
2692
  .chat-textarea {
2652
2693
  flex: 1;
2653
2694
  font-family: 'Press Start 2P', monospace;
2654
- font-size: calc(7px + var(--font-boost));
2695
+ font-size: var(--text-label);
2655
2696
  background: var(--bg-dark);
2656
2697
  color: var(--pixel-white);
2657
2698
  border: 1px solid var(--border);
2658
- padding: 6px 8px;
2699
+ padding: var(--sp-1) var(--sp-2);
2659
2700
  resize: none;
2660
2701
  min-height: 24px;
2661
2702
  max-height: 80px;
@@ -2678,9 +2719,9 @@ body.resize-dragging {
2678
2719
  border: none;
2679
2720
  width: 28px;
2680
2721
  height: 28px;
2681
- border-radius: 4px;
2722
+ border-radius: var(--radius-md);
2682
2723
  cursor: pointer;
2683
- font-size: calc(10px + var(--font-boost));
2724
+ font-size: var(--text-subheading);
2684
2725
  display: flex;
2685
2726
  align-items: center;
2686
2727
  justify-content: center;
@@ -2693,7 +2734,7 @@ body.resize-dragging {
2693
2734
 
2694
2735
  .interview-actions {
2695
2736
  display: flex;
2696
- gap: 6px;
2737
+ gap: var(--sp-1);
2697
2738
  justify-content: flex-end;
2698
2739
  padding: 8px 12px 12px;
2699
2740
  }
@@ -2719,8 +2760,8 @@ body.resize-dragging {
2719
2760
  /* ===== Task Panel (above roster) ===== */
2720
2761
  .task-empty {
2721
2762
  color: var(--text-dim);
2722
- font-size: calc(6px + var(--font-boost));
2723
- padding: 6px 8px;
2763
+ font-size: var(--text-label);
2764
+ padding: var(--sp-1) var(--sp-2);
2724
2765
  text-align: center;
2725
2766
  }
2726
2767
 
@@ -2733,7 +2774,7 @@ body.resize-dragging {
2733
2774
  }
2734
2775
  .followup-textarea {
2735
2776
  width: 100%;
2736
- font-size: calc(6px + var(--font-boost));
2777
+ font-size: var(--text-label);
2737
2778
  font-family: 'Press Start 2P', monospace;
2738
2779
  background: var(--bg-dark);
2739
2780
  color: var(--pixel-white);
@@ -2750,10 +2791,10 @@ body.resize-dragging {
2750
2791
 
2751
2792
  /* Task result report in detail view */
2752
2793
  .task-result-report {
2753
- font-size: calc(6px + var(--font-boost));
2794
+ font-size: var(--text-label);
2754
2795
  color: var(--pixel-white);
2755
2796
  background: var(--bg-dark);
2756
- padding: 8px 10px;
2797
+ padding: var(--sp-2) var(--pad-component);
2757
2798
  border: 1px solid var(--border);
2758
2799
  border-left: 3px solid var(--pixel-green);
2759
2800
  max-height: 300px;
@@ -2761,8 +2802,8 @@ body.resize-dragging {
2761
2802
  line-height: 1.8;
2762
2803
  }
2763
2804
  .task-result-report.md-rendered br + br { display: none; }
2764
- .task-result-report .md-h1 { font-size: calc(8px + var(--font-boost)); color: var(--pixel-yellow); margin: 6px 0 3px; }
2765
- .task-result-report .md-h2 { font-size: calc(7px + var(--font-boost)); color: var(--pixel-cyan); margin: 5px 0 2px; }
2805
+ .task-result-report .md-h1 { font-size: var(--text-body); color: var(--pixel-yellow); margin: 6px 0 3px; }
2806
+ .task-result-report .md-h2 { font-size: var(--text-label); color: var(--pixel-cyan); margin: 5px 0 2px; }
2766
2807
  .task-result-report .md-h3 { font-size: 6.5px; color: var(--pixel-green); margin: 4px 0 2px; }
2767
2808
  .task-result-report .md-li { padding-left: 8px; position: relative; }
2768
2809
  .task-result-report .md-li::before { content: "·"; position: absolute; left: 2px; color: var(--text-dim); }
@@ -2773,11 +2814,11 @@ body.resize-dragging {
2773
2814
  /* ===== Projects Panel ===== */
2774
2815
  .project-panel-card {
2775
2816
  position: relative;
2776
- padding: 6px 8px;
2817
+ padding: var(--sp-1) var(--sp-2);
2777
2818
  border-left: 3px solid var(--pixel-white);
2778
2819
  margin-bottom: 3px;
2779
2820
  background: var(--bg-dark);
2780
- font-size: calc(6px + var(--font-boost));
2821
+ font-size: var(--text-label);
2781
2822
  transition: background 0.15s;
2782
2823
  cursor: pointer;
2783
2824
  }
@@ -2802,13 +2843,13 @@ body.resize-dragging {
2802
2843
 
2803
2844
  .project-panel-name {
2804
2845
  color: var(--pixel-white);
2805
- font-size: calc(7px + var(--font-boost));
2846
+ font-size: var(--text-label);
2806
2847
  line-height: 1.6;
2807
2848
  }
2808
2849
 
2809
2850
  .project-panel-meta {
2810
2851
  color: var(--text-dim);
2811
- font-size: calc(5px + var(--font-boost));
2852
+ font-size: var(--text-micro);
2812
2853
  margin-top: 2px;
2813
2854
  }
2814
2855
 
@@ -2821,15 +2862,15 @@ body.resize-dragging {
2821
2862
  /* Project card task progress overlay */
2822
2863
  .proj-card-progress {
2823
2864
  margin-top: 2px;
2824
- font-size: calc(8px + var(--font-boost));
2865
+ font-size: var(--text-body);
2825
2866
  }
2826
2867
 
2827
2868
  .proj-progress {
2828
2869
  display: flex;
2829
2870
  align-items: center;
2830
- gap: 4px;
2871
+ gap: var(--sp-1);
2831
2872
  margin-top: 2px;
2832
- font-size: calc(5px + var(--font-boost));
2873
+ font-size: var(--text-micro);
2833
2874
  color: var(--text-dim);
2834
2875
  }
2835
2876
 
@@ -2838,20 +2879,20 @@ body.resize-dragging {
2838
2879
  max-width: 60px;
2839
2880
  height: 3px;
2840
2881
  background: rgba(255, 255, 255, 0.1);
2841
- border-radius: 2px;
2882
+ border-radius: var(--radius-sm);
2842
2883
  overflow: hidden;
2843
2884
  }
2844
2885
 
2845
2886
  .proj-progress-bar {
2846
2887
  height: 100%;
2847
2888
  background: var(--pixel-green);
2848
- border-radius: 2px;
2889
+ border-radius: var(--radius-sm);
2849
2890
  transition: width 0.3s ease;
2850
2891
  }
2851
2892
 
2852
2893
  .proj-executor {
2853
2894
  color: var(--text-dim);
2854
- font-size: calc(5px + var(--font-boost));
2895
+ font-size: var(--text-micro);
2855
2896
  margin-top: 1px;
2856
2897
  }
2857
2898
 
@@ -2863,7 +2904,7 @@ body.resize-dragging {
2863
2904
  border: none;
2864
2905
  color: #666;
2865
2906
  cursor: pointer;
2866
- font-size: calc(8px + var(--font-boost));
2907
+ font-size: var(--text-body);
2867
2908
  padding: 0 2px;
2868
2909
  }
2869
2910
  .proj-cancel-btn:hover { color: #ff4444; }
@@ -2876,7 +2917,7 @@ body.resize-dragging {
2876
2917
  border: 1px solid #333;
2877
2918
  color: #4af;
2878
2919
  cursor: pointer;
2879
- font-size: calc(6px + var(--font-boost));
2920
+ font-size: var(--text-label);
2880
2921
  font-family: monospace;
2881
2922
  padding: 0 3px;
2882
2923
  line-height: 1.4;
@@ -2895,12 +2936,12 @@ body.resize-dragging {
2895
2936
  .product-group-header {
2896
2937
  display: flex;
2897
2938
  align-items: center;
2898
- gap: 6px;
2899
- padding: 6px 8px;
2939
+ gap: var(--sp-1);
2940
+ padding: var(--sp-1) var(--sp-2);
2900
2941
  background: var(--bg-dark);
2901
2942
  border-left: 3px solid var(--pixel-cyan);
2902
2943
  cursor: pointer;
2903
- font-size: calc(7px + var(--font-boost));
2944
+ font-size: var(--text-label);
2904
2945
  color: var(--pixel-white);
2905
2946
  transition: background 0.15s;
2906
2947
  }
@@ -2915,13 +2956,13 @@ body.resize-dragging {
2915
2956
  }
2916
2957
 
2917
2958
  .product-expand-arrow {
2918
- font-size: calc(6px + var(--font-boost));
2959
+ font-size: var(--text-label);
2919
2960
  color: var(--pixel-cyan);
2920
2961
  width: 10px;
2921
2962
  }
2922
2963
 
2923
2964
  .product-status-dot {
2924
- font-size: calc(5px + var(--font-boost));
2965
+ font-size: var(--text-micro);
2925
2966
  }
2926
2967
 
2927
2968
  .product-status-dot.status-active { color: var(--pixel-green); }
@@ -2950,7 +2991,7 @@ body.resize-dragging {
2950
2991
 
2951
2992
  .product-subsection-header {
2952
2993
  padding: 3px 8px;
2953
- font-size: calc(6px + var(--font-boost));
2994
+ font-size: var(--text-label);
2954
2995
  color: var(--text-dim);
2955
2996
  cursor: pointer;
2956
2997
  transition: color 0.15s;
@@ -2961,7 +3002,7 @@ body.resize-dragging {
2961
3002
  }
2962
3003
 
2963
3004
  .subsection-arrow {
2964
- font-size: calc(5px + var(--font-boost));
3005
+ font-size: var(--text-micro);
2965
3006
  color: var(--pixel-cyan);
2966
3007
  margin-right: 2px;
2967
3008
  }
@@ -2973,7 +3014,7 @@ body.resize-dragging {
2973
3014
  /* KR Items */
2974
3015
  .product-kr-item {
2975
3016
  padding: 2px 8px;
2976
- font-size: calc(5.5px + var(--font-boost));
3017
+ font-size: var(--text-micro);
2977
3018
  }
2978
3019
 
2979
3020
  .kr-title {
@@ -2984,7 +3025,7 @@ body.resize-dragging {
2984
3025
  .kr-progress {
2985
3026
  display: flex;
2986
3027
  align-items: center;
2987
- gap: 6px;
3028
+ gap: var(--sp-1);
2988
3029
  }
2989
3030
 
2990
3031
  .kr-progress-track {
@@ -2992,26 +3033,26 @@ body.resize-dragging {
2992
3033
  max-width: 80px;
2993
3034
  height: 3px;
2994
3035
  background: rgba(255, 255, 255, 0.1);
2995
- border-radius: 2px;
3036
+ border-radius: var(--radius-sm);
2996
3037
  overflow: hidden;
2997
3038
  }
2998
3039
 
2999
3040
  .kr-progress-bar {
3000
3041
  height: 100%;
3001
3042
  background: var(--pixel-green);
3002
- border-radius: 2px;
3043
+ border-radius: var(--radius-sm);
3003
3044
  transition: width 0.3s ease;
3004
3045
  }
3005
3046
 
3006
3047
  .kr-progress-text {
3007
3048
  color: var(--text-dim);
3008
- font-size: calc(5px + var(--font-boost));
3049
+ font-size: var(--text-micro);
3009
3050
  }
3010
3051
 
3011
3052
  /* Issue Items */
3012
3053
  .product-issue-item {
3013
3054
  padding: 2px 8px;
3014
- font-size: calc(5.5px + var(--font-boost));
3055
+ font-size: var(--text-micro);
3015
3056
  color: var(--pixel-white);
3016
3057
  }
3017
3058
 
@@ -3040,8 +3081,8 @@ body.resize-dragging {
3040
3081
  color: var(--pixel-white);
3041
3082
  border: 2px solid var(--border);
3042
3083
  font-family: 'Press Start 2P', monospace;
3043
- font-size: calc(7px + var(--font-boost));
3044
- padding: 6px 8px;
3084
+ font-size: var(--text-label);
3085
+ padding: var(--sp-1) var(--sp-2);
3045
3086
  outline: none;
3046
3087
  cursor: pointer;
3047
3088
  }
@@ -3056,8 +3097,8 @@ body.resize-dragging {
3056
3097
  color: var(--pixel-white);
3057
3098
  border: 2px solid var(--pixel-green);
3058
3099
  font-family: 'Press Start 2P', monospace;
3059
- font-size: calc(7px + var(--font-boost));
3060
- padding: 6px 8px;
3100
+ font-size: var(--text-label);
3101
+ padding: var(--sp-1) var(--sp-2);
3061
3102
  margin-top: 4px;
3062
3103
  outline: none;
3063
3104
  }
@@ -3095,14 +3136,14 @@ body.resize-dragging {
3095
3136
  }
3096
3137
 
3097
3138
  .dash-title {
3098
- font-size: calc(7px + var(--font-boost));
3139
+ font-size: var(--text-label);
3099
3140
  color: var(--pixel-orange);
3100
3141
  margin-bottom: 6px;
3101
3142
  }
3102
3143
 
3103
3144
  .dash-stats {
3104
3145
  display: flex;
3105
- gap: 12px;
3146
+ gap: var(--gap-stack);
3106
3147
  flex-wrap: wrap;
3107
3148
  }
3108
3149
 
@@ -3114,13 +3155,13 @@ body.resize-dragging {
3114
3155
  }
3115
3156
 
3116
3157
  .dash-num {
3117
- font-size: calc(12px + var(--font-boost));
3158
+ font-size: var(--text-subheading);
3118
3159
  color: var(--pixel-white);
3119
3160
  font-weight: bold;
3120
3161
  }
3121
3162
 
3122
3163
  .dash-label {
3123
- font-size: calc(5px + var(--font-boost));
3164
+ font-size: var(--text-micro);
3124
3165
  color: var(--text-dim);
3125
3166
  margin-top: 2px;
3126
3167
  }
@@ -3134,7 +3175,7 @@ body.resize-dragging {
3134
3175
  .dash-dept-item {
3135
3176
  display: flex;
3136
3177
  justify-content: space-between;
3137
- font-size: calc(6px + var(--font-boost));
3178
+ font-size: var(--text-label);
3138
3179
  color: var(--pixel-white);
3139
3180
  padding: 3px 6px;
3140
3181
  background: var(--bg-dark);
@@ -3144,7 +3185,7 @@ body.resize-dragging {
3144
3185
  .dash-cost-table {
3145
3186
  width: 100%;
3146
3187
  border-collapse: collapse;
3147
- font-size: calc(6px + var(--font-boost));
3188
+ font-size: var(--text-label);
3148
3189
  }
3149
3190
  .dash-cost-table th {
3150
3191
  text-align: left;
@@ -3168,7 +3209,7 @@ body.resize-dragging {
3168
3209
  .settings-section-header {
3169
3210
  display: flex;
3170
3211
  align-items: center;
3171
- gap: 6px;
3212
+ gap: var(--sp-1);
3172
3213
  padding: 5px 8px;
3173
3214
  cursor: pointer;
3174
3215
  user-select: none;
@@ -3179,11 +3220,11 @@ body.resize-dragging {
3179
3220
  }
3180
3221
  .settings-section-title {
3181
3222
  font-family: 'Press Start 2P', monospace;
3182
- font-size: calc(7px + var(--font-boost));
3223
+ font-size: var(--text-label);
3183
3224
  color: var(--pixel-cyan);
3184
3225
  }
3185
3226
  .settings-collapse-arrow {
3186
- font-size: calc(7px + var(--font-boost));
3227
+ font-size: var(--text-label);
3187
3228
  color: var(--pixel-cyan);
3188
3229
  display: inline-block;
3189
3230
  transition: transform 0.15s ease;
@@ -3201,14 +3242,14 @@ body.resize-dragging {
3201
3242
  .api-provider-card {
3202
3243
  background: var(--bg-dark);
3203
3244
  border: 2px solid var(--border);
3204
- border-radius: 4px;
3205
- padding: 8px;
3245
+ border-radius: var(--radius-md);
3246
+ padding: var(--sp-2);
3206
3247
  margin-bottom: 6px;
3207
3248
  }
3208
3249
  .api-card-header {
3209
3250
  display: flex;
3210
3251
  align-items: center;
3211
- gap: 6px;
3252
+ gap: var(--sp-1);
3212
3253
  margin-bottom: 6px;
3213
3254
  }
3214
3255
  .api-card-toggle {
@@ -3217,7 +3258,7 @@ body.resize-dragging {
3217
3258
  margin-bottom: 0;
3218
3259
  }
3219
3260
  .api-card-arrow {
3220
- font-size: calc(7px + var(--font-boost));
3261
+ font-size: var(--text-label);
3221
3262
  color: var(--text-dim);
3222
3263
  margin-left: auto;
3223
3264
  display: inline-block;
@@ -3231,18 +3272,18 @@ body.resize-dragging {
3231
3272
  }
3232
3273
  .api-card-title {
3233
3274
  font-family: 'Press Start 2P', monospace;
3234
- font-size: calc(8px + var(--font-boost));
3275
+ font-size: var(--text-body);
3235
3276
  color: var(--pixel-white);
3236
3277
  }
3237
3278
  .api-card-status {
3238
- font-size: calc(6px + var(--font-boost));
3279
+ font-size: var(--text-label);
3239
3280
  color: var(--text-dim);
3240
3281
  margin-left: 6px;
3241
3282
  }
3242
3283
  .api-status-dot {
3243
3284
  width: 8px;
3244
3285
  height: 8px;
3245
- border-radius: 50%;
3286
+ border-radius: var(--radius-full);
3246
3287
  display: inline-block;
3247
3288
  background: var(--pixel-red);
3248
3289
  }
@@ -3256,10 +3297,10 @@ body.resize-dragging {
3256
3297
  .api-card-body {
3257
3298
  display: flex;
3258
3299
  flex-direction: column;
3259
- gap: 4px;
3300
+ gap: var(--sp-1);
3260
3301
  }
3261
3302
  .api-field-label {
3262
- font-size: calc(6px + var(--font-boost));
3303
+ font-size: var(--text-label);
3263
3304
  color: var(--text-dim);
3264
3305
  margin-top: 2px;
3265
3306
  }
@@ -3268,9 +3309,9 @@ body.resize-dragging {
3268
3309
  border: 1px solid var(--border);
3269
3310
  color: var(--pixel-white);
3270
3311
  font-family: 'Press Start 2P', monospace;
3271
- font-size: calc(7px + var(--font-boost));
3312
+ font-size: var(--text-label);
3272
3313
  padding: 4px 6px;
3273
- border-radius: 2px;
3314
+ border-radius: var(--radius-sm);
3274
3315
  width: 100%;
3275
3316
  }
3276
3317
  .api-key-input:focus {
@@ -3279,7 +3320,7 @@ body.resize-dragging {
3279
3320
  }
3280
3321
  .api-card-actions {
3281
3322
  display: flex;
3282
- gap: 4px;
3323
+ gap: var(--sp-1);
3283
3324
  align-items: center;
3284
3325
  margin-top: 4px;
3285
3326
  }
@@ -3287,7 +3328,7 @@ body.resize-dragging {
3287
3328
  font-size: 7px !important;
3288
3329
  }
3289
3330
  .api-test-result {
3290
- font-size: calc(7px + var(--font-boost));
3331
+ font-size: var(--text-label);
3291
3332
  font-family: 'Press Start 2P', monospace;
3292
3333
  margin-left: 4px;
3293
3334
  }
@@ -3298,7 +3339,7 @@ body.resize-dragging {
3298
3339
  color: var(--pixel-red);
3299
3340
  }
3300
3341
  #api-settings-content {
3301
- padding: 4px;
3342
+ padding: var(--sp-1);
3302
3343
  text-align: left;
3303
3344
  }
3304
3345
  .api-provider-card,
@@ -3319,13 +3360,13 @@ body.resize-dragging {
3319
3360
  .company-culture-body {
3320
3361
  display: flex;
3321
3362
  flex-direction: column;
3322
- gap: 12px;
3323
- padding: 12px;
3363
+ gap: var(--gap-stack);
3364
+ padding: var(--pad-component);
3324
3365
  }
3325
3366
 
3326
3367
  .company-culture-input-area {
3327
3368
  display: flex;
3328
- gap: 8px;
3369
+ gap: var(--sp-2);
3329
3370
  align-items: flex-start;
3330
3371
  }
3331
3372
 
@@ -3335,8 +3376,8 @@ body.resize-dragging {
3335
3376
  border: 1px solid var(--border);
3336
3377
  color: var(--pixel-white);
3337
3378
  font-family: 'Press Start 2P', monospace;
3338
- font-size: calc(6px + var(--font-boost));
3339
- padding: 8px;
3379
+ font-size: var(--text-label);
3380
+ padding: var(--sp-2);
3340
3381
  resize: vertical;
3341
3382
  outline: none;
3342
3383
  min-height: 36px;
@@ -3349,7 +3390,7 @@ body.resize-dragging {
3349
3390
  .company-culture-list {
3350
3391
  display: flex;
3351
3392
  flex-direction: column;
3352
- gap: 6px;
3393
+ gap: var(--sp-1);
3353
3394
  max-height: 55vh;
3354
3395
  overflow-y: auto;
3355
3396
  }
@@ -3357,7 +3398,7 @@ body.resize-dragging {
3357
3398
  .company-culture-card {
3358
3399
  display: flex;
3359
3400
  align-items: flex-start;
3360
- gap: 8px;
3401
+ gap: var(--sp-2);
3361
3402
  background: var(--bg-dark);
3362
3403
  border: 1px solid var(--border);
3363
3404
  padding: 10px;
@@ -3370,7 +3411,7 @@ body.resize-dragging {
3370
3411
 
3371
3412
  .company-culture-card-num {
3372
3413
  font-family: 'Press Start 2P', monospace;
3373
- font-size: calc(8px + var(--font-boost));
3414
+ font-size: var(--text-body);
3374
3415
  color: var(--pixel-yellow);
3375
3416
  min-width: 20px;
3376
3417
  text-align: right;
@@ -3379,7 +3420,7 @@ body.resize-dragging {
3379
3420
 
3380
3421
  .company-culture-card-content {
3381
3422
  flex: 1;
3382
- font-size: calc(7px + var(--font-boost));
3423
+ font-size: var(--text-label);
3383
3424
  color: var(--pixel-white);
3384
3425
  line-height: 1.6;
3385
3426
  word-break: break-all;
@@ -3389,12 +3430,12 @@ body.resize-dragging {
3389
3430
  display: flex;
3390
3431
  flex-direction: column;
3391
3432
  align-items: flex-end;
3392
- gap: 4px;
3433
+ gap: var(--sp-1);
3393
3434
  min-width: 50px;
3394
3435
  }
3395
3436
 
3396
3437
  .company-culture-card-date {
3397
- font-size: calc(5px + var(--font-boost));
3438
+ font-size: var(--text-micro);
3398
3439
  color: var(--pixel-gray);
3399
3440
  }
3400
3441
 
@@ -3402,7 +3443,7 @@ body.resize-dragging {
3402
3443
  background: none;
3403
3444
  border: 1px solid transparent;
3404
3445
  color: var(--pixel-gray);
3405
- font-size: calc(7px + var(--font-boost));
3446
+ font-size: var(--text-label);
3406
3447
  cursor: pointer;
3407
3448
  padding: 2px 4px;
3408
3449
  transition: color 0.2s, border-color 0.2s;
@@ -3421,8 +3462,8 @@ body.resize-dragging {
3421
3462
 
3422
3463
  .file-edit-info {
3423
3464
  display: flex;
3424
- gap: 8px;
3425
- font-size: calc(6px + var(--font-boost));
3465
+ gap: var(--sp-2);
3466
+ font-size: var(--text-label);
3426
3467
  padding: 2px 0;
3427
3468
  }
3428
3469
 
@@ -3450,7 +3491,7 @@ body.resize-dragging {
3450
3491
 
3451
3492
  .fe-diff-old-h, .fe-diff-new-h {
3452
3493
  flex: 1;
3453
- font-size: calc(6px + var(--font-boost));
3494
+ font-size: var(--text-label);
3454
3495
  padding: 3px 6px;
3455
3496
  text-align: center;
3456
3497
  }
@@ -3473,7 +3514,7 @@ body.resize-dragging {
3473
3514
  font-size: 5.5px;
3474
3515
  font-family: monospace;
3475
3516
  line-height: 1.5;
3476
- padding: 4px;
3517
+ padding: var(--sp-1);
3477
3518
  white-space: pre-wrap;
3478
3519
  word-break: break-all;
3479
3520
  }
@@ -3501,14 +3542,14 @@ body.resize-dragging {
3501
3542
 
3502
3543
  /* ===== Markdown Rendering ===== */
3503
3544
  .md-rendered {
3504
- font-size: calc(7px + var(--font-boost));
3545
+ font-size: var(--text-label);
3505
3546
  line-height: 1.8;
3506
3547
  color: var(--pixel-white);
3507
3548
  word-break: break-word;
3508
3549
  }
3509
3550
 
3510
3551
  .md-h1 {
3511
- font-size: calc(9px + var(--font-boost));
3552
+ font-size: var(--text-body);
3512
3553
  font-weight: bold;
3513
3554
  color: var(--pixel-yellow);
3514
3555
  margin: 4px 0 2px;
@@ -3517,7 +3558,7 @@ body.resize-dragging {
3517
3558
  }
3518
3559
 
3519
3560
  .md-h2 {
3520
- font-size: calc(8px + var(--font-boost));
3561
+ font-size: var(--text-body);
3521
3562
  font-weight: bold;
3522
3563
  color: var(--pixel-cyan);
3523
3564
  margin: 3px 0 2px;
@@ -3531,7 +3572,7 @@ body.resize-dragging {
3531
3572
  }
3532
3573
 
3533
3574
  .md-h4 {
3534
- font-size: calc(7px + var(--font-boost));
3575
+ font-size: var(--text-label);
3535
3576
  font-weight: bold;
3536
3577
  color: var(--pixel-white);
3537
3578
  margin: 2px 0 1px;
@@ -3556,7 +3597,7 @@ body.resize-dragging {
3556
3597
  .md-inline-code {
3557
3598
  background: var(--bg-dark);
3558
3599
  padding: 0 3px;
3559
- border-radius: 1px;
3600
+ border-radius: var(--radius-sm);
3560
3601
  color: var(--pixel-orange);
3561
3602
  font-family: monospace;
3562
3603
  font-size: 6.5px;
@@ -3565,9 +3606,9 @@ body.resize-dragging {
3565
3606
  .md-code-block {
3566
3607
  background: var(--bg-dark);
3567
3608
  border: 1px solid var(--border);
3568
- border-radius: 2px;
3609
+ border-radius: var(--radius-sm);
3569
3610
  padding: 4px 6px;
3570
- font-size: calc(6px + var(--font-boost));
3611
+ font-size: var(--text-label);
3571
3612
  font-family: monospace;
3572
3613
  white-space: pre-wrap;
3573
3614
  word-break: break-all;
@@ -3602,7 +3643,7 @@ body.resize-dragging {
3602
3643
  padding: 6px 16px;
3603
3644
  background: rgba(0, 136, 255, 0.92);
3604
3645
  color: #fff;
3605
- font-size: calc(9px + var(--font-boost));
3646
+ font-size: var(--text-body);
3606
3647
  font-family: 'Press Start 2P', monospace;
3607
3648
  }
3608
3649
 
@@ -3611,7 +3652,7 @@ body.resize-dragging {
3611
3652
  }
3612
3653
 
3613
3654
  .code-update-banner .pixel-btn.small {
3614
- font-size: calc(8px + var(--font-boost));
3655
+ font-size: var(--text-body);
3615
3656
  padding: 3px 10px;
3616
3657
  background: var(--pixel-green);
3617
3658
  color: #000;
@@ -3623,7 +3664,7 @@ body.resize-dragging {
3623
3664
  background: none;
3624
3665
  border: none;
3625
3666
  color: #fff;
3626
- font-size: calc(14px + var(--font-boost));
3667
+ font-size: var(--text-heading);
3627
3668
  cursor: pointer;
3628
3669
  padding: 0 4px;
3629
3670
  line-height: 1;
@@ -3638,7 +3679,7 @@ body.resize-dragging {
3638
3679
  z-index: var(--z-toast);
3639
3680
  display: flex;
3640
3681
  justify-content: center;
3641
- padding: 8px;
3682
+ padding: var(--sp-2);
3642
3683
  pointer-events: none;
3643
3684
  }
3644
3685
 
@@ -3650,8 +3691,8 @@ body.resize-dragging {
3650
3691
  background: rgba(255, 136, 68, 0.9);
3651
3692
  color: #000;
3652
3693
  padding: 6px 16px;
3653
- border-radius: 2px;
3654
- font-size: calc(10px + var(--font-boost));
3694
+ border-radius: var(--radius-sm);
3695
+ font-size: var(--text-subheading);
3655
3696
  font-family: 'Press Start 2P', monospace;
3656
3697
  animation: reconnect-pulse 1.5s ease-in-out infinite;
3657
3698
  }
@@ -3670,19 +3711,19 @@ body.resize-dragging {
3670
3711
 
3671
3712
  .resolution-modal-body {
3672
3713
  flex-direction: column !important;
3673
- gap: 8px;
3714
+ gap: var(--sp-2);
3674
3715
  overflow-y: auto;
3675
3716
  max-height: 60vh;
3676
3717
  }
3677
3718
 
3678
3719
  .resolution-task-info {
3679
- padding: 6px 8px;
3720
+ padding: var(--sp-1) var(--sp-2);
3680
3721
  border-left: 3px solid var(--pixel-yellow);
3681
3722
  margin-bottom: 4px;
3682
3723
  }
3683
3724
 
3684
3725
  .res-task-label {
3685
- font-size: calc(7px + var(--font-boost));
3726
+ font-size: var(--text-label);
3686
3727
  color: var(--pixel-cyan);
3687
3728
  }
3688
3729
 
@@ -3691,7 +3732,7 @@ body.resize-dragging {
3691
3732
  }
3692
3733
 
3693
3734
  .res-meta {
3694
- font-size: calc(6px + var(--font-boost));
3735
+ font-size: var(--text-label);
3695
3736
  color: var(--text-dim);
3696
3737
  margin-top: 2px;
3697
3738
  }
@@ -3699,9 +3740,9 @@ body.resize-dragging {
3699
3740
  .res-edit-card {
3700
3741
  border: 1px solid var(--border);
3701
3742
  background: var(--bg-dark);
3702
- padding: 8px;
3743
+ padding: var(--sp-2);
3703
3744
  margin-bottom: 6px;
3704
- border-radius: 2px;
3745
+ border-radius: var(--radius-sm);
3705
3746
  }
3706
3747
 
3707
3748
  .res-edit-header {
@@ -3712,20 +3753,20 @@ body.resize-dragging {
3712
3753
  }
3713
3754
 
3714
3755
  .res-edit-file {
3715
- font-size: calc(7px + var(--font-boost));
3756
+ font-size: var(--text-label);
3716
3757
  color: var(--pixel-cyan);
3717
3758
  word-break: break-all;
3718
3759
  }
3719
3760
 
3720
3761
  .res-edit-by {
3721
- font-size: calc(6px + var(--font-boost));
3762
+ font-size: var(--text-label);
3722
3763
  color: var(--text-dim);
3723
3764
  white-space: nowrap;
3724
3765
  margin-left: 8px;
3725
3766
  }
3726
3767
 
3727
3768
  .res-edit-reason {
3728
- font-size: calc(6px + var(--font-boost));
3769
+ font-size: var(--text-label);
3729
3770
  color: var(--pixel-white);
3730
3771
  margin-bottom: 6px;
3731
3772
  padding: 2px 0;
@@ -3733,18 +3774,18 @@ body.resize-dragging {
3733
3774
 
3734
3775
  .res-edit-actions {
3735
3776
  display: flex;
3736
- gap: 12px;
3777
+ gap: var(--gap-stack);
3737
3778
  margin-top: 6px;
3738
3779
  padding-top: 6px;
3739
3780
  border-top: 1px solid var(--border);
3740
3781
  }
3741
3782
 
3742
3783
  .res-radio {
3743
- font-size: calc(7px + var(--font-boost));
3784
+ font-size: var(--text-label);
3744
3785
  color: var(--pixel-white);
3745
3786
  display: flex;
3746
3787
  align-items: center;
3747
- gap: 4px;
3788
+ gap: var(--sp-1);
3748
3789
  cursor: pointer;
3749
3790
  }
3750
3791
 
@@ -3759,7 +3800,7 @@ body.resize-dragging {
3759
3800
  background: var(--bg-panel);
3760
3801
  border: 2px solid var(--border);
3761
3802
  border-top: none;
3762
- border-radius: 0 0 2px 2px;
3803
+ border-radius: 0 0 var(--radius-sm) var(--radius-sm);
3763
3804
  overflow-y: auto;
3764
3805
  max-height: 200px;
3765
3806
  }
@@ -3769,7 +3810,7 @@ body.resize-dragging {
3769
3810
  }
3770
3811
 
3771
3812
  .deferred-empty {
3772
- font-size: calc(6px + var(--font-boost));
3813
+ font-size: var(--text-label);
3773
3814
  color: var(--text-dim);
3774
3815
  padding: 6px;
3775
3816
  text-align: center;
@@ -3792,11 +3833,11 @@ body.resize-dragging {
3792
3833
  display: flex;
3793
3834
  justify-content: space-between;
3794
3835
  align-items: center;
3795
- gap: 4px;
3836
+ gap: var(--sp-1);
3796
3837
  }
3797
3838
 
3798
3839
  .deferred-file {
3799
- font-size: calc(6px + var(--font-boost));
3840
+ font-size: var(--text-label);
3800
3841
  color: var(--pixel-cyan);
3801
3842
  word-break: break-all;
3802
3843
  }
@@ -3812,7 +3853,7 @@ body.resize-dragging {
3812
3853
  color: var(--pixel-red);
3813
3854
  border: 1px solid var(--pixel-red);
3814
3855
  padding: 1px 4px;
3815
- border-radius: 2px;
3856
+ border-radius: var(--radius-sm);
3816
3857
  white-space: nowrap;
3817
3858
  }
3818
3859
 
@@ -3821,7 +3862,7 @@ body.resize-dragging {
3821
3862
  color: var(--pixel-green);
3822
3863
  border: 1px solid var(--pixel-green);
3823
3864
  padding: 1px 4px;
3824
- border-radius: 2px;
3865
+ border-radius: var(--radius-sm);
3825
3866
  white-space: nowrap;
3826
3867
  }
3827
3868
 
@@ -3832,8 +3873,8 @@ body.resize-dragging {
3832
3873
  }
3833
3874
 
3834
3875
  .pixel-btn.small {
3835
- padding: 4px 8px;
3836
- font-size: calc(6px + var(--font-boost));
3876
+ padding: var(--sp-1) var(--sp-2);
3877
+ font-size: var(--text-label);
3837
3878
  flex: none;
3838
3879
  }
3839
3880
 
@@ -3844,7 +3885,7 @@ body.resize-dragging {
3844
3885
  }
3845
3886
 
3846
3887
  #meeting-inquiry-actions {
3847
- padding: 4px 8px;
3888
+ padding: var(--sp-1) var(--sp-2);
3848
3889
  text-align: right;
3849
3890
  }
3850
3891
 
@@ -3854,7 +3895,7 @@ body.resize-dragging {
3854
3895
  margin-bottom: 3px;
3855
3896
  border-left: 3px solid var(--border);
3856
3897
  background: var(--bg-dark);
3857
- font-size: calc(6px + var(--font-boost));
3898
+ font-size: var(--text-label);
3858
3899
  line-height: 1.6;
3859
3900
  transition: border-color 0.2s;
3860
3901
  }
@@ -3889,10 +3930,10 @@ body.resize-dragging {
3889
3930
  border: 1px solid var(--pixel-red);
3890
3931
  color: var(--pixel-red);
3891
3932
  font-family: 'Press Start 2P', monospace;
3892
- font-size: calc(4px + var(--font-boost));
3933
+ font-size: var(--text-micro);
3893
3934
  padding: 1px 4px;
3894
3935
  cursor: pointer;
3895
- border-radius: 1px;
3936
+ border-radius: var(--radius-sm);
3896
3937
  transition: background 0.1s;
3897
3938
  }
3898
3939
 
@@ -3919,15 +3960,15 @@ body.resize-dragging {
3919
3960
  .emp-cron-info {
3920
3961
  display: flex;
3921
3962
  align-items: center;
3922
- gap: 4px;
3923
- font-size: calc(6px + var(--font-boost));
3963
+ gap: var(--sp-1);
3964
+ font-size: var(--text-label);
3924
3965
  }
3925
3966
 
3926
3967
  .cron-status-dot {
3927
3968
  display: inline-block;
3928
3969
  width: 4px;
3929
3970
  height: 4px;
3930
- border-radius: 50%;
3971
+ border-radius: var(--radius-full);
3931
3972
  flex-shrink: 0;
3932
3973
  }
3933
3974
 
@@ -3949,20 +3990,20 @@ body.resize-dragging {
3949
3990
  .cron-name {
3950
3991
  color: var(--pixel-white);
3951
3992
  font-family: 'Press Start 2P', monospace;
3952
- font-size: calc(5px + var(--font-boost));
3993
+ font-size: var(--text-micro);
3953
3994
  word-break: break-all;
3954
3995
  }
3955
3996
 
3956
3997
  .cron-interval {
3957
3998
  color: var(--pixel-yellow);
3958
3999
  font-family: 'Press Start 2P', monospace;
3959
- font-size: calc(5px + var(--font-boost));
4000
+ font-size: var(--text-micro);
3960
4001
  flex-shrink: 0;
3961
4002
  }
3962
4003
 
3963
4004
  .emp-cron-desc {
3964
4005
  color: var(--pixel-gray);
3965
- font-size: calc(5px + var(--font-boost));
4006
+ font-size: var(--text-micro);
3966
4007
  margin-top: 1px;
3967
4008
  word-break: break-word;
3968
4009
  max-height: 20px;
@@ -3978,10 +4019,10 @@ body.resize-dragging {
3978
4019
  border: 1px solid var(--pixel-red);
3979
4020
  color: var(--pixel-red);
3980
4021
  font-family: 'Press Start 2P', monospace;
3981
- font-size: calc(4px + var(--font-boost));
4022
+ font-size: var(--text-micro);
3982
4023
  padding: 1px 4px;
3983
4024
  cursor: pointer;
3984
- border-radius: 1px;
4025
+ border-radius: var(--radius-sm);
3985
4026
  transition: background 0.1s;
3986
4027
  }
3987
4028
 
@@ -3992,7 +4033,7 @@ body.resize-dragging {
3992
4033
 
3993
4034
  .cron-task-count {
3994
4035
  color: var(--pixel-gray);
3995
- font-size: calc(5px + var(--font-boost));
4036
+ font-size: var(--text-micro);
3996
4037
  opacity: 0.7;
3997
4038
  }
3998
4039
 
@@ -4001,7 +4042,7 @@ body.resize-dragging {
4001
4042
  border: 1px solid var(--pixel-red);
4002
4043
  color: var(--pixel-red);
4003
4044
  font-family: var(--font-pixel);
4004
- font-size: calc(5px + var(--font-boost));
4045
+ font-size: var(--text-micro);
4005
4046
  padding: 1px 4px;
4006
4047
  cursor: pointer;
4007
4048
  text-transform: uppercase;
@@ -4018,7 +4059,7 @@ body.resize-dragging {
4018
4059
  }
4019
4060
 
4020
4061
  .emp-taskboard-status {
4021
- font-size: calc(5px + var(--font-boost));
4062
+ font-size: var(--text-micro);
4022
4063
  font-weight: bold;
4023
4064
  text-transform: uppercase;
4024
4065
  margin-bottom: 1px;
@@ -4039,7 +4080,7 @@ body.resize-dragging {
4039
4080
 
4040
4081
  .emp-taskboard-result {
4041
4082
  color: var(--text-dim);
4042
- font-size: calc(5px + var(--font-boost));
4083
+ font-size: var(--text-micro);
4043
4084
  margin-top: 2px;
4044
4085
  max-height: 40px;
4045
4086
  overflow-y: auto;
@@ -4048,14 +4089,14 @@ body.resize-dragging {
4048
4089
 
4049
4090
  .emp-taskboard-cost {
4050
4091
  color: var(--pixel-yellow);
4051
- font-size: calc(5px + var(--font-boost));
4092
+ font-size: var(--text-micro);
4052
4093
  margin-top: 1px;
4053
4094
  }
4054
4095
 
4055
4096
  /* ===== Execution Log Viewer ===== */
4056
4097
  .emp-log-viewer {
4057
4098
  overflow-y: auto;
4058
- font-size: calc(6px + var(--font-boost));
4099
+ font-size: var(--text-label);
4059
4100
  }
4060
4101
 
4061
4102
  .emp-log-entry {
@@ -4069,7 +4110,7 @@ body.resize-dragging {
4069
4110
 
4070
4111
  .emp-log-entry .log-ts {
4071
4112
  color: var(--text-dim);
4072
- font-size: calc(5px + var(--font-boost));
4113
+ font-size: var(--text-micro);
4073
4114
  margin-right: 4px;
4074
4115
  }
4075
4116
 
@@ -4106,7 +4147,7 @@ body.resize-dragging {
4106
4147
  color: var(--pixel-cyan);
4107
4148
  cursor: pointer;
4108
4149
  margin-left: 4px;
4109
- font-size: calc(5px + var(--font-boost));
4150
+ font-size: var(--text-micro);
4110
4151
  text-decoration: underline;
4111
4152
  }
4112
4153
  .emp-log-entry .log-expand:hover,
@@ -4125,8 +4166,8 @@ body.resize-dragging {
4125
4166
  .tool-list-item {
4126
4167
  display: flex;
4127
4168
  align-items: center;
4128
- gap: 8px;
4129
- padding: 6px 8px;
4169
+ gap: var(--sp-2);
4170
+ padding: var(--sp-1) var(--sp-2);
4130
4171
  cursor: pointer;
4131
4172
  border-bottom: 1px solid var(--border);
4132
4173
  transition: background 0.1s;
@@ -4143,7 +4184,7 @@ body.resize-dragging {
4143
4184
  }
4144
4185
 
4145
4186
  .tool-list-no-icon {
4146
- font-size: calc(16px + var(--font-boost));
4187
+ font-size: var(--text-heading);
4147
4188
  width: 24px;
4148
4189
  text-align: center;
4149
4190
  }
@@ -4154,12 +4195,12 @@ body.resize-dragging {
4154
4195
  }
4155
4196
 
4156
4197
  .tool-list-name {
4157
- font-size: calc(8px + var(--font-boost));
4198
+ font-size: var(--text-body);
4158
4199
  color: var(--pixel-white);
4159
4200
  }
4160
4201
 
4161
4202
  .tool-list-desc {
4162
- font-size: calc(7px + var(--font-boost));
4203
+ font-size: var(--text-label);
4163
4204
  color: var(--pixel-gray);
4164
4205
  overflow: hidden;
4165
4206
  text-overflow: ellipsis;
@@ -4172,7 +4213,7 @@ body.resize-dragging {
4172
4213
  color: var(--pixel-gray);
4173
4214
  cursor: pointer;
4174
4215
  font-family: 'Press Start 2P', monospace;
4175
- font-size: calc(7px + var(--font-boost));
4216
+ font-size: var(--text-label);
4176
4217
  padding: 2px 6px;
4177
4218
  margin-bottom: 8px;
4178
4219
  }
@@ -4183,19 +4224,19 @@ body.resize-dragging {
4183
4224
  }
4184
4225
 
4185
4226
  .tool-detail h3 {
4186
- font-size: calc(9px + var(--font-boost));
4227
+ font-size: var(--text-body);
4187
4228
  color: var(--pixel-white);
4188
4229
  margin: 4px 0;
4189
4230
  }
4190
4231
 
4191
4232
  .tool-detail p {
4192
- font-size: calc(7px + var(--font-boost));
4233
+ font-size: var(--text-label);
4193
4234
  color: var(--pixel-gray);
4194
4235
  line-height: 1.6;
4195
4236
  }
4196
4237
 
4197
4238
  .tool-detail-section-title {
4198
- font-size: calc(7px + var(--font-boost));
4239
+ font-size: var(--text-label);
4199
4240
  color: var(--pixel-cyan);
4200
4241
  margin-top: 8px;
4201
4242
  border-bottom: 1px solid var(--border);
@@ -4204,7 +4245,7 @@ body.resize-dragging {
4204
4245
 
4205
4246
  .tool-yaml-content {
4206
4247
  font-family: monospace;
4207
- font-size: calc(7px + var(--font-boost));
4248
+ font-size: var(--text-label);
4208
4249
  background: var(--bg-dark);
4209
4250
  padding: 6px;
4210
4251
  overflow-x: auto;
@@ -4216,7 +4257,7 @@ body.resize-dragging {
4216
4257
  }
4217
4258
 
4218
4259
  .tool-file-list {
4219
- font-size: calc(7px + var(--font-boost));
4260
+ font-size: var(--text-label);
4220
4261
  color: var(--pixel-gray);
4221
4262
  padding-left: 16px;
4222
4263
  line-height: 2;
@@ -4225,7 +4266,7 @@ body.resize-dragging {
4225
4266
  .tool-detail-header {
4226
4267
  display: flex;
4227
4268
  align-items: flex-start;
4228
- gap: 8px;
4269
+ gap: var(--sp-2);
4229
4270
  margin-bottom: 6px;
4230
4271
  }
4231
4272
 
@@ -4244,7 +4285,7 @@ body.resize-dragging {
4244
4285
  }
4245
4286
 
4246
4287
  .tool-section-title {
4247
- font-size: calc(7px + var(--font-boost));
4288
+ font-size: var(--text-label);
4248
4289
  color: var(--pixel-cyan);
4249
4290
  font-weight: bold;
4250
4291
  margin-bottom: 4px;
@@ -4253,13 +4294,13 @@ body.resize-dragging {
4253
4294
 
4254
4295
  .tool-section-body {
4255
4296
  border: 1px solid var(--border);
4256
- border-radius: 3px;
4257
- padding: 8px;
4297
+ border-radius: var(--radius-sm);
4298
+ padding: var(--sp-2);
4258
4299
  background: var(--bg-dark);
4259
4300
  }
4260
4301
 
4261
4302
  .tool-info-row {
4262
- font-size: calc(7px + var(--font-boost));
4303
+ font-size: var(--text-label);
4263
4304
  margin-bottom: 2px;
4264
4305
  }
4265
4306
 
@@ -4269,14 +4310,14 @@ body.resize-dragging {
4269
4310
 
4270
4311
  .tool-oauth-section {
4271
4312
  border: 1px solid var(--border);
4272
- border-radius: 3px;
4273
- padding: 8px;
4313
+ border-radius: var(--radius-sm);
4314
+ padding: var(--sp-2);
4274
4315
  margin-bottom: 8px;
4275
4316
  background: var(--bg-dark);
4276
4317
  }
4277
4318
 
4278
4319
  .tool-oauth-status {
4279
- font-size: calc(7px + var(--font-boost));
4320
+ font-size: var(--text-label);
4280
4321
  margin-bottom: 6px;
4281
4322
  font-weight: bold;
4282
4323
  }
@@ -4304,7 +4345,7 @@ body.resize-dragging {
4304
4345
  margin-bottom: 4px;
4305
4346
  padding: 3px 6px;
4306
4347
  font-family: monospace;
4307
- font-size: calc(7px + var(--font-boost));
4348
+ font-size: var(--text-label);
4308
4349
  background: var(--bg-panel);
4309
4350
  border: 1px solid var(--border);
4310
4351
  color: var(--pixel-white);
@@ -4315,7 +4356,7 @@ body.resize-dragging {
4315
4356
  }
4316
4357
 
4317
4358
  .tool-oauth-edit {
4318
- font-size: calc(6px + var(--font-boost));
4359
+ font-size: var(--text-label);
4319
4360
  color: var(--pixel-cyan);
4320
4361
  cursor: pointer;
4321
4362
  text-decoration: underline;
@@ -4337,8 +4378,8 @@ body.resize-dragging {
4337
4378
 
4338
4379
  .empty-hint {
4339
4380
  color: var(--text-dim);
4340
- font-size: calc(7px + var(--font-boost));
4341
- padding: 12px;
4381
+ font-size: var(--text-label);
4382
+ padding: var(--pad-component);
4342
4383
  text-align: center;
4343
4384
  display: block;
4344
4385
  }
@@ -4348,7 +4389,7 @@ body.resize-dragging {
4348
4389
  padding: 4px 0;
4349
4390
  }
4350
4391
  .emp-settings-title {
4351
- font-size: calc(6px + var(--font-boost));
4392
+ font-size: var(--text-label);
4352
4393
  color: var(--pixel-cyan);
4353
4394
  margin-bottom: 2px;
4354
4395
  text-transform: uppercase;
@@ -4360,7 +4401,7 @@ body.resize-dragging {
4360
4401
  color: var(--pixel-white);
4361
4402
  border: 1px solid var(--border);
4362
4403
  font-family: 'Press Start 2P', monospace;
4363
- font-size: calc(7px + var(--font-boost));
4404
+ font-size: var(--text-label);
4364
4405
  padding: 2px 4px;
4365
4406
  }
4366
4407
  .emp-settings-field input:focus,
@@ -4376,7 +4417,7 @@ body.resize-dragging {
4376
4417
  width: 90vw;
4377
4418
  }
4378
4419
  .company-direction-body {
4379
- padding: 12px;
4420
+ padding: var(--pad-component);
4380
4421
  flex-direction: column;
4381
4422
  }
4382
4423
 
@@ -4386,7 +4427,7 @@ body.resize-dragging {
4386
4427
  width: 90vw;
4387
4428
  }
4388
4429
  .generic-popup-content .popup-message {
4389
- font-size: calc(7px + var(--font-boost));
4430
+ font-size: var(--text-label);
4390
4431
  color: var(--pixel-white);
4391
4432
  line-height: 1.6;
4392
4433
  white-space: pre-wrap;
@@ -4394,11 +4435,11 @@ body.resize-dragging {
4394
4435
  }
4395
4436
  .generic-popup-content .popup-url-box {
4396
4437
  margin: 8px 0;
4397
- padding: 6px 8px;
4438
+ padding: var(--sp-1) var(--sp-2);
4398
4439
  background: var(--bg-dark);
4399
4440
  border: 2px solid var(--border);
4400
- border-radius: 4px;
4401
- font-size: calc(7px + var(--font-boost));
4441
+ border-radius: var(--radius-md);
4442
+ font-size: var(--text-label);
4402
4443
  word-break: break-all;
4403
4444
  color: var(--pixel-green);
4404
4445
  cursor: pointer;
@@ -4408,7 +4449,7 @@ body.resize-dragging {
4408
4449
  }
4409
4450
  .generic-popup-content .popup-actions {
4410
4451
  display: flex;
4411
- gap: 6px;
4452
+ gap: var(--sp-1);
4412
4453
  margin-top: 8px;
4413
4454
  justify-content: flex-end;
4414
4455
  }
@@ -4418,14 +4459,14 @@ body.resize-dragging {
4418
4459
  margin-bottom: 10px;
4419
4460
  }
4420
4461
  .retro-section h4 {
4421
- font-size: calc(8px + var(--font-boost));
4462
+ font-size: var(--text-body);
4422
4463
  color: var(--pixel-cyan);
4423
4464
  margin: 0 0 4px 0;
4424
4465
  text-transform: uppercase;
4425
4466
  letter-spacing: 0.5px;
4426
4467
  }
4427
4468
  .retro-section p {
4428
- font-size: calc(7px + var(--font-boost));
4469
+ font-size: var(--text-label);
4429
4470
  color: var(--pixel-white);
4430
4471
  line-height: 1.6;
4431
4472
  margin: 2px 0;
@@ -4443,7 +4484,7 @@ body.resize-dragging {
4443
4484
  justify-content: center;
4444
4485
  width: 28px;
4445
4486
  height: 28px;
4446
- font-size: calc(14px + var(--font-boost));
4487
+ font-size: var(--text-heading);
4447
4488
  cursor: pointer;
4448
4489
  color: var(--pixel-cyan);
4449
4490
  opacity: 0.7;
@@ -4456,8 +4497,8 @@ body.resize-dragging {
4456
4497
  /* ===== Chat File Preview Bar ===== */
4457
4498
  .chat-preview-bar {
4458
4499
  display: flex;
4459
- gap: 6px;
4460
- padding: 4px 8px;
4500
+ gap: var(--sp-1);
4501
+ padding: var(--sp-1) var(--sp-2);
4461
4502
  background: var(--bg-panel-alt);
4462
4503
  border-top: 1px solid var(--border);
4463
4504
  overflow-x: auto;
@@ -4471,7 +4512,7 @@ body.resize-dragging {
4471
4512
  height: 40px;
4472
4513
  object-fit: cover;
4473
4514
  border: 1px solid var(--border);
4474
- border-radius: 2px;
4515
+ border-radius: var(--radius-sm);
4475
4516
  }
4476
4517
  .chat-preview-file {
4477
4518
  width: 40px;
@@ -4481,8 +4522,8 @@ body.resize-dragging {
4481
4522
  justify-content: center;
4482
4523
  background: var(--bg-dark);
4483
4524
  border: 1px solid var(--border);
4484
- border-radius: 2px;
4485
- font-size: calc(5px + var(--font-boost));
4525
+ border-radius: var(--radius-sm);
4526
+ font-size: var(--text-micro);
4486
4527
  color: var(--text-dim);
4487
4528
  text-align: center;
4488
4529
  overflow: hidden;
@@ -4493,10 +4534,10 @@ body.resize-dragging {
4493
4534
  right: -4px;
4494
4535
  width: 14px;
4495
4536
  height: 14px;
4496
- border-radius: 50%;
4537
+ border-radius: var(--radius-full);
4497
4538
  background: var(--pixel-red);
4498
4539
  color: #fff;
4499
- font-size: calc(8px + var(--font-boost));
4540
+ font-size: var(--text-body);
4500
4541
  border: none;
4501
4542
  cursor: pointer;
4502
4543
  display: flex;
@@ -4507,12 +4548,12 @@ body.resize-dragging {
4507
4548
  .bubble-image {
4508
4549
  max-height: 100px;
4509
4550
  max-width: 200px;
4510
- border-radius: 4px;
4551
+ border-radius: var(--radius-md);
4511
4552
  margin-top: 4px;
4512
4553
  cursor: pointer;
4513
4554
  }
4514
4555
  .bubble-file {
4515
- font-size: calc(6px + var(--font-boost));
4556
+ font-size: var(--text-label);
4516
4557
  color: var(--pixel-cyan);
4517
4558
  margin-top: 2px;
4518
4559
  }
@@ -4521,9 +4562,9 @@ body.resize-dragging {
4521
4562
  .roster-badge {
4522
4563
  display: inline-block;
4523
4564
  font-family: 'Press Start 2P', monospace;
4524
- font-size: calc(5px + var(--font-boost));
4565
+ font-size: var(--text-micro);
4525
4566
  padding: 1px 4px;
4526
- border-radius: 3px;
4567
+ border-radius: var(--radius-sm);
4527
4568
  margin-left: 4px;
4528
4569
  vertical-align: middle;
4529
4570
  }
@@ -4550,9 +4591,9 @@ body.resize-dragging {
4550
4591
  .okr-item {
4551
4592
  display: flex;
4552
4593
  align-items: center;
4553
- gap: 6px;
4594
+ gap: var(--sp-1);
4554
4595
  margin-bottom: 4px;
4555
- font-size: calc(6px + var(--font-boost));
4596
+ font-size: var(--text-label);
4556
4597
  }
4557
4598
  .okr-objective {
4558
4599
  flex: 1;
@@ -4566,7 +4607,7 @@ body.resize-dragging {
4566
4607
  height: 6px;
4567
4608
  background: var(--bg-dark);
4568
4609
  border: 1px solid var(--border);
4569
- border-radius: 3px;
4610
+ border-radius: var(--radius-sm);
4570
4611
  overflow: hidden;
4571
4612
  }
4572
4613
  .okr-progress-fill {
@@ -4576,7 +4617,7 @@ body.resize-dragging {
4576
4617
  }
4577
4618
  .okr-progress-text {
4578
4619
  color: var(--text-dim);
4579
- font-size: calc(5px + var(--font-boost));
4620
+ font-size: var(--text-micro);
4580
4621
  min-width: 24px;
4581
4622
  text-align: right;
4582
4623
  }
@@ -4587,7 +4628,7 @@ body.resize-dragging {
4587
4628
  background: var(--bg-panel);
4588
4629
  color: var(--text-dim);
4589
4630
  border: none; padding: 3px 8px; cursor: pointer;
4590
- font-size: calc(8px + var(--font-boost)); font-family: inherit;
4631
+ font-size: var(--text-body); font-family: inherit;
4591
4632
  }
4592
4633
  .project-tab.active {
4593
4634
  background: var(--pixel-cyan);
@@ -4624,7 +4665,7 @@ body.resize-dragging {
4624
4665
  top: 0;
4625
4666
  bottom: 0;
4626
4667
  overflow-y: auto;
4627
- padding: 16px;
4668
+ padding: var(--pad-panel);
4628
4669
  background: #111;
4629
4670
  border-left: 1px solid var(--pixel-green-dim, #1a3a2a);
4630
4671
  z-index: var(--z-dropdown);
@@ -4637,7 +4678,7 @@ body.resize-dragging {
4637
4678
  .tree-detail-header {
4638
4679
  display: flex;
4639
4680
  align-items: center;
4640
- gap: 12px;
4681
+ gap: var(--gap-stack);
4641
4682
  margin-bottom: 16px;
4642
4683
  padding-bottom: 12px;
4643
4684
  border-bottom: 1px solid #333;
@@ -4646,20 +4687,20 @@ body.resize-dragging {
4646
4687
  .tree-detail-avatar {
4647
4688
  width: 32px;
4648
4689
  height: 32px;
4649
- border-radius: 50%;
4690
+ border-radius: var(--radius-full);
4650
4691
  background: var(--bg-dark);
4651
4692
  border: 1px solid var(--pixel-green);
4652
4693
  object-fit: cover;
4653
4694
  display: flex;
4654
4695
  align-items: center;
4655
4696
  justify-content: center;
4656
- font-size: calc(8px + var(--font-boost));
4697
+ font-size: var(--text-body);
4657
4698
  color: var(--text-dim);
4658
4699
  flex-shrink: 0;
4659
4700
  }
4660
4701
 
4661
4702
  .tree-detail-role {
4662
- font-size: calc(7px + var(--font-boost));
4703
+ font-size: var(--text-label);
4663
4704
  color: var(--text-dim);
4664
4705
  }
4665
4706
 
@@ -4669,7 +4710,7 @@ body.resize-dragging {
4669
4710
 
4670
4711
  .detail-section h4 {
4671
4712
  color: var(--pixel-green);
4672
- font-size: calc(11px + var(--font-boost));
4713
+ font-size: var(--text-subheading);
4673
4714
  text-transform: uppercase;
4674
4715
  margin-bottom: 4px;
4675
4716
  }
@@ -4677,9 +4718,9 @@ body.resize-dragging {
4677
4718
  .detail-prompt,
4678
4719
  .detail-result {
4679
4720
  background: #0a0a0a;
4680
- padding: 8px;
4681
- border-radius: 4px;
4682
- font-size: calc(12px + var(--font-boost));
4721
+ padding: var(--sp-2);
4722
+ border-radius: var(--radius-md);
4723
+ font-size: var(--text-subheading);
4683
4724
  color: #ccc;
4684
4725
  white-space: pre-wrap;
4685
4726
  word-break: break-word;
@@ -4690,8 +4731,8 @@ body.resize-dragging {
4690
4731
  .detail-meta {
4691
4732
  display: flex;
4692
4733
  flex-direction: column;
4693
- gap: 4px;
4694
- font-size: calc(11px + var(--font-boost));
4734
+ gap: var(--sp-1);
4735
+ font-size: var(--text-subheading);
4695
4736
  color: #666;
4696
4737
  }
4697
4738
 
@@ -4713,19 +4754,19 @@ body.resize-dragging {
4713
4754
  .project-report-dialog {
4714
4755
  background: var(--bg-panel);
4715
4756
  border: 2px solid var(--pixel-cyan);
4716
- border-radius: 2px;
4757
+ border-radius: var(--radius-sm);
4717
4758
  width: 520px;
4718
4759
  max-width: 90vw;
4719
4760
  max-height: 80vh;
4720
- padding: 16px;
4761
+ padding: var(--pad-panel);
4721
4762
  box-shadow: 0 0 40px rgba(0, 221, 255, 0.2);
4722
4763
  display: flex;
4723
4764
  flex-direction: column;
4724
- gap: 12px;
4765
+ gap: var(--gap-stack);
4725
4766
  overflow: hidden;
4726
4767
  }
4727
4768
  .project-report-header {
4728
- font-size: calc(11px + var(--font-boost));
4769
+ font-size: var(--text-subheading);
4729
4770
  color: var(--pixel-cyan);
4730
4771
  border-bottom: 1px solid var(--border);
4731
4772
  padding-bottom: 8px;
@@ -4734,7 +4775,7 @@ body.resize-dragging {
4734
4775
  background: var(--bg-dark);
4735
4776
  border: 1px solid var(--border);
4736
4777
  padding: 10px;
4737
- font-size: calc(10px + var(--font-boost));
4778
+ font-size: var(--text-subheading);
4738
4779
  line-height: 1.6;
4739
4780
  color: var(--pixel-white);
4740
4781
  white-space: pre-wrap;
@@ -4743,7 +4784,7 @@ body.resize-dragging {
4743
4784
  overflow-y: auto;
4744
4785
  }
4745
4786
  .project-report-body pre {
4746
- font-size: calc(9px + var(--font-boost));
4787
+ font-size: var(--text-body);
4747
4788
  background: var(--bg-panel-alt);
4748
4789
  padding: 6px;
4749
4790
  border: 1px solid var(--border);
@@ -4752,7 +4793,7 @@ body.resize-dragging {
4752
4793
  .project-report-meta {
4753
4794
  display: flex;
4754
4795
  justify-content: space-between;
4755
- font-size: calc(8px + var(--font-boost));
4796
+ font-size: var(--text-body);
4756
4797
  color: var(--pixel-gray);
4757
4798
  }
4758
4799
  .project-report-actions {
@@ -4782,19 +4823,19 @@ body.resize-dragging {
4782
4823
  .project-team-list {
4783
4824
  display: flex;
4784
4825
  flex-wrap: wrap;
4785
- gap: 4px;
4826
+ gap: var(--sp-1);
4786
4827
  }
4787
4828
 
4788
4829
  .project-team-member {
4789
4830
  display: flex;
4790
4831
  align-items: center;
4791
- gap: 4px;
4832
+ gap: var(--sp-1);
4792
4833
  padding: 3px 6px;
4793
4834
  background: var(--bg-dark);
4794
4835
  border: 1px solid var(--border);
4795
- border-radius: 4px;
4836
+ border-radius: var(--radius-md);
4796
4837
  cursor: pointer;
4797
- font-size: calc(5px + var(--font-boost));
4838
+ font-size: var(--text-micro);
4798
4839
  }
4799
4840
 
4800
4841
  .project-team-member:hover {
@@ -4804,7 +4845,7 @@ body.resize-dragging {
4804
4845
  .project-team-avatar {
4805
4846
  width: 16px;
4806
4847
  height: 16px;
4807
- border-radius: 50%;
4848
+ border-radius: var(--radius-full);
4808
4849
  }
4809
4850
 
4810
4851
  .project-team-info {
@@ -4814,12 +4855,12 @@ body.resize-dragging {
4814
4855
 
4815
4856
  .project-team-name {
4816
4857
  color: var(--pixel-green);
4817
- font-size: calc(6px + var(--font-boost));
4858
+ font-size: var(--text-label);
4818
4859
  }
4819
4860
 
4820
4861
  .project-team-role {
4821
4862
  color: var(--text-dim);
4822
- font-size: calc(5px + var(--font-boost));
4863
+ font-size: var(--text-micro);
4823
4864
  }
4824
4865
 
4825
4866
  /* Employee project history */
@@ -4832,7 +4873,7 @@ body.resize-dragging {
4832
4873
  padding: 3px 4px;
4833
4874
  border-bottom: 1px solid var(--border);
4834
4875
  cursor: pointer;
4835
- font-size: calc(5px + var(--font-boost));
4876
+ font-size: var(--text-micro);
4836
4877
  }
4837
4878
 
4838
4879
  .emp-project-item:hover {
@@ -4841,7 +4882,7 @@ body.resize-dragging {
4841
4882
 
4842
4883
  .emp-project-task {
4843
4884
  color: var(--pixel-white);
4844
- font-size: calc(6px + var(--font-boost));
4885
+ font-size: var(--text-label);
4845
4886
  white-space: nowrap;
4846
4887
  overflow: hidden;
4847
4888
  text-overflow: ellipsis;
@@ -4851,7 +4892,7 @@ body.resize-dragging {
4851
4892
  display: flex;
4852
4893
  justify-content: space-between;
4853
4894
  color: var(--text-dim);
4854
- font-size: calc(5px + var(--font-boost));
4895
+ font-size: var(--text-micro);
4855
4896
  margin-top: 1px;
4856
4897
  }
4857
4898
 
@@ -4868,13 +4909,13 @@ body.resize-dragging {
4868
4909
  .talent-pool-modal-body {
4869
4910
  overflow-y: auto;
4870
4911
  max-height: 55vh;
4871
- padding: 12px;
4912
+ padding: var(--pad-component);
4872
4913
  }
4873
4914
 
4874
4915
  .talent-pool-badge {
4875
- font-size: calc(8px + var(--font-boost));
4916
+ font-size: var(--text-body);
4876
4917
  padding: 2px 8px;
4877
- border-radius: 3px;
4918
+ border-radius: var(--radius-sm);
4878
4919
  margin-left: 8px;
4879
4920
  font-family: 'Press Start 2P', monospace;
4880
4921
  }
@@ -4892,7 +4933,7 @@ body.resize-dragging {
4892
4933
  .talent-pool-list {
4893
4934
  display: flex;
4894
4935
  flex-direction: column;
4895
- gap: 8px;
4936
+ gap: var(--sp-2);
4896
4937
  }
4897
4938
 
4898
4939
  .talent-pool-card {
@@ -4904,12 +4945,12 @@ body.resize-dragging {
4904
4945
 
4905
4946
  .talent-pool-card .talent-name {
4906
4947
  font-family: 'Press Start 2P', monospace;
4907
- font-size: calc(10px + var(--font-boost));
4948
+ font-size: var(--text-subheading);
4908
4949
  color: var(--text-primary);
4909
4950
  }
4910
4951
 
4911
4952
  .talent-pool-card .talent-role {
4912
- font-size: calc(11px + var(--font-boost));
4953
+ font-size: var(--text-subheading);
4913
4954
  color: var(--text-secondary);
4914
4955
  margin-top: 4px;
4915
4956
  }
@@ -4917,12 +4958,12 @@ body.resize-dragging {
4917
4958
  .talent-pool-card .talent-skills {
4918
4959
  display: flex;
4919
4960
  flex-wrap: wrap;
4920
- gap: 4px;
4961
+ gap: var(--sp-1);
4921
4962
  margin-top: 6px;
4922
4963
  }
4923
4964
 
4924
4965
  .talent-pool-card .skill-tag {
4925
- font-size: calc(9px + var(--font-boost));
4966
+ font-size: var(--text-body);
4926
4967
  padding: 2px 6px;
4927
4968
  background: var(--bg-hover);
4928
4969
  border: 1px solid var(--border);
@@ -4930,7 +4971,7 @@ body.resize-dragging {
4930
4971
  }
4931
4972
 
4932
4973
  .talent-pool-card .talent-status {
4933
- font-size: calc(9px + var(--font-boost));
4974
+ font-size: var(--text-body);
4934
4975
  margin-top: 6px;
4935
4976
  color: var(--text-muted);
4936
4977
  }
@@ -4940,9 +4981,9 @@ body.resize-dragging {
4940
4981
  display: inline-block;
4941
4982
  background: #555;
4942
4983
  color: #fff;
4943
- border-radius: 8px;
4984
+ border-radius: var(--radius-md);
4944
4985
  padding: 0 6px;
4945
- font-size: calc(10px + var(--font-boost));
4986
+ font-size: var(--text-subheading);
4946
4987
  margin-left: 4px;
4947
4988
  vertical-align: middle;
4948
4989
  }
@@ -4958,18 +4999,18 @@ body.resize-dragging {
4958
4999
  .inbox-item {
4959
5000
  display: flex;
4960
5001
  align-items: flex-start;
4961
- gap: 8px;
4962
- padding: 8px 10px;
5002
+ gap: var(--sp-2);
5003
+ padding: var(--sp-2) var(--pad-component);
4963
5004
  border-left: 3px solid #f39c12;
4964
5005
  cursor: pointer;
4965
5006
  transition: background 0.2s;
4966
5007
  }
4967
5008
  .inbox-item:hover { background: rgba(243, 156, 18, 0.1); }
4968
- .inbox-status { font-size: calc(14px + var(--font-boost)); flex-shrink: 0; margin-top: 2px; }
5009
+ .inbox-status { font-size: var(--text-heading); flex-shrink: 0; margin-top: 2px; }
4969
5010
  .inbox-item-content { flex: 1; min-width: 0; }
4970
- .inbox-item-from { font-family: var(--font-pixel); color: #f39c12; font-size: calc(11px + var(--font-boost)); }
4971
- .inbox-item-desc { color: #aaa; font-size: calc(11px + var(--font-boost)); margin-top: 2px; max-height: 60px; overflow-y: auto; word-break: break-word; }
4972
- .inbox-empty { color: #555; font-size: calc(11px + var(--font-boost)); text-align: center; padding: 12px; }
5011
+ .inbox-item-from { font-family: var(--font-pixel); color: #f39c12; font-size: var(--text-subheading); }
5012
+ .inbox-item-desc { color: #aaa; font-size: var(--text-subheading); margin-top: 2px; max-height: 60px; overflow-y: auto; word-break: break-word; }
5013
+ .inbox-empty { color: #555; font-size: var(--text-subheading); text-align: center; padding: var(--pad-component); }
4973
5014
 
4974
5015
  /* ===== CEO Conversation Dialog ===== */
4975
5016
  .ceo-conv-overlay {
@@ -4993,41 +5034,41 @@ body.resize-dragging {
4993
5034
  .ceo-conv-header {
4994
5035
  display: flex; justify-content: space-between; align-items: center;
4995
5036
  padding: 10px 16px; border-bottom: 1px solid #333;
4996
- color: #0ff; font-family: var(--font-pixel); font-size: calc(14px + var(--font-boost));
5037
+ color: #0ff; font-family: var(--font-pixel); font-size: var(--text-heading);
4997
5038
  }
4998
5039
  .ceo-conv-close {
4999
- background: none; border: none; color: #888; font-size: calc(18px + var(--font-boost)); cursor: pointer;
5040
+ background: none; border: none; color: #888; font-size: var(--text-display); cursor: pointer;
5000
5041
  }
5001
5042
  .ceo-conv-close:hover { color: #fff; }
5002
5043
  .ceo-conv-desc {
5003
- padding: 8px 16px; border-bottom: 1px solid #222; color: #888; font-size: calc(12px + var(--font-boost));
5044
+ padding: 8px 16px; border-bottom: 1px solid #222; color: #888; font-size: var(--text-subheading);
5004
5045
  }
5005
5046
  .ceo-conv-desc.hidden { display: none; }
5006
5047
  .ceo-conv-messages { flex: 1; overflow-y: auto; padding: 12px 16px; }
5007
5048
  .conv-msg { margin-bottom: 12px; max-width: 75%; }
5008
5049
  .conv-msg-ceo { margin-left: auto; text-align: right; }
5009
5050
  .conv-msg-employee { margin-right: auto; }
5010
- .conv-msg-sender { font-family: var(--font-pixel); font-size: calc(10px + var(--font-boost)); margin-bottom: 2px; }
5051
+ .conv-msg-sender { font-family: var(--font-pixel); font-size: var(--text-subheading); margin-bottom: 2px; }
5011
5052
  .conv-msg-ceo .conv-msg-sender { color: #ffd700; }
5012
5053
  .conv-msg-employee .conv-msg-sender { color: #0ff; }
5013
5054
  .conv-msg-text {
5014
- background: #2a2a3e; padding: 8px 12px; border-radius: 4px;
5015
- font-size: calc(13px + var(--font-boost)); color: #ddd; line-height: 1.5; white-space: pre-wrap;
5055
+ background: #2a2a3e; padding: var(--pad-button); border-radius: var(--radius-md);
5056
+ font-size: var(--text-heading); color: #ddd; line-height: 1.5; white-space: pre-wrap;
5016
5057
  }
5017
5058
  .conv-msg-ceo .conv-msg-text { background: #3a3520; border: 1px solid rgba(255, 215, 0, 0.2); }
5018
5059
  .conv-msg-employee .conv-msg-text { border: 1px solid rgba(0, 255, 255, 0.1); }
5019
- .conv-msg-time { font-size: calc(9px + var(--font-boost)); color: #555; margin-top: 2px; }
5020
- .conv-attachment { font-size: calc(11px + var(--font-boost)); color: #0ff; margin-top: 4px; }
5060
+ .conv-msg-time { font-size: var(--text-body); color: #555; margin-top: 2px; }
5061
+ .conv-attachment { font-size: var(--text-subheading); color: #0ff; margin-top: 4px; }
5021
5062
  .ceo-conv-input-area { border-top: 1px solid #333; padding: 10px 16px; }
5022
5063
  .ceo-conv-attach-row { margin-bottom: 6px; }
5023
- .ceo-conv-attach-btn { cursor: pointer; font-size: calc(16px + var(--font-boost)); }
5064
+ .ceo-conv-attach-btn { cursor: pointer; font-size: var(--text-heading); }
5024
5065
  #ceo-conv-input {
5025
5066
  width: 100%; background: #0d0d1a; border: 1px solid #333;
5026
- color: #ddd; font-family: var(--font-mono); font-size: calc(13px + var(--font-boost));
5027
- padding: 8px; resize: none; box-sizing: border-box;
5067
+ color: #ddd; font-family: var(--font-mono); font-size: var(--text-heading);
5068
+ padding: var(--sp-2); resize: none; box-sizing: border-box;
5028
5069
  }
5029
5070
  #ceo-conv-input:focus { border-color: #0ff; outline: none; }
5030
- .ceo-conv-btn-row { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
5071
+ .ceo-conv-btn-row { display: flex; gap: var(--sp-2); margin-top: 8px; justify-content: flex-end; }
5031
5072
  .ceo-conv-send { background: #1a4a1a !important; border-color: #2d7d2d !important; }
5032
5073
  .ceo-conv-send:hover { background: #2d5a2d !important; }
5033
5074
  .ceo-conv-complete { background: #4a3a1a !important; border-color: #8a6a2a !important; }
@@ -5046,9 +5087,9 @@ body.resize-dragging {
5046
5087
  /* ===== ChatPanel Component ===== */
5047
5088
  .chat-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
5048
5089
  .chat-panel-header {
5049
- display: flex; align-items: center; gap: 8px;
5050
- padding: 4px 8px; border-bottom: 1px solid var(--border);
5051
- font-size: calc(7px + var(--font-boost)); font-family: 'Press Start 2P', monospace;
5090
+ display: flex; align-items: center; gap: var(--sp-2);
5091
+ padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--border);
5092
+ font-size: var(--text-label); font-family: 'Press Start 2P', monospace;
5052
5093
  }
5053
5094
  .chat-panel-type {
5054
5095
  background: var(--pixel-green); color: #000;
@@ -5057,46 +5098,46 @@ body.resize-dragging {
5057
5098
  .chat-panel-employee { flex: 1; }
5058
5099
  /* EA auto-reply toggle in CEO Inbox header */
5059
5100
  .ea-autoreply-sidebar {
5060
- display: flex; align-items: center; gap: 4px; cursor: pointer;
5061
- font-size: calc(6px + var(--font-boost)); font-family: 'Press Start 2P', monospace; color: var(--text-dim);
5101
+ display: flex; align-items: center; gap: var(--sp-1); cursor: pointer;
5102
+ font-size: var(--text-label); font-family: 'Press Start 2P', monospace; color: var(--text-dim);
5062
5103
  margin-left: auto; padding: 2px 6px;
5063
- border: 1px solid #344; border-radius: 3px; background: rgba(0,0,0,0.2);
5104
+ border: 1px solid #344; border-radius: var(--radius-sm); background: rgba(0,0,0,0.2);
5064
5105
  }
5065
5106
  .ea-autoreply-sidebar:hover { color: var(--pixel-green); border-color: var(--pixel-green); }
5066
5107
  .ea-autoreply-sidebar input[type="checkbox"] { width: 10px; height: 10px; cursor: pointer; }
5067
5108
  .ea-autoreply-sidebar input[type="checkbox"]:checked + span { color: var(--pixel-green); }
5068
5109
  .chat-panel-clear-btn {
5069
- font-size: calc(7px + var(--font-boost)); font-family: 'Press Start 2P', monospace; cursor: pointer;
5110
+ font-size: var(--text-label); font-family: 'Press Start 2P', monospace; cursor: pointer;
5070
5111
  background: #355; color: #fff; border: 1px solid #688; padding: 1px 6px;
5071
5112
  }
5072
5113
  .chat-panel-close-btn {
5073
- font-size: calc(7px + var(--font-boost)); font-family: 'Press Start 2P', monospace; cursor: pointer;
5114
+ font-size: var(--text-label); font-family: 'Press Start 2P', monospace; cursor: pointer;
5074
5115
  background: #633; color: #fff; border: 1px solid #966; padding: 1px 6px;
5075
5116
  }
5076
5117
  .chat-panel-messages {
5077
- flex: 1; overflow-y: auto; padding: 4px;
5078
- display: flex; flex-direction: column; gap: 4px;
5118
+ flex: 1; overflow-y: auto; padding: var(--sp-1);
5119
+ display: flex; flex-direction: column; gap: var(--sp-1);
5079
5120
  }
5080
- .chat-msg { max-width: 80%; padding: 4px 6px; font-size: calc(7px + var(--font-boost)); font-family: 'Press Start 2P', monospace; }
5121
+ .chat-msg { max-width: 80%; padding: 4px 6px; font-size: var(--text-label); font-family: 'Press Start 2P', monospace; }
5081
5122
  .chat-msg-ceo { align-self: flex-end; background: #234; border: 1px solid #456; }
5082
5123
  .chat-msg-agent { align-self: flex-start; background: #342; border: 1px solid #564; }
5083
- .chat-msg-role { font-weight: bold; margin-bottom: 2px; font-size: calc(6px + var(--font-boost)); opacity: 0.7; }
5124
+ .chat-msg-role { font-weight: bold; margin-bottom: 2px; font-size: var(--text-label); opacity: 0.7; }
5084
5125
  .chat-msg-text { white-space: pre-wrap; word-break: break-word; }
5085
5126
  .chat-msg-attachments {
5086
5127
  margin-top: 4px;
5087
5128
  display: flex;
5088
5129
  flex-wrap: wrap;
5089
- gap: 6px;
5130
+ gap: var(--sp-1);
5090
5131
  align-items: center;
5091
5132
  }
5092
5133
  .chat-msg-attachment {
5093
5134
  display: inline-flex;
5094
5135
  align-items: center;
5095
- gap: 4px;
5136
+ gap: var(--sp-1);
5096
5137
  padding: 2px 6px;
5097
5138
  border: 1px solid var(--border);
5098
5139
  color: var(--pixel-cyan);
5099
- font-size: calc(6px + var(--font-boost));
5140
+ font-size: var(--text-label);
5100
5141
  text-decoration: none;
5101
5142
  }
5102
5143
  .chat-msg-attachment-link:hover {
@@ -5115,7 +5156,7 @@ body.resize-dragging {
5115
5156
  border-color: var(--pixel-cyan);
5116
5157
  }
5117
5158
  .chat-panel-typing {
5118
- padding: 4px 8px;
5159
+ padding: var(--sp-1) var(--sp-2);
5119
5160
  display: flex;
5120
5161
  align-items: center;
5121
5162
  gap: 2px;
@@ -5123,7 +5164,7 @@ body.resize-dragging {
5123
5164
  }
5124
5165
  .chat-panel-typing-dot {
5125
5166
  display: inline-block;
5126
- font-size: calc(12px + var(--font-boost));
5167
+ font-size: var(--text-subheading);
5127
5168
  line-height: 1;
5128
5169
  opacity: 0.35;
5129
5170
  animation: chat-panel-dot-pulse 1.1s infinite ease-in-out;
@@ -5131,20 +5172,20 @@ body.resize-dragging {
5131
5172
  .chat-panel-typing-dot:nth-child(2) { animation-delay: 0.15s; }
5132
5173
  .chat-panel-typing-dot:nth-child(3) { animation-delay: 0.3s; }
5133
5174
  .chat-panel-input-row {
5134
- display: flex; gap: 4px; padding: 4px;
5175
+ display: flex; gap: var(--sp-1); padding: var(--sp-1);
5135
5176
  border-top: 1px solid var(--border);
5136
5177
  }
5137
5178
  .chat-panel-input {
5138
- flex: 1; font-size: calc(7px + var(--font-boost)); font-family: 'Press Start 2P', monospace; resize: none;
5179
+ flex: 1; font-size: var(--text-label); font-family: 'Press Start 2P', monospace; resize: none;
5139
5180
  background: var(--bg-dark); color: var(--pixel-white);
5140
- border: 1px solid var(--border); padding: 4px;
5181
+ border: 1px solid var(--border); padding: var(--sp-1);
5141
5182
  }
5142
5183
  .chat-panel-actions { display: flex; flex-direction: column; gap: 2px; }
5143
5184
  .chat-panel-send-btn {
5144
- font-size: calc(7px + var(--font-boost)); font-family: 'Press Start 2P', monospace; cursor: pointer;
5185
+ font-size: var(--text-label); font-family: 'Press Start 2P', monospace; cursor: pointer;
5145
5186
  background: var(--pixel-green); color: #000; border: none; padding: 2px 8px;
5146
5187
  }
5147
- .chat-panel-upload-label { cursor: pointer; font-size: calc(7px + var(--font-boost)); text-align: center; }
5188
+ .chat-panel-upload-label { cursor: pointer; font-size: var(--text-label); text-align: center; }
5148
5189
  .chat-panel-send-btn:disabled,
5149
5190
  .chat-panel-input:disabled {
5150
5191
  opacity: 0.5;
@@ -5164,7 +5205,7 @@ body.resize-dragging {
5164
5205
  display: inline-block;
5165
5206
  width: 4px;
5166
5207
  height: 4px;
5167
- border-radius: 50%;
5208
+ border-radius: var(--radius-full);
5168
5209
  background: var(--pixel-cyan);
5169
5210
  opacity: 0.35;
5170
5211
  animation: chat-panel-dot-pulse 1.1s infinite ease-in-out;
@@ -5186,8 +5227,8 @@ body.resize-dragging {
5186
5227
  .mode-toggle {
5187
5228
  display: flex;
5188
5229
  align-items: center;
5189
- gap: 4px;
5190
- font-size: calc(12px + var(--font-boost));
5230
+ gap: var(--sp-1);
5231
+ font-size: var(--text-subheading);
5191
5232
  color: #aaa;
5192
5233
  cursor: pointer;
5193
5234
  padding: 0 8px;
@@ -5195,26 +5236,26 @@ body.resize-dragging {
5195
5236
  .mode-toggle input { cursor: pointer; }
5196
5237
 
5197
5238
  /* ── Node execution log entries ──────────────────────────────────────────── */
5198
- .node-log-entry { padding: 3px 6px; border-bottom: 1px solid #1a1a2e; font-size: calc(11px + var(--font-boost)); }
5239
+ .node-log-entry { padding: 3px 6px; border-bottom: 1px solid #1a1a2e; font-size: var(--text-subheading); }
5199
5240
  .node-log-ts { color: #555; }
5200
5241
  .node-log-type { font-weight: bold; margin: 0 6px; }
5201
5242
  .node-log-content { white-space: pre-wrap; max-height: 150px; overflow-y: auto; margin: 2px 0; color: #ccc; }
5202
- .node-log-empty { color: #666; padding: 8px; }
5203
- .node-log-error { color: #f44; padding: 8px; }
5243
+ .node-log-empty { color: #666; padding: var(--sp-2); }
5244
+ .node-log-error { color: #f44; padding: var(--sp-2); }
5204
5245
 
5205
5246
  /* ── Meeting minutes panel ───────────────────────────────────────────────── */
5206
5247
  .meeting-minutes-list { max-height: 300px; overflow-y: auto; }
5207
5248
  .meeting-minute-card {
5208
- padding: 8px;
5249
+ padding: var(--sp-2);
5209
5250
  border-bottom: 1px solid var(--border);
5210
5251
  cursor: pointer;
5211
5252
  transition: background 0.15s;
5212
5253
  }
5213
5254
  .meeting-minute-card:hover { background: var(--bg-panel-alt); }
5214
5255
  .meeting-minute-topic { font-weight: bold; color: var(--pixel-white); }
5215
- .meeting-minute-meta { font-size: calc(9px + var(--font-boost)); color: var(--text-dim); margin-top: 2px; }
5216
- .meeting-minute-detail { padding: 8px; }
5217
- .meeting-minute-detail pre { white-space: pre-wrap; color: #ccc; font-size: calc(10px + var(--font-boost)); }
5256
+ .meeting-minute-meta { font-size: var(--text-body); color: var(--text-dim); margin-top: 2px; }
5257
+ .meeting-minute-detail { padding: var(--sp-2); }
5258
+ .meeting-minute-detail pre { white-space: pre-wrap; color: #ccc; font-size: var(--text-subheading); }
5218
5259
 
5219
5260
  /* ── Background Tasks Modal ── */
5220
5261
  .bg-tasks-modal-content {
@@ -5225,7 +5266,7 @@ body.resize-dragging {
5225
5266
  }
5226
5267
  .bg-tasks-slots {
5227
5268
  color: #555;
5228
- font-size: calc(9px + var(--font-boost));
5269
+ font-size: var(--text-body);
5229
5270
  font-family: var(--font-mono);
5230
5271
  margin-left: auto;
5231
5272
  margin-right: 12px;
@@ -5248,11 +5289,11 @@ body.resize-dragging {
5248
5289
  flex-direction: column;
5249
5290
  overflow: hidden;
5250
5291
  background: #0a0a0a;
5251
- padding: 8px;
5292
+ padding: var(--sp-2);
5252
5293
  }
5253
5294
  .bg-tasks-detail-empty {
5254
5295
  color: #555;
5255
- font-size: calc(11px + var(--font-boost));
5296
+ font-size: var(--text-subheading);
5256
5297
  font-family: var(--font-mono);
5257
5298
  display: flex;
5258
5299
  align-items: center;
@@ -5260,12 +5301,12 @@ body.resize-dragging {
5260
5301
  height: 100%;
5261
5302
  }
5262
5303
  .bg-task-item {
5263
- padding: 6px 8px;
5304
+ padding: var(--sp-1) var(--sp-2);
5264
5305
  border-left: 2px solid #333;
5265
5306
  margin: 2px 4px;
5266
5307
  cursor: pointer;
5267
5308
  font-family: var(--font-mono);
5268
- font-size: calc(10px + var(--font-boost));
5309
+ font-size: var(--text-subheading);
5269
5310
  transition: background 0.1s;
5270
5311
  }
5271
5312
  .bg-task-item:hover { background: #111; }
@@ -5274,13 +5315,13 @@ body.resize-dragging {
5274
5315
  .bg-task-item.status-completed { border-left-color: #555; opacity: 0.6; }
5275
5316
  .bg-task-item.status-failed { border-left-color: #ff4444; opacity: 0.6; }
5276
5317
  .bg-task-item.status-stopped { border-left-color: #aa4444; opacity: 0.6; }
5277
- .bg-task-item-status { font-size: calc(9px + var(--font-boost)); }
5318
+ .bg-task-item-status { font-size: var(--text-body); }
5278
5319
  .bg-task-item-cmd { color: #44aaff; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
5279
- .bg-task-item-port { color: #aa44ff; font-size: calc(9px + var(--font-boost)); }
5320
+ .bg-task-item-port { color: #aa44ff; font-size: var(--text-body); }
5280
5321
  .bg-tasks-detail-header { margin-bottom: 6px; }
5281
- .bg-tasks-detail-cmd { color: #44aaff; font-size: calc(11px + var(--font-boost)); font-weight: bold; font-family: var(--font-mono); word-break: break-all; }
5282
- .bg-tasks-detail-desc { color: #666; font-size: calc(10px + var(--font-boost)); font-family: var(--font-mono); margin: 4px 0; }
5283
- .bg-tasks-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: calc(9px + var(--font-boost)); font-family: var(--font-mono); margin-bottom: 8px; }
5322
+ .bg-tasks-detail-cmd { color: #44aaff; font-size: var(--text-subheading); font-weight: bold; font-family: var(--font-mono); word-break: break-all; }
5323
+ .bg-tasks-detail-desc { color: #666; font-size: var(--text-subheading); font-family: var(--font-mono); margin: 4px 0; }
5324
+ .bg-tasks-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--text-body); font-family: var(--font-mono); margin-bottom: 8px; }
5284
5325
  .bg-tasks-detail-output { flex: 1; min-height: 0; border: 1px solid #222; }
5285
5326
  .bg-tasks-detail-actions { margin-top: 6px; text-align: right; }
5286
5327
  .bg-tasks-stop-btn {
@@ -5288,7 +5329,7 @@ body.resize-dragging {
5288
5329
  border: 1px solid #ff4444;
5289
5330
  background: transparent;
5290
5331
  padding: 3px 12px;
5291
- font-size: calc(10px + var(--font-boost));
5332
+ font-size: var(--text-subheading);
5292
5333
  font-family: var(--font-mono);
5293
5334
  cursor: pointer;
5294
5335
  letter-spacing: 1px;
@@ -5312,7 +5353,7 @@ body.resize-dragging {
5312
5353
  display: flex;
5313
5354
  flex-direction: column;
5314
5355
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
5315
- font-size: calc(11px + var(--font-boost));
5356
+ font-size: var(--text-subheading);
5316
5357
  padding: 0;
5317
5358
  transition: width 0.15s, padding 0.15s, opacity 0.15s;
5318
5359
  }
@@ -5332,12 +5373,12 @@ body.resize-dragging {
5332
5373
  .ceo-section-header {
5333
5374
  padding: 4px 6px;
5334
5375
  color: #888;
5335
- font-size: calc(10px + var(--font-boost));
5376
+ font-size: var(--text-subheading);
5336
5377
  cursor: pointer;
5337
5378
  user-select: none;
5338
5379
  }
5339
5380
  .ceo-section-header:hover { color: #ccc; }
5340
- .ceo-section-arrow { font-size: calc(8px + var(--font-boost)); }
5381
+ .ceo-section-arrow { font-size: var(--text-body); }
5341
5382
 
5342
5383
  #ceo-oneonone-items.collapsed { display: none; }
5343
5384
 
@@ -5349,7 +5390,7 @@ body.resize-dragging {
5349
5390
  overflow: hidden;
5350
5391
  text-overflow: ellipsis;
5351
5392
  border-left: 2px solid transparent;
5352
- font-size: calc(10px + var(--font-boost));
5393
+ font-size: var(--text-subheading);
5353
5394
  }
5354
5395
  .ceo-oneonone-item:hover {
5355
5396
  background: #1a1a1a;
@@ -5378,7 +5419,7 @@ body.resize-dragging {
5378
5419
  background: #111;
5379
5420
  color: #555;
5380
5421
  cursor: pointer;
5381
- font-size: calc(10px + var(--font-boost));
5422
+ font-size: var(--text-subheading);
5382
5423
  border-right: 1px solid #222;
5383
5424
  }
5384
5425
  #ceo-list-toggle:hover { color: #aaa; background: #1a1a1a; }
@@ -5387,7 +5428,7 @@ body.resize-dragging {
5387
5428
  padding: 4px 6px;
5388
5429
  cursor: pointer;
5389
5430
  color: #4af;
5390
- font-size: calc(10px + var(--font-boost));
5431
+ font-size: var(--text-subheading);
5391
5432
  border-bottom: 1px solid #222;
5392
5433
  }
5393
5434
  .ceo-nav-btn:hover { background: #1a1a1a; }
@@ -5436,7 +5477,7 @@ body.resize-dragging {
5436
5477
  padding: 4px 6px;
5437
5478
  cursor: pointer;
5438
5479
  color: #44aaff;
5439
- font-size: calc(10px + var(--font-boost));
5480
+ font-size: var(--text-subheading);
5440
5481
  }
5441
5482
 
5442
5483
  .ceo-proj-action:hover {
@@ -5461,7 +5502,7 @@ body.resize-dragging {
5461
5502
 
5462
5503
  #ceo-conv-input-area {
5463
5504
  flex-shrink: 0;
5464
- padding: 4px;
5505
+ padding: var(--sp-1);
5465
5506
  border-top: 1px solid #333;
5466
5507
  background: #0a0a0a;
5467
5508
  }
@@ -5479,7 +5520,7 @@ body.resize-dragging {
5479
5520
  border: 1px solid #222;
5480
5521
  padding: 4px 6px;
5481
5522
  font-family: 'JetBrains Mono', monospace;
5482
- font-size: calc(11px + var(--font-boost));
5523
+ font-size: var(--text-subheading);
5483
5524
  resize: none;
5484
5525
  outline: none;
5485
5526
  }
@@ -5496,12 +5537,12 @@ body.resize-dragging {
5496
5537
  #ceo-slash-menu {
5497
5538
  background: #111;
5498
5539
  border: 1px solid #333;
5499
- border-radius: 3px;
5540
+ border-radius: var(--radius-sm);
5500
5541
  margin-bottom: 4px;
5501
5542
  max-height: 120px;
5502
5543
  overflow-y: auto;
5503
5544
  font-family: 'JetBrains Mono', monospace;
5504
- font-size: calc(11px + var(--font-boost));
5545
+ font-size: var(--text-subheading);
5505
5546
  }
5506
5547
  #ceo-slash-menu.hidden { display: none; }
5507
5548
 
@@ -5521,10 +5562,10 @@ body.resize-dragging {
5521
5562
  .ceo-conv-scroll {
5522
5563
  background: #0a0a0a;
5523
5564
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
5524
- font-size: calc(11px + var(--font-boost));
5565
+ font-size: var(--text-subheading);
5525
5566
  line-height: 1.6;
5526
5567
  color: #d4d4d4;
5527
- padding: 8px 12px;
5568
+ padding: var(--pad-button);
5528
5569
  }
5529
5570
  .ceo-conv-header {
5530
5571
  color: #22d3ee;
@@ -5568,11 +5609,11 @@ body.resize-dragging {
5568
5609
  .ceo-tool-call-header {
5569
5610
  display: flex;
5570
5611
  align-items: center;
5571
- gap: 6px;
5612
+ gap: var(--sp-1);
5572
5613
  color: #a1a1aa;
5573
- font-size: calc(10px + var(--font-boost));
5614
+ font-size: var(--text-subheading);
5574
5615
  }
5575
- .ceo-tool-icon { font-size: calc(11px + var(--font-boost)); }
5616
+ .ceo-tool-icon { font-size: var(--text-subheading); }
5576
5617
  .ceo-tool-name { color: #d4d4d4; font-weight: bold; }
5577
5618
  .ceo-tool-status { margin-left: auto; }
5578
5619
  .ceo-tool-call.running .ceo-tool-status { color: #f59e0b; }
@@ -5584,7 +5625,7 @@ body.resize-dragging {
5584
5625
  display: none;
5585
5626
  margin-top: 4px;
5586
5627
  padding: 4px 0;
5587
- font-size: calc(10px + var(--font-boost));
5628
+ font-size: var(--text-subheading);
5588
5629
  color: #a1a1aa;
5589
5630
  }
5590
5631
  .ceo-tool-call.expanded .ceo-tool-call-details { display: block; }
@@ -5601,10 +5642,10 @@ body.resize-dragging {
5601
5642
  .unread-badge {
5602
5643
  background: var(--pixel-red);
5603
5644
  color: #fff;
5604
- font-size: calc(6px + var(--font-boost));
5645
+ font-size: var(--text-label);
5605
5646
  font-family: 'Press Start 2P', monospace;
5606
5647
  padding: 1px 4px;
5607
- border-radius: 8px;
5648
+ border-radius: var(--radius-md);
5608
5649
  margin-left: 4px;
5609
5650
  min-width: 14px;
5610
5651
  text-align: center;
@@ -5626,7 +5667,7 @@ body.resize-dragging {
5626
5667
  left: 0;
5627
5668
  background: var(--bg-dark);
5628
5669
  border: 1px solid var(--border);
5629
- border-radius: 4px;
5670
+ border-radius: var(--radius-md);
5630
5671
  max-height: 180px;
5631
5672
  overflow-y: auto;
5632
5673
  z-index: var(--z-sticky);
@@ -5634,12 +5675,12 @@ body.resize-dragging {
5634
5675
  }
5635
5676
  .mention-dropdown.hidden { display: none; }
5636
5677
  .mention-item {
5637
- padding: 4px 8px;
5678
+ padding: var(--sp-1) var(--sp-2);
5638
5679
  cursor: pointer;
5639
5680
  display: flex;
5640
5681
  justify-content: space-between;
5641
5682
  align-items: center;
5642
- font-size: calc(8px + var(--font-boost));
5683
+ font-size: var(--text-body);
5643
5684
  font-family: 'Press Start 2P', monospace;
5644
5685
  }
5645
5686
  .mention-item:hover,
@@ -5652,7 +5693,7 @@ body.resize-dragging {
5652
5693
  .mention-item.active .mention-name { color: #000; }
5653
5694
  .mention-role {
5654
5695
  color: var(--text-dim);
5655
- font-size: calc(6px + var(--font-boost));
5696
+ font-size: var(--text-label);
5656
5697
  margin-left: 8px;
5657
5698
  }
5658
5699
 
@@ -5664,14 +5705,14 @@ body.resize-dragging {
5664
5705
  width: 8px;
5665
5706
  height: 8px;
5666
5707
  background: var(--pixel-red);
5667
- border-radius: 50%;
5708
+ border-radius: var(--radius-full);
5668
5709
  }
5669
5710
  .announcement-badge.hidden { display: none; }
5670
5711
  .announcement-item {
5671
5712
  background: var(--bg-dark);
5672
5713
  border: 1px solid var(--border);
5673
- border-radius: 4px;
5674
- padding: 8px;
5714
+ border-radius: var(--radius-md);
5715
+ padding: var(--sp-2);
5675
5716
  margin-bottom: 6px;
5676
5717
  position: relative;
5677
5718
  }
@@ -5679,22 +5720,22 @@ body.resize-dragging {
5679
5720
  .announcement-title {
5680
5721
  font-weight: bold;
5681
5722
  color: var(--pixel-white);
5682
- font-size: calc(11px + var(--font-boost));
5723
+ font-size: var(--text-subheading);
5683
5724
  margin-bottom: 4px;
5684
5725
  }
5685
5726
  .announcement-title a { color: var(--pixel-cyan); text-decoration: none; }
5686
5727
  .announcement-title a:hover { text-decoration: underline; }
5687
5728
  .announcement-body {
5688
5729
  color: #aaa;
5689
- font-size: calc(9px + var(--font-boost));
5730
+ font-size: var(--text-body);
5690
5731
  line-height: 1.5;
5691
5732
  word-break: break-word;
5692
5733
  }
5693
5734
  .announcement-body a { color: var(--pixel-cyan); }
5694
- .announcement-body img { max-width: 100%; border-radius: 4px; margin: 4px 0; }
5735
+ .announcement-body img { max-width: 100%; border-radius: var(--radius-md); margin: 4px 0; }
5695
5736
  .announcement-meta {
5696
5737
  color: #666;
5697
- font-size: calc(8px + var(--font-boost));
5738
+ font-size: var(--text-body);
5698
5739
  margin-top: 4px;
5699
5740
  }
5700
5741
  .announcement-dismiss {
@@ -5713,21 +5754,21 @@ body.resize-dragging {
5713
5754
  .ceo-completion-card {
5714
5755
  margin: 8px 0;
5715
5756
  border: 1px solid #22c55e;
5716
- border-radius: 6px;
5757
+ border-radius: var(--radius-md);
5717
5758
  background: #0a1a0f;
5718
5759
  padding: 10px 12px;
5719
5760
  }
5720
5761
  .completion-card-header {
5721
5762
  color: #4ade80;
5722
5763
  font-weight: bold;
5723
- font-size: calc(12px + var(--font-boost));
5764
+ font-size: var(--text-subheading);
5724
5765
  margin-bottom: 8px;
5725
5766
  padding-bottom: 6px;
5726
5767
  border-bottom: 1px solid #1a3a20;
5727
5768
  }
5728
5769
  .completion-card-body {
5729
5770
  color: #d4d4d4;
5730
- font-size: calc(10px + var(--font-boost));
5771
+ font-size: var(--text-subheading);
5731
5772
  line-height: 1.6;
5732
5773
  }
5733
5774
  .completion-card-body div {
@@ -5738,7 +5779,7 @@ body.resize-dragging {
5738
5779
  .ceo-msg-toggle {
5739
5780
  display: inline-block;
5740
5781
  color: var(--pixel-cyan);
5741
- font-size: calc(9px + var(--font-boost));
5782
+ font-size: var(--text-body);
5742
5783
  cursor: pointer;
5743
5784
  margin-top: 4px;
5744
5785
  user-select: none;
@@ -5756,9 +5797,9 @@ body.resize-dragging {
5756
5797
  color: var(--text-dim);
5757
5798
  border: 1px solid var(--border);
5758
5799
  font-family: var(--font-pixel);
5759
- font-size: calc(5.5px + var(--font-boost));
5800
+ font-size: var(--text-micro);
5760
5801
  padding: 3px 6px;
5761
- border-radius: 2px;
5802
+ border-radius: var(--radius-sm);
5762
5803
  cursor: pointer;
5763
5804
  }
5764
5805
 
@@ -5774,11 +5815,11 @@ body.resize-dragging {
5774
5815
  background: transparent;
5775
5816
  border: 1px solid var(--border);
5776
5817
  color: var(--pixel-cyan);
5777
- font-size: calc(10px + var(--font-boost));
5818
+ font-size: var(--text-subheading);
5778
5819
  cursor: pointer;
5779
5820
  padding: 0 6px;
5780
5821
  line-height: 1.2;
5781
- border-radius: 2px;
5822
+ border-radius: var(--radius-sm);
5782
5823
  font-family: var(--font-pixel);
5783
5824
  }
5784
5825
 
@@ -5790,7 +5831,7 @@ body.resize-dragging {
5790
5831
  /* KR Form Rows */
5791
5832
  .kr-form-row {
5792
5833
  display: flex;
5793
- gap: 4px;
5834
+ gap: var(--sp-1);
5794
5835
  margin-bottom: 4px;
5795
5836
  align-items: center;
5796
5837
  }
@@ -5804,7 +5845,7 @@ body.resize-dragging {
5804
5845
  border: none;
5805
5846
  color: #666;
5806
5847
  cursor: pointer;
5807
- font-size: calc(10px + var(--font-boost));
5848
+ font-size: var(--text-subheading);
5808
5849
  padding: 0 4px;
5809
5850
  }
5810
5851
 
@@ -5817,10 +5858,10 @@ body.resize-dragging {
5817
5858
  border: 1px solid var(--border);
5818
5859
  color: var(--text-dim);
5819
5860
  font-family: var(--font-pixel);
5820
- font-size: calc(5.5px + var(--font-boost));
5861
+ font-size: var(--text-micro);
5821
5862
  padding: 3px 8px;
5822
5863
  cursor: pointer;
5823
- border-radius: 2px;
5864
+ border-radius: var(--radius-sm);
5824
5865
  margin-top: 4px;
5825
5866
  }
5826
5867
 
@@ -5845,10 +5886,10 @@ body.resize-dragging {
5845
5886
  color: var(--bg-dark);
5846
5887
  border: none;
5847
5888
  font-family: var(--font-pixel);
5848
- font-size: calc(6px + var(--font-boost));
5889
+ font-size: var(--text-label);
5849
5890
  padding: 6px 16px;
5850
5891
  cursor: pointer;
5851
- border-radius: 2px;
5892
+ border-radius: var(--radius-sm);
5852
5893
  margin-top: 8px;
5853
5894
  width: 100%;
5854
5895
  }
@@ -5864,7 +5905,7 @@ body.resize-dragging {
5864
5905
  .form-label {
5865
5906
  display: block;
5866
5907
  color: var(--text-dim);
5867
- font-size: calc(5.5px + var(--font-boost));
5908
+ font-size: var(--text-micro);
5868
5909
  margin-bottom: 3px;
5869
5910
  }
5870
5911
 
@@ -5874,9 +5915,9 @@ body.resize-dragging {
5874
5915
  color: var(--pixel-white);
5875
5916
  border: 1px solid var(--border);
5876
5917
  font-family: var(--font-pixel);
5877
- font-size: calc(6px + var(--font-boost));
5878
- padding: 4px 8px;
5879
- border-radius: 2px;
5918
+ font-size: var(--text-label);
5919
+ padding: var(--sp-1) var(--sp-2);
5920
+ border-radius: var(--radius-sm);
5880
5921
  box-sizing: border-box;
5881
5922
  }
5882
5923
 
@@ -5910,7 +5951,7 @@ body.resize-dragging {
5910
5951
  }
5911
5952
 
5912
5953
  .product-detail-name {
5913
- font-size: calc(10px + var(--font-boost));
5954
+ font-size: var(--text-subheading);
5914
5955
  color: var(--pixel-white);
5915
5956
  margin: 0 0 4px 0;
5916
5957
  cursor: pointer;
@@ -5921,14 +5962,14 @@ body.resize-dragging {
5921
5962
  }
5922
5963
 
5923
5964
  .product-detail-meta {
5924
- font-size: calc(6px + var(--font-boost));
5965
+ font-size: var(--text-label);
5925
5966
  color: var(--text-dim);
5926
5967
  }
5927
5968
 
5928
5969
  .product-status-badge {
5929
5970
  padding: 1px 6px;
5930
- border-radius: 2px;
5931
- font-size: calc(5px + var(--font-boost));
5971
+ border-radius: var(--radius-sm);
5972
+ font-size: var(--text-micro);
5932
5973
  }
5933
5974
 
5934
5975
  .product-status-badge.status-active { background: rgba(0,255,136,0.15); color: var(--pixel-green); }
@@ -5937,12 +5978,12 @@ body.resize-dragging {
5937
5978
 
5938
5979
  .product-owner-indicator {
5939
5980
  color: var(--text-dim);
5940
- font-size: calc(5px + var(--font-boost));
5981
+ font-size: var(--text-micro);
5941
5982
  margin-left: 4px;
5942
5983
  }
5943
5984
 
5944
5985
  .product-section-label {
5945
- font-size: calc(6px + var(--font-boost));
5986
+ font-size: var(--text-label);
5946
5987
  color: var(--pixel-cyan);
5947
5988
  margin: 12px 0 4px 0;
5948
5989
  text-transform: uppercase;
@@ -5951,12 +5992,12 @@ body.resize-dragging {
5951
5992
 
5952
5993
  .product-detail-objective {
5953
5994
  color: var(--pixel-white);
5954
- font-size: calc(6.5px + var(--font-boost));
5995
+ font-size: var(--text-label);
5955
5996
  line-height: 1.6;
5956
5997
  cursor: pointer;
5957
- padding: 4px;
5998
+ padding: var(--sp-1);
5958
5999
  border: 1px solid transparent;
5959
- border-radius: 2px;
6000
+ border-radius: var(--radius-sm);
5960
6001
  }
5961
6002
 
5962
6003
  .product-detail-objective:hover {
@@ -5965,7 +6006,7 @@ body.resize-dragging {
5965
6006
 
5966
6007
  .product-detail-owner {
5967
6008
  color: var(--text-dim);
5968
- font-size: calc(6px + var(--font-boost));
6009
+ font-size: var(--text-label);
5969
6010
  }
5970
6011
 
5971
6012
  /* KR Detail Rows */
@@ -5976,9 +6017,9 @@ body.resize-dragging {
5976
6017
  .product-kr-detail-row {
5977
6018
  display: flex;
5978
6019
  align-items: center;
5979
- gap: 6px;
6020
+ gap: var(--sp-1);
5980
6021
  padding: 4px 0;
5981
- font-size: calc(6px + var(--font-boost));
6022
+ font-size: var(--text-label);
5982
6023
  color: var(--pixel-white);
5983
6024
  }
5984
6025
 
@@ -6013,7 +6054,7 @@ body.resize-dragging {
6013
6054
  font-family: var(--font-pixel);
6014
6055
  font-size: inherit;
6015
6056
  padding: 2px 4px;
6016
- border-radius: 2px;
6057
+ border-radius: var(--radius-sm);
6017
6058
  width: 100%;
6018
6059
  box-sizing: border-box;
6019
6060
  }
@@ -6029,7 +6070,7 @@ body.resize-dragging {
6029
6070
 
6030
6071
  .product-version-item {
6031
6072
  padding: 4px 0;
6032
- font-size: calc(6px + var(--font-boost));
6073
+ font-size: var(--text-label);
6033
6074
  border-bottom: 1px solid rgba(255,255,255,0.05);
6034
6075
  }
6035
6076
 
@@ -6050,7 +6091,7 @@ body.resize-dragging {
6050
6091
 
6051
6092
  .ver-changelog {
6052
6093
  color: var(--text-dim);
6053
- font-size: calc(5.5px + var(--font-boost));
6094
+ font-size: var(--text-micro);
6054
6095
  margin-top: 2px;
6055
6096
  padding-left: 12px;
6056
6097
  white-space: pre-line;
@@ -6059,7 +6100,7 @@ body.resize-dragging {
6059
6100
  /* Issues Tab */
6060
6101
  .product-issues-toolbar {
6061
6102
  display: flex;
6062
- gap: 6px;
6103
+ gap: var(--sp-1);
6063
6104
  align-items: center;
6064
6105
  margin-bottom: 8px;
6065
6106
  }
@@ -6075,7 +6116,7 @@ body.resize-dragging {
6075
6116
  border: 1px solid var(--border);
6076
6117
  border-left: 3px solid var(--pixel-white);
6077
6118
  padding: 0;
6078
- border-radius: 2px;
6119
+ border-radius: var(--radius-sm);
6079
6120
  }
6080
6121
 
6081
6122
  .product-issue-card.issue-closed {
@@ -6090,10 +6131,10 @@ body.resize-dragging {
6090
6131
  .issue-card-header {
6091
6132
  display: flex;
6092
6133
  align-items: center;
6093
- gap: 6px;
6094
- padding: 6px 8px;
6134
+ gap: var(--sp-1);
6135
+ padding: var(--sp-1) var(--sp-2);
6095
6136
  cursor: pointer;
6096
- font-size: calc(6px + var(--font-boost));
6137
+ font-size: var(--text-label);
6097
6138
  }
6098
6139
 
6099
6140
  .issue-card-header:hover {
@@ -6116,9 +6157,9 @@ body.resize-dragging {
6116
6157
  }
6117
6158
 
6118
6159
  .issue-card-status {
6119
- font-size: calc(5px + var(--font-boost));
6160
+ font-size: var(--text-micro);
6120
6161
  padding: 1px 4px;
6121
- border-radius: 2px;
6162
+ border-radius: var(--radius-sm);
6122
6163
  }
6123
6164
 
6124
6165
  .issue-card-status.status-backlog { color: var(--text-dim); }
@@ -6133,10 +6174,10 @@ body.resize-dragging {
6133
6174
  border: 1px solid var(--border);
6134
6175
  color: var(--text-dim);
6135
6176
  font-family: var(--font-pixel);
6136
- font-size: calc(5px + var(--font-boost));
6177
+ font-size: var(--text-micro);
6137
6178
  padding: 1px 6px;
6138
6179
  cursor: pointer;
6139
- border-radius: 2px;
6180
+ border-radius: var(--radius-sm);
6140
6181
  }
6141
6182
 
6142
6183
  .issue-action-btn:hover {
@@ -6155,7 +6196,7 @@ body.resize-dragging {
6155
6196
 
6156
6197
  .issue-card-desc {
6157
6198
  color: var(--pixel-white);
6158
- font-size: calc(6px + var(--font-boost));
6199
+ font-size: var(--text-label);
6159
6200
  line-height: 1.6;
6160
6201
  margin-bottom: 6px;
6161
6202
  cursor: pointer;
@@ -6167,7 +6208,7 @@ body.resize-dragging {
6167
6208
  }
6168
6209
 
6169
6210
  .issue-card-meta {
6170
- font-size: calc(5px + var(--font-boost));
6211
+ font-size: var(--text-micro);
6171
6212
  color: var(--text-dim);
6172
6213
  }
6173
6214
 
@@ -6176,17 +6217,17 @@ body.resize-dragging {
6176
6217
  background: rgba(0,255,255,0.1);
6177
6218
  color: var(--pixel-cyan);
6178
6219
  padding: 0 4px;
6179
- border-radius: 2px;
6220
+ border-radius: var(--radius-sm);
6180
6221
  margin-right: 3px;
6181
- font-size: calc(5px + var(--font-boost));
6222
+ font-size: var(--text-micro);
6182
6223
  }
6183
6224
 
6184
6225
  /* New Issue Inline Form */
6185
6226
  .issue-inline-add {
6186
- padding: 8px;
6227
+ padding: var(--sp-2);
6187
6228
  background: rgba(0,255,255,0.03);
6188
6229
  border: 1px solid var(--border);
6189
- border-radius: 2px;
6230
+ border-radius: var(--radius-sm);
6190
6231
  margin-bottom: 6px;
6191
6232
  }
6192
6233
 
@@ -6196,7 +6237,7 @@ body.resize-dragging {
6196
6237
 
6197
6238
  .issue-new-row {
6198
6239
  display: flex;
6199
- gap: 4px;
6240
+ gap: var(--sp-1);
6200
6241
  align-items: center;
6201
6242
  }
6202
6243
 
@@ -6206,7 +6247,7 @@ body.resize-dragging {
6206
6247
 
6207
6248
  .kanban-board {
6208
6249
  display: flex;
6209
- gap: 8px;
6250
+ gap: var(--sp-2);
6210
6251
  overflow-x: auto;
6211
6252
  padding: 4px 0;
6212
6253
  min-height: 200px;
@@ -6218,12 +6259,12 @@ body.resize-dragging {
6218
6259
  max-width: 200px;
6219
6260
  background: rgba(255,255,255,0.02);
6220
6261
  border: 1px solid var(--border);
6221
- border-radius: 2px;
6262
+ border-radius: var(--radius-sm);
6222
6263
  }
6223
6264
 
6224
6265
  .kanban-column-header {
6225
- padding: 6px 8px;
6226
- font-size: calc(6px + var(--font-boost));
6266
+ padding: var(--sp-1) var(--sp-2);
6267
+ font-size: var(--text-label);
6227
6268
  color: var(--pixel-cyan);
6228
6269
  border-bottom: 1px solid var(--border);
6229
6270
  text-align: center;
@@ -6231,7 +6272,7 @@ body.resize-dragging {
6231
6272
  }
6232
6273
 
6233
6274
  .kanban-card-list {
6234
- padding: 4px;
6275
+ padding: var(--sp-1);
6235
6276
  min-height: 40px;
6236
6277
  }
6237
6278
 
@@ -6244,11 +6285,11 @@ body.resize-dragging {
6244
6285
  background: rgba(0,0,0,0.3);
6245
6286
  border: 1px solid var(--border);
6246
6287
  border-left: 3px solid var(--text-dim);
6247
- border-radius: 2px;
6288
+ border-radius: var(--radius-sm);
6248
6289
  padding: 4px 6px;
6249
6290
  margin-bottom: 4px;
6250
6291
  cursor: grab;
6251
- font-size: calc(5px + var(--font-boost));
6292
+ font-size: var(--text-micro);
6252
6293
  transition: opacity 0.15s;
6253
6294
  }
6254
6295
 
@@ -6266,9 +6307,9 @@ body.resize-dragging {
6266
6307
  }
6267
6308
 
6268
6309
  .kanban-priority {
6269
- font-size: calc(4px + var(--font-boost));
6310
+ font-size: var(--text-micro);
6270
6311
  padding: 0 3px;
6271
- border-radius: 1px;
6312
+ border-radius: var(--radius-sm);
6272
6313
  margin-right: 4px;
6273
6314
  }
6274
6315
 
@@ -6279,21 +6320,21 @@ body.resize-dragging {
6279
6320
 
6280
6321
  .kanban-card-meta {
6281
6322
  color: var(--text-dim);
6282
- font-size: calc(4px + var(--font-boost));
6323
+ font-size: var(--text-micro);
6283
6324
  margin-top: 3px;
6284
6325
  display: flex;
6285
- gap: 4px;
6326
+ gap: var(--sp-1);
6286
6327
  align-items: center;
6287
6328
  }
6288
6329
 
6289
6330
  .kanban-sp {
6290
6331
  background: rgba(255,255,255,0.08);
6291
6332
  padding: 0 3px;
6292
- border-radius: 1px;
6333
+ border-radius: var(--radius-sm);
6293
6334
  }
6294
6335
 
6295
6336
  .kanban-blocked-icon {
6296
- font-size: calc(5px + var(--font-boost));
6337
+ font-size: var(--text-micro);
6297
6338
  }
6298
6339
 
6299
6340
  /* ================================================================
@@ -6306,7 +6347,7 @@ body.resize-dragging {
6306
6347
 
6307
6348
  .roadmap-section h3 {
6308
6349
  color: var(--pixel-cyan);
6309
- font-size: calc(7px + var(--font-boost));
6350
+ font-size: var(--text-label);
6310
6351
  margin: 0 0 8px 0;
6311
6352
  border-bottom: 1px solid var(--border);
6312
6353
  padding-bottom: 4px;
@@ -6315,15 +6356,15 @@ body.resize-dragging {
6315
6356
  .roadmap-timeline {
6316
6357
  display: flex;
6317
6358
  flex-direction: column;
6318
- gap: 6px;
6359
+ gap: var(--sp-1);
6319
6360
  }
6320
6361
 
6321
6362
  .roadmap-sprint-bar {
6322
6363
  background: rgba(0,255,255,0.05);
6323
6364
  border: 1px solid var(--border);
6324
6365
  border-left: 3px solid var(--pixel-cyan);
6325
- border-radius: 2px;
6326
- padding: 6px 8px;
6366
+ border-radius: var(--radius-sm);
6367
+ padding: var(--sp-1) var(--sp-2);
6327
6368
  }
6328
6369
 
6329
6370
  .roadmap-sprint-bar.roadmap-status-active {
@@ -6338,21 +6379,21 @@ body.resize-dragging {
6338
6379
 
6339
6380
  .roadmap-bar-label {
6340
6381
  color: var(--pixel-white);
6341
- font-size: calc(6px + var(--font-boost));
6382
+ font-size: var(--text-label);
6342
6383
  font-weight: bold;
6343
6384
  }
6344
6385
 
6345
6386
  .roadmap-bar-dates {
6346
6387
  color: var(--text-dim);
6347
- font-size: calc(5px + var(--font-boost));
6388
+ font-size: var(--text-micro);
6348
6389
  margin-top: 2px;
6349
6390
  }
6350
6391
 
6351
6392
  .roadmap-status-badge {
6352
6393
  display: inline-block;
6353
- font-size: calc(4px + var(--font-boost));
6394
+ font-size: var(--text-micro);
6354
6395
  padding: 0 4px;
6355
- border-radius: 2px;
6396
+ border-radius: var(--radius-sm);
6356
6397
  margin-top: 3px;
6357
6398
  color: var(--pixel-cyan);
6358
6399
  border: 1px solid var(--border);
@@ -6363,7 +6404,7 @@ body.resize-dragging {
6363
6404
 
6364
6405
  .roadmap-goal {
6365
6406
  color: var(--text-dim);
6366
- font-size: calc(5px + var(--font-boost));
6407
+ font-size: var(--text-micro);
6367
6408
  font-style: italic;
6368
6409
  margin-top: 2px;
6369
6410
  }
@@ -6374,7 +6415,7 @@ body.resize-dragging {
6374
6415
  gap: 10px;
6375
6416
  padding: 4px 0;
6376
6417
  border-bottom: 1px solid rgba(255,255,255,0.03);
6377
- font-size: calc(6px + var(--font-boost));
6418
+ font-size: var(--text-label);
6378
6419
  }
6379
6420
 
6380
6421
  .roadmap-version-tag {
@@ -6398,14 +6439,14 @@ body.resize-dragging {
6398
6439
 
6399
6440
  .roadmap-milestone-header {
6400
6441
  color: var(--pixel-yellow);
6401
- font-size: calc(6px + var(--font-boost));
6442
+ font-size: var(--text-label);
6402
6443
  font-weight: bold;
6403
6444
  margin-bottom: 4px;
6404
6445
  }
6405
6446
 
6406
6447
  .roadmap-issue-row {
6407
6448
  padding: 2px 8px;
6408
- font-size: calc(5px + var(--font-boost));
6449
+ font-size: var(--text-micro);
6409
6450
  color: var(--pixel-white);
6410
6451
  border-left: 2px solid var(--text-dim);
6411
6452
  margin-left: 8px;
@@ -6421,7 +6462,7 @@ body.resize-dragging {
6421
6462
 
6422
6463
  .roadmap-issue-status {
6423
6464
  color: var(--text-dim);
6424
- font-size: calc(4px + var(--font-boost));
6465
+ font-size: var(--text-micro);
6425
6466
  margin-left: 6px;
6426
6467
  }
6427
6468
 
@@ -6437,13 +6478,13 @@ body.resize-dragging {
6437
6478
 
6438
6479
  .activity-item {
6439
6480
  display: flex;
6440
- gap: 8px;
6441
- padding: 6px 8px;
6481
+ gap: var(--sp-2);
6482
+ padding: var(--sp-1) var(--sp-2);
6442
6483
  border-bottom: 1px solid rgba(255,255,255,0.03);
6443
6484
  }
6444
6485
 
6445
6486
  .activity-icon {
6446
- font-size: calc(7px + var(--font-boost));
6487
+ font-size: var(--text-label);
6447
6488
  flex-shrink: 0;
6448
6489
  width: 20px;
6449
6490
  text-align: center;
@@ -6456,32 +6497,32 @@ body.resize-dragging {
6456
6497
 
6457
6498
  .activity-header {
6458
6499
  display: flex;
6459
- gap: 8px;
6500
+ gap: var(--sp-2);
6460
6501
  align-items: center;
6461
6502
  }
6462
6503
 
6463
6504
  .activity-type {
6464
6505
  color: var(--pixel-cyan);
6465
- font-size: calc(5px + var(--font-boost));
6506
+ font-size: var(--text-micro);
6466
6507
  font-weight: bold;
6467
6508
  text-transform: capitalize;
6468
6509
  }
6469
6510
 
6470
6511
  .activity-actor {
6471
6512
  color: var(--text-dim);
6472
- font-size: calc(4px + var(--font-boost));
6513
+ font-size: var(--text-micro);
6473
6514
  }
6474
6515
 
6475
6516
  .activity-detail {
6476
6517
  color: var(--pixel-white);
6477
- font-size: calc(5px + var(--font-boost));
6518
+ font-size: var(--text-micro);
6478
6519
  margin-top: 1px;
6479
6520
  word-break: break-word;
6480
6521
  }
6481
6522
 
6482
6523
  .activity-ts {
6483
6524
  color: var(--text-dim);
6484
- font-size: calc(4px + var(--font-boost));
6525
+ font-size: var(--text-micro);
6485
6526
  margin-top: 1px;
6486
6527
  }
6487
6528
 
@@ -6492,7 +6533,7 @@ body.resize-dragging {
6492
6533
  border: none;
6493
6534
  color: var(--text-dim);
6494
6535
  cursor: pointer;
6495
- font-size: calc(8px + var(--font-boost));
6536
+ font-size: var(--text-body);
6496
6537
  padding: 0 4px;
6497
6538
  }
6498
6539
 
@@ -6502,7 +6543,7 @@ body.resize-dragging {
6502
6543
 
6503
6544
  /* Inline select dropdowns in product detail */
6504
6545
  .issue-priority-select {
6505
- font-size: calc(6px + var(--font-boost));
6546
+ font-size: var(--text-label);
6506
6547
  padding: 1px 4px;
6507
6548
  min-width: 40px;
6508
6549
  font-weight: bold;
@@ -6535,7 +6576,7 @@ body.resize-dragging {
6535
6576
 
6536
6577
  .issue-history-label {
6537
6578
  color: var(--text-dim);
6538
- font-size: calc(5px + var(--font-boost));
6579
+ font-size: var(--text-micro);
6539
6580
  margin-bottom: 2px;
6540
6581
  text-transform: uppercase;
6541
6582
  letter-spacing: 1px;
@@ -6543,21 +6584,21 @@ body.resize-dragging {
6543
6584
 
6544
6585
  .issue-history-entry {
6545
6586
  color: var(--text-dim);
6546
- font-size: calc(5px + var(--font-boost));
6587
+ font-size: var(--text-micro);
6547
6588
  padding: 1px 0;
6548
6589
  }
6549
6590
 
6550
6591
  .issue-story-points {
6551
- font-size: calc(5px + var(--font-boost));
6592
+ font-size: var(--text-micro);
6552
6593
  color: var(--pixel-cyan);
6553
6594
  background: rgba(0,255,255,0.1);
6554
6595
  padding: 0 4px;
6555
- border-radius: 2px;
6596
+ border-radius: var(--radius-sm);
6556
6597
  }
6557
6598
 
6558
6599
  .product-planning-indicator {
6559
6600
  color: var(--pixel-yellow);
6560
- font-size: calc(5px + var(--font-boost));
6601
+ font-size: var(--text-micro);
6561
6602
  margin-left: 6px;
6562
6603
  animation: pulse 2s ease-in-out infinite;
6563
6604
  }
@@ -6578,7 +6619,7 @@ body.resize-dragging {
6578
6619
  z-index: var(--z-critical);
6579
6620
  display: flex;
6580
6621
  flex-direction: column;
6581
- gap: 6px;
6622
+ gap: var(--sp-1);
6582
6623
  pointer-events: none;
6583
6624
  }
6584
6625
 
@@ -6586,10 +6627,10 @@ body.resize-dragging {
6586
6627
  background: var(--bg-panel);
6587
6628
  border: 1px solid var(--border);
6588
6629
  border-left: 3px solid var(--pixel-cyan);
6589
- border-radius: 2px;
6590
- padding: 8px 12px;
6630
+ border-radius: var(--radius-sm);
6631
+ padding: var(--pad-button);
6591
6632
  font-family: var(--font-pixel);
6592
- font-size: calc(6px + var(--font-boost));
6633
+ font-size: var(--text-label);
6593
6634
  color: var(--pixel-white);
6594
6635
  max-width: 320px;
6595
6636
  pointer-events: auto;
@@ -6636,13 +6677,13 @@ body.resize-dragging {
6636
6677
  .issue-links-header {
6637
6678
  display: flex;
6638
6679
  align-items: center;
6639
- gap: 6px;
6680
+ gap: var(--sp-1);
6640
6681
  margin-bottom: 4px;
6641
6682
  }
6642
6683
 
6643
6684
  .issue-links-title {
6644
6685
  color: var(--pixel-cyan);
6645
- font-size: calc(5px + var(--font-boost));
6686
+ font-size: var(--text-micro);
6646
6687
  font-weight: bold;
6647
6688
  }
6648
6689
 
@@ -6655,10 +6696,10 @@ body.resize-dragging {
6655
6696
  .issue-link-row {
6656
6697
  display: flex;
6657
6698
  align-items: center;
6658
- gap: 6px;
6699
+ gap: var(--sp-1);
6659
6700
  padding: 2px 4px;
6660
- font-size: calc(5px + var(--font-boost));
6661
- border-radius: 2px;
6701
+ font-size: var(--text-micro);
6702
+ border-radius: var(--radius-sm);
6662
6703
  }
6663
6704
 
6664
6705
  .issue-link-row:hover {
@@ -6668,7 +6709,7 @@ body.resize-dragging {
6668
6709
  .issue-link-type {
6669
6710
  color: var(--text-dim);
6670
6711
  min-width: 70px;
6671
- font-size: calc(4px + var(--font-boost));
6712
+ font-size: var(--text-micro);
6672
6713
  }
6673
6714
 
6674
6715
  .issue-link-target {
@@ -6681,7 +6722,7 @@ body.resize-dragging {
6681
6722
  border: none;
6682
6723
  color: var(--text-dim);
6683
6724
  cursor: pointer;
6684
- font-size: calc(6px + var(--font-boost));
6725
+ font-size: var(--text-label);
6685
6726
  padding: 0 2px;
6686
6727
  font-family: var(--font-pixel);
6687
6728
  }
@@ -6692,14 +6733,14 @@ body.resize-dragging {
6692
6733
 
6693
6734
  .issue-link-add-row {
6694
6735
  display: flex;
6695
- gap: 4px;
6736
+ gap: var(--sp-1);
6696
6737
  align-items: center;
6697
6738
  margin-top: 4px;
6698
6739
  }
6699
6740
 
6700
6741
  .issue-link-add-row select,
6701
6742
  .issue-link-add-row input {
6702
- font-size: calc(5px + var(--font-boost));
6743
+ font-size: var(--text-micro);
6703
6744
  }
6704
6745
 
6705
6746
  /* ================================================================
@@ -6707,10 +6748,10 @@ body.resize-dragging {
6707
6748
  ================================================================ */
6708
6749
 
6709
6750
  .sprint-inline-add {
6710
- padding: 8px;
6751
+ padding: var(--sp-2);
6711
6752
  background: rgba(0,255,255,0.03);
6712
6753
  border: 1px solid var(--border);
6713
- border-radius: 2px;
6754
+ border-radius: var(--radius-sm);
6714
6755
  margin-bottom: 8px;
6715
6756
  }
6716
6757
 
@@ -6720,13 +6761,13 @@ body.resize-dragging {
6720
6761
 
6721
6762
  .sprint-form-row {
6722
6763
  display: flex;
6723
- gap: 4px;
6764
+ gap: var(--sp-1);
6724
6765
  align-items: center;
6725
6766
  }
6726
6767
 
6727
6768
  .sprint-actions {
6728
6769
  display: flex;
6729
- gap: 4px;
6770
+ gap: var(--sp-1);
6730
6771
  margin-top: 4px;
6731
6772
  }
6732
6773
 
@@ -6735,10 +6776,10 @@ body.resize-dragging {
6735
6776
  border: 1px solid var(--border);
6736
6777
  color: var(--text-dim);
6737
6778
  font-family: var(--font-pixel);
6738
- font-size: calc(5px + var(--font-boost));
6779
+ font-size: var(--text-micro);
6739
6780
  padding: 1px 6px;
6740
6781
  cursor: pointer;
6741
- border-radius: 2px;
6782
+ border-radius: var(--radius-sm);
6742
6783
  }
6743
6784
 
6744
6785
  .sprint-action-btn:hover {
@@ -6760,9 +6801,9 @@ body.resize-dragging {
6760
6801
  border: 1px solid var(--border);
6761
6802
  color: var(--pixel-white);
6762
6803
  font-family: var(--font-pixel);
6763
- font-size: calc(5px + var(--font-boost));
6804
+ font-size: var(--text-micro);
6764
6805
  padding: 2px 6px;
6765
- border-radius: 2px;
6806
+ border-radius: var(--radius-sm);
6766
6807
  width: 120px;
6767
6808
  }
6768
6809
 
@@ -6803,10 +6844,10 @@ body.resize-dragging {
6803
6844
  border: 1px solid var(--border);
6804
6845
  color: var(--text-dim);
6805
6846
  font-family: var(--font-pixel);
6806
- font-size: calc(5px + var(--font-boost));
6847
+ font-size: var(--text-micro);
6807
6848
  padding: 1px 6px;
6808
6849
  cursor: pointer;
6809
- border-radius: 2px;
6850
+ border-radius: var(--radius-sm);
6810
6851
  }
6811
6852
 
6812
6853
  .issue-delete-btn:hover {
@@ -6818,8 +6859,8 @@ body.resize-dragging {
6818
6859
  .review-card {
6819
6860
  background: rgba(0,255,255,0.03);
6820
6861
  border: 1px solid rgba(0,255,255,0.1);
6821
- border-radius: 4px;
6822
- padding: 8px 10px;
6862
+ border-radius: var(--radius-md);
6863
+ padding: var(--sp-2) var(--pad-component);
6823
6864
  margin-bottom: 6px;
6824
6865
  }
6825
6866
  .review-card.review-completed {
@@ -6828,16 +6869,16 @@ body.resize-dragging {
6828
6869
  }
6829
6870
  .review-card-header {
6830
6871
  display: flex;
6831
- gap: 8px;
6872
+ gap: var(--sp-2);
6832
6873
  align-items: center;
6833
6874
  margin-bottom: 6px;
6834
- font-size: calc(5px + var(--font-boost));
6875
+ font-size: var(--text-micro);
6835
6876
  }
6836
6877
  .review-trigger {
6837
6878
  color: var(--accent);
6838
6879
  font-weight: bold;
6839
6880
  text-transform: uppercase;
6840
- font-size: calc(5px + var(--font-boost));
6881
+ font-size: var(--text-micro);
6841
6882
  }
6842
6883
  .review-date { color: var(--text-dim); }
6843
6884
  .review-owner { color: var(--text-dim); }
@@ -6845,9 +6886,9 @@ body.resize-dragging {
6845
6886
  .review-item-row {
6846
6887
  display: flex;
6847
6888
  align-items: center;
6848
- gap: 6px;
6889
+ gap: var(--sp-1);
6849
6890
  padding: 2px 0;
6850
- font-size: calc(6px + var(--font-boost));
6891
+ font-size: var(--text-label);
6851
6892
  }
6852
6893
  .review-item-row input[type="checkbox"] {
6853
6894
  width: 14px;
@@ -6905,7 +6946,7 @@ body.resize-dragging {
6905
6946
  }
6906
6947
  #status-bar {
6907
6948
  flex-wrap: wrap;
6908
- gap: 4px;
6949
+ gap: var(--sp-1);
6909
6950
  }
6910
6951
  .floating-panel {
6911
6952
  position: fixed !important;
@@ -6915,7 +6956,7 @@ body.resize-dragging {
6915
6956
  bottom: 0 !important;
6916
6957
  width: 100% !important;
6917
6958
  max-height: 60vh;
6918
- border-radius: 8px 8px 0 0;
6959
+ border-radius: var(--radius-md) var(--radius-md) 0 0;
6919
6960
  }
6920
6961
  #ceo-split {
6921
6962
  flex-direction: column;