@rhavenside/baseline-ui 1.0.21 → 1.0.23

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.
package/dist/baseline.css CHANGED
@@ -96,15 +96,15 @@
96
96
 
97
97
  :root {
98
98
  --border-width-none: 0;
99
- --border-width-thin: 1px;
100
- --border-width-base: 2px;
101
- --border-width-thick: 4px;
99
+ --border-width-thin: 0.0625rem;
100
+ --border-width-base: 0.125rem;
101
+ --border-width-thick: 0.25rem;
102
102
  --border-radius-none: 0;
103
- --border-radius-sm: 2px;
104
- --border-radius-md: 4px;
105
- --border-radius-lg: 4px;
106
- --border-radius-xl: 4px;
107
- --border-radius-2xl: 4px;
103
+ --border-radius-sm: 0.125rem;
104
+ --border-radius-md: 0.25rem;
105
+ --border-radius-lg: 0.25rem;
106
+ --border-radius-xl: 0.25rem;
107
+ --border-radius-2xl: 0.25rem;
108
108
  --border-radius-full: 9999px;
109
109
  }
110
110
 
@@ -154,8 +154,8 @@
154
154
  --form-input-padding-y-sm: 0.25rem;
155
155
  --form-input-padding-x-lg: 1.5rem;
156
156
  --form-input-padding-y-lg: 1rem;
157
- --form-input-border-width: 1px;
158
- --form-input-border-radius: 4px;
157
+ --form-input-border-width: 0.0625rem;
158
+ --form-input-border-radius: 0.25rem;
159
159
  --form-input-font-size: 1rem;
160
160
  --form-input-font-size-sm: 0.875rem;
161
161
  --form-input-font-size-lg: 1.125rem;
@@ -212,19 +212,19 @@
212
212
  --glass-bg-medium: rgba(255, 255, 255, 0.08);
213
213
  --glass-bg-heavy: rgba(255, 255, 255, 0.12);
214
214
  --glass-bg-etched: rgba(255, 255, 255, 0.15);
215
- --glass-blur-sm: 2px;
216
- --glass-blur-md: 4px;
217
- --glass-blur-lg: 6px;
218
- --glass-blur-xl: 8px;
215
+ --glass-blur-sm: 0.125rem;
216
+ --glass-blur-md: 0.25rem;
217
+ --glass-blur-lg: 0.375rem;
218
+ --glass-blur-xl: 0.5rem;
219
219
  --glass-border-light: rgba(255, 255, 255, 0.1);
220
220
  --glass-border-medium: rgba(255, 255, 255, 0.15);
221
221
  --glass-border-heavy: rgba(255, 255, 255, 0.2);
222
- --glass-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
223
- --glass-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
224
- --glass-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);
222
+ --glass-shadow-sm: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.1);
223
+ --glass-shadow-md: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
224
+ --glass-shadow-lg: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
225
225
  --tech-border-radius-none: 0;
226
- --tech-border-radius-sm: 2px;
227
- --tech-border-radius-md: 4px;
226
+ --tech-border-radius-sm: 0.125rem;
227
+ --tech-border-radius-md: 0.25rem;
228
228
  }
229
229
 
230
230
  *,
@@ -482,8 +482,8 @@ a:hover {
482
482
  color: var(--color-accent-light);
483
483
  }
484
484
  a:focus {
485
- outline: 1px solid var(--color-border-focus);
486
- outline-offset: 2px;
485
+ outline: 0.0625rem solid var(--color-border-focus);
486
+ outline-offset: 0.125rem;
487
487
  }
488
488
 
489
489
  ul, ol {
@@ -500,7 +500,7 @@ img {
500
500
 
501
501
  hr {
502
502
  border: 0;
503
- border-top: 1px solid var(--color-border);
503
+ border-top: 0.0625rem solid var(--color-border);
504
504
  margin: var(--spacing-lg) 0;
505
505
  }
506
506
 
@@ -510,7 +510,7 @@ code {
510
510
  background: var(--glass-bg-light);
511
511
  backdrop-filter: blur(var(--glass-blur-sm));
512
512
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
513
- border: 1px solid var(--glass-border-light);
513
+ border: 0.0625rem solid var(--glass-border-light);
514
514
  padding: 0.125em 0.25em;
515
515
  border-radius: var(--tech-border-radius-sm);
516
516
  color: var(--color-text);
@@ -522,7 +522,7 @@ pre {
522
522
  background: var(--glass-bg-medium);
523
523
  backdrop-filter: blur(var(--glass-blur-md));
524
524
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
525
- border: 1px solid var(--glass-border-medium);
525
+ border: 0.0625rem solid var(--glass-border-medium);
526
526
  padding: var(--spacing-md);
527
527
  border-radius: var(--tech-border-radius-md);
528
528
  overflow-x: auto;
@@ -590,27 +590,27 @@ textarea {
590
590
  }
591
591
  @media (min-width: 640px) {
592
592
  .bl-container {
593
- max-width: 640px;
593
+ max-width: 40rem;
594
594
  }
595
595
  }
596
596
  @media (min-width: 768px) {
597
597
  .bl-container {
598
- max-width: 768px;
598
+ max-width: 48rem;
599
599
  }
600
600
  }
601
601
  @media (min-width: 1024px) {
602
602
  .bl-container {
603
- max-width: 1024px;
603
+ max-width: 64rem;
604
604
  }
605
605
  }
606
606
  @media (min-width: 1280px) {
607
607
  .bl-container {
608
- max-width: 1280px;
608
+ max-width: 80rem;
609
609
  }
610
610
  }
611
611
  @media (min-width: 1536px) {
612
612
  .bl-container {
613
- max-width: 1536px;
613
+ max-width: 96rem;
614
614
  }
615
615
  }
616
616
 
@@ -2761,10 +2761,10 @@ textarea {
2761
2761
 
2762
2762
  .bl-sr-only {
2763
2763
  position: absolute;
2764
- width: 1px;
2765
- height: 1px;
2764
+ width: 0.0625rem;
2765
+ height: 0.0625rem;
2766
2766
  padding: 0;
2767
- margin: -1px;
2767
+ margin: -0.0625rem;
2768
2768
  overflow: hidden;
2769
2769
  clip: rect(0, 0, 0, 0);
2770
2770
  white-space: nowrap;
@@ -2784,7 +2784,7 @@ textarea {
2784
2784
 
2785
2785
  .bl-skip-link {
2786
2786
  position: absolute;
2787
- top: -40px;
2787
+ top: -2.5rem;
2788
2788
  left: 0;
2789
2789
  z-index: var(--z-index-tooltip);
2790
2790
  padding: var(--spacing-sm) var(--spacing-md);
@@ -2795,8 +2795,8 @@ textarea {
2795
2795
  }
2796
2796
  .bl-skip-link:focus {
2797
2797
  top: var(--spacing-sm);
2798
- outline: 2px solid var(--color-border-focus);
2799
- outline-offset: 2px;
2798
+ outline: 0.125rem solid var(--color-border-focus);
2799
+ outline-offset: 0.125rem;
2800
2800
  }
2801
2801
 
2802
2802
  .bl-focus-visible:focus-visible {
@@ -2809,7 +2809,7 @@ textarea {
2809
2809
  border-color: currentColor !important;
2810
2810
  }
2811
2811
  .bl-skip-link {
2812
- border: 2px solid currentColor;
2812
+ border: 0.125rem solid currentColor;
2813
2813
  }
2814
2814
  }
2815
2815
  @media (prefers-reduced-motion: reduce) {
@@ -2837,7 +2837,7 @@ textarea {
2837
2837
  vertical-align: middle;
2838
2838
  cursor: pointer;
2839
2839
  user-select: none;
2840
- border: 1px solid var(--glass-border-medium);
2840
+ border: 0.0625rem solid var(--glass-border-medium);
2841
2841
  border-radius: var(--tech-border-radius-sm);
2842
2842
  background: var(--glass-bg-medium);
2843
2843
  backdrop-filter: blur(var(--glass-blur-md));
@@ -2846,8 +2846,8 @@ textarea {
2846
2846
  color: var(--color-text);
2847
2847
  }
2848
2848
  .bl-btn:focus {
2849
- outline: 1px solid var(--color-border-focus);
2850
- outline-offset: 2px;
2849
+ outline: 0.0625rem solid var(--color-border-focus);
2850
+ outline-offset: 0.125rem;
2851
2851
  }
2852
2852
  .bl-btn:disabled, .bl-btn.bl-disabled {
2853
2853
  opacity: 0.6;
@@ -2875,8 +2875,8 @@ textarea {
2875
2875
  border-color: var(--color-accent-dark);
2876
2876
  }
2877
2877
  .bl-btn-primary:active:not(:disabled):not(.bl-disabled) {
2878
- transform: translateY(1px);
2879
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
2878
+ transform: translateY(0.0625rem);
2879
+ box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
2880
2880
  }
2881
2881
 
2882
2882
  .bl-btn-secondary {
@@ -3034,7 +3034,7 @@ textarea {
3034
3034
  line-height: var(--form-input-line-height);
3035
3035
  color: var(--color-text);
3036
3036
  background: var(--glass-bg-light);
3037
- border: 1px solid var(--glass-border-medium);
3037
+ border: 0.0625rem solid var(--glass-border-medium);
3038
3038
  border-radius: var(--tech-border-radius-sm);
3039
3039
  backdrop-filter: blur(var(--glass-blur-md));
3040
3040
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
@@ -3049,7 +3049,7 @@ textarea {
3049
3049
  .bl-input:focus,
3050
3050
  .bl-textarea:focus {
3051
3051
  outline: none;
3052
- border-width: 2px;
3052
+ border-width: 0.125rem;
3053
3053
  border-color: var(--color-accent);
3054
3054
  background: var(--glass-bg-medium);
3055
3055
  }
@@ -3070,7 +3070,7 @@ textarea {
3070
3070
  line-height: var(--form-input-line-height);
3071
3071
  color: var(--color-text);
3072
3072
  background: var(--glass-bg-medium);
3073
- border: 1px solid var(--glass-border-medium);
3073
+ border: 0.0625rem solid var(--glass-border-medium);
3074
3074
  border-radius: var(--tech-border-radius-md);
3075
3075
  backdrop-filter: blur(var(--glass-blur-lg));
3076
3076
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
@@ -3090,7 +3090,7 @@ textarea {
3090
3090
  border-width: 2px;
3091
3091
  border-color: var(--color-accent);
3092
3092
  background-color: var(--glass-bg-medium);
3093
- box-shadow: var(--glass-shadow-md), 0 0 0 1px var(--color-accent);
3093
+ box-shadow: var(--glass-shadow-md), 0 0 0 0.0625rem var(--color-accent);
3094
3094
  }
3095
3095
  .bl-select:hover {
3096
3096
  background-color: var(--glass-bg-heavy);
@@ -3122,7 +3122,7 @@ textarea {
3122
3122
  line-height: var(--form-input-line-height);
3123
3123
  color: var(--color-text);
3124
3124
  background: var(--glass-bg-medium);
3125
- border: 1px solid var(--glass-border-medium);
3125
+ border: 0.0625rem solid var(--glass-border-medium);
3126
3126
  border-radius: var(--tech-border-radius-md);
3127
3127
  backdrop-filter: blur(var(--glass-blur-lg));
3128
3128
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
@@ -3147,7 +3147,7 @@ textarea {
3147
3147
  outline: none;
3148
3148
  border-width: 2px;
3149
3149
  border-color: var(--color-accent);
3150
- box-shadow: var(--glass-shadow-md), 0 0 0 1px var(--color-accent);
3150
+ box-shadow: var(--glass-shadow-md), 0 0 0 0.0625rem var(--color-accent);
3151
3151
  }
3152
3152
  .bl-select-dropdown .bl-select-toggle:hover {
3153
3153
  background-color: var(--glass-bg-heavy);
@@ -3175,11 +3175,11 @@ textarea {
3175
3175
  background: var(--glass-bg-medium);
3176
3176
  backdrop-filter: blur(var(--glass-blur-lg));
3177
3177
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
3178
- border: 1px solid var(--glass-border-medium);
3178
+ border: 0.0625rem solid var(--glass-border-medium);
3179
3179
  border-radius: var(--tech-border-radius-md);
3180
3180
  overflow: hidden;
3181
3181
  overflow-y: auto;
3182
- max-height: 300px;
3182
+ max-height: 18.75rem;
3183
3183
  box-shadow: var(--glass-shadow-lg);
3184
3184
  }
3185
3185
  .bl-select-dropdown .bl-select-menu.bl-show {
@@ -3227,27 +3227,27 @@ textarea {
3227
3227
  .bl-input-error,
3228
3228
  .bl-select-error,
3229
3229
  .bl-textarea-error {
3230
- border-bottom: 2px solid var(--color-error);
3230
+ border-bottom: 0.125rem solid var(--color-error);
3231
3231
  }
3232
3232
  .bl-input-error:focus,
3233
3233
  .bl-select-error:focus,
3234
3234
  .bl-textarea-error:focus {
3235
3235
  border-width: 2px;
3236
3236
  border-color: var(--color-error);
3237
- border-bottom-width: 2px;
3237
+ border-bottom-width: 0.125rem;
3238
3238
  }
3239
3239
 
3240
3240
  .bl-input-success,
3241
3241
  .bl-select-success,
3242
3242
  .bl-textarea-success {
3243
- border-bottom: 2px solid var(--color-success);
3243
+ border-bottom: 0.125rem solid var(--color-success);
3244
3244
  }
3245
3245
  .bl-input-success:focus,
3246
3246
  .bl-select-success:focus,
3247
3247
  .bl-textarea-success:focus {
3248
3248
  border-width: 2px;
3249
3249
  border-color: var(--color-success);
3250
- border-bottom-width: 2px;
3250
+ border-bottom-width: 0.125rem;
3251
3251
  }
3252
3252
 
3253
3253
  .bl-input-sm,
@@ -3330,7 +3330,7 @@ textarea {
3330
3330
  right: 0;
3331
3331
  bottom: 0;
3332
3332
  background: var(--glass-bg-medium);
3333
- border: 1px solid var(--glass-border-medium);
3333
+ border: 0.0625rem solid var(--glass-border-medium);
3334
3334
  border-radius: var(--border-radius-full);
3335
3335
  backdrop-filter: blur(var(--glass-blur-sm));
3336
3336
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -3356,7 +3356,7 @@ textarea {
3356
3356
  padding: var(--form-file-input-padding);
3357
3357
  font-size: var(--form-file-input-font-size);
3358
3358
  color: var(--color-text);
3359
- border: 1px dashed var(--glass-border-medium);
3359
+ border: 0.0625rem dashed var(--glass-border-medium);
3360
3360
  border-radius: var(--tech-border-radius-sm);
3361
3361
  background: var(--glass-bg-light);
3362
3362
  backdrop-filter: blur(var(--glass-blur-md));
@@ -3387,7 +3387,7 @@ textarea {
3387
3387
  height: var(--form-range-thumb-size);
3388
3388
  border-radius: var(--tech-border-radius-sm);
3389
3389
  background: var(--form-range-thumb-bg);
3390
- border: 1px solid var(--glass-border-medium);
3390
+ border: 0.0625rem solid var(--glass-border-medium);
3391
3391
  cursor: pointer;
3392
3392
  }
3393
3393
  .bl-range::-moz-range-thumb {
@@ -3395,7 +3395,7 @@ textarea {
3395
3395
  height: var(--form-range-thumb-size);
3396
3396
  border-radius: var(--tech-border-radius-sm);
3397
3397
  background: var(--form-range-thumb-bg);
3398
- border: 1px solid var(--glass-border-medium);
3398
+ border: 0.0625rem solid var(--glass-border-medium);
3399
3399
  cursor: pointer;
3400
3400
  }
3401
3401
 
@@ -3413,7 +3413,7 @@ textarea {
3413
3413
  .bl-input-group .bl-select:not(:first-child) {
3414
3414
  border-top-left-radius: 0;
3415
3415
  border-bottom-left-radius: 0;
3416
- margin-left: -1px;
3416
+ margin-left: -0.0625rem;
3417
3417
  }
3418
3418
  .bl-input-group .bl-input:not(:last-child),
3419
3419
  .bl-input-group .bl-select:not(:last-child) {
@@ -3427,22 +3427,22 @@ textarea {
3427
3427
  background: var(--glass-bg-medium);
3428
3428
  backdrop-filter: blur(var(--glass-blur-md));
3429
3429
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
3430
- border: 1px solid var(--glass-border-medium);
3430
+ border: 0.0625rem solid var(--glass-border-medium);
3431
3431
  border-radius: var(--tech-border-radius-md);
3432
3432
  overflow: hidden;
3433
3433
  transition: var(--transition-base);
3434
3434
  position: relative;
3435
3435
  }
3436
3436
  .bl-card.bl-card-accent-left {
3437
- border-left: 4px solid var(--color-accent);
3437
+ border-left: 0.25rem solid var(--color-accent);
3438
3438
  }
3439
3439
  .bl-card.bl-card-accent-right {
3440
- border-right: 4px solid var(--color-accent);
3440
+ border-right: 0.25rem solid var(--color-accent);
3441
3441
  }
3442
3442
 
3443
3443
  .bl-card-header {
3444
3444
  padding: var(--spacing-md);
3445
- border-bottom: 1px solid var(--glass-border-light);
3445
+ border-bottom: 0.0625rem solid var(--glass-border-light);
3446
3446
  background: var(--glass-bg-light);
3447
3447
  backdrop-filter: blur(var(--glass-blur-sm));
3448
3448
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -3469,7 +3469,7 @@ textarea {
3469
3469
 
3470
3470
  .bl-card-footer {
3471
3471
  padding: var(--spacing-md);
3472
- border-top: 1px solid var(--glass-border-light);
3472
+ border-top: 0.0625rem solid var(--glass-border-light);
3473
3473
  background: var(--glass-bg-light);
3474
3474
  backdrop-filter: blur(var(--glass-blur-sm));
3475
3475
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -3503,8 +3503,8 @@ textarea {
3503
3503
  position: relative;
3504
3504
  padding: var(--spacing-md);
3505
3505
  margin-bottom: var(--spacing-md);
3506
- border: 1px solid var(--glass-border-medium);
3507
- border-left-width: 2px;
3506
+ border: 0.0625rem solid var(--glass-border-medium);
3507
+ border-left-width: 0.125rem;
3508
3508
  border-radius: var(--tech-border-radius-md);
3509
3509
  background: var(--glass-bg-medium);
3510
3510
  backdrop-filter: blur(var(--glass-blur-md));
@@ -3593,7 +3593,7 @@ textarea {
3593
3593
  white-space: nowrap;
3594
3594
  vertical-align: baseline;
3595
3595
  border-radius: var(--tech-border-radius-sm);
3596
- border: 1px solid var(--glass-border-medium);
3596
+ border: 0.0625rem solid var(--glass-border-medium);
3597
3597
  }
3598
3598
 
3599
3599
  .bl-badge-label {
@@ -3604,7 +3604,7 @@ textarea {
3604
3604
  backdrop-filter: blur(var(--glass-blur-sm));
3605
3605
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
3606
3606
  color: var(--color-text-muted);
3607
- border-right: 1px solid var(--glass-border-medium);
3607
+ border-right: 0.0625rem solid var(--glass-border-medium);
3608
3608
  flex-shrink: 0;
3609
3609
  }
3610
3610
 
@@ -3706,24 +3706,24 @@ textarea {
3706
3706
  .bl-modal-dialog {
3707
3707
  position: relative;
3708
3708
  width: 100%;
3709
- max-width: 500px;
3709
+ max-width: 31.25rem;
3710
3710
  margin: 0;
3711
3711
  pointer-events: none;
3712
3712
  z-index: 10;
3713
3713
  }
3714
3714
  @media (min-width: 576px) {
3715
3715
  .bl-modal-dialog {
3716
- max-width: 500px;
3716
+ max-width: 31.25rem;
3717
3717
  }
3718
3718
  }
3719
3719
  @media (min-width: 768px) {
3720
3720
  .bl-modal-dialog {
3721
- max-width: 600px;
3721
+ max-width: 37.5rem;
3722
3722
  }
3723
3723
  }
3724
3724
  @media (min-width: 1024px) {
3725
3725
  .bl-modal-dialog {
3726
- max-width: 800px;
3726
+ max-width: 50rem;
3727
3727
  }
3728
3728
  }
3729
3729
  .bl-modal.bl-modal-open.bl-modal-top-left .bl-modal-dialog {
@@ -3790,7 +3790,7 @@ textarea {
3790
3790
  background: var(--glass-bg-medium);
3791
3791
  backdrop-filter: blur(var(--glass-blur-xl));
3792
3792
  -webkit-backdrop-filter: blur(var(--glass-blur-xl));
3793
- border: 1px solid var(--glass-border-medium);
3793
+ border: 0.0625rem solid var(--glass-border-medium);
3794
3794
  border-radius: var(--tech-border-radius-md);
3795
3795
  outline: 0;
3796
3796
  }
@@ -3800,7 +3800,7 @@ textarea {
3800
3800
  align-items: flex-start;
3801
3801
  justify-content: space-between;
3802
3802
  padding: var(--spacing-md);
3803
- border-bottom: 1px solid var(--glass-border-light);
3803
+ border-bottom: 0.0625rem solid var(--glass-border-light);
3804
3804
  background: var(--glass-bg-light);
3805
3805
  backdrop-filter: blur(var(--glass-blur-sm));
3806
3806
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -3849,7 +3849,7 @@ textarea {
3849
3849
  align-items: center;
3850
3850
  justify-content: flex-end;
3851
3851
  padding: var(--spacing-md);
3852
- border-top: 1px solid var(--glass-border-light);
3852
+ border-top: 0.0625rem solid var(--glass-border-light);
3853
3853
  background: var(--glass-bg-light);
3854
3854
  backdrop-filter: blur(var(--glass-blur-sm));
3855
3855
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -3860,19 +3860,19 @@ textarea {
3860
3860
 
3861
3861
  @media (min-width: 576px) {
3862
3862
  .bl-modal-sm .bl-modal-dialog {
3863
- max-width: 300px;
3863
+ max-width: 18.75rem;
3864
3864
  }
3865
3865
  }
3866
3866
 
3867
3867
  @media (min-width: 1024px) {
3868
3868
  .bl-modal-lg .bl-modal-dialog {
3869
- max-width: 1000px;
3869
+ max-width: 62.5rem;
3870
3870
  }
3871
3871
  }
3872
3872
 
3873
3873
  @media (min-width: 1024px) {
3874
3874
  .bl-modal-xl .bl-modal-dialog {
3875
- max-width: 1200px;
3875
+ max-width: 75rem;
3876
3876
  }
3877
3877
  }
3878
3878
 
@@ -4159,11 +4159,11 @@ textarea {
4159
4159
  background: var(--glass-bg-medium);
4160
4160
  backdrop-filter: blur(var(--glass-blur-lg));
4161
4161
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
4162
- border: 1px solid var(--glass-border-medium);
4162
+ border: 0.0625rem solid var(--glass-border-medium);
4163
4163
  border-radius: var(--tech-border-radius-md);
4164
4164
  overflow: hidden;
4165
4165
  overflow-y: auto;
4166
- max-height: 300px;
4166
+ max-height: 18.75rem;
4167
4167
  box-shadow: var(--glass-shadow-lg);
4168
4168
  }
4169
4169
  .bl-dropdown-menu.bl-show {
@@ -4214,7 +4214,7 @@ textarea {
4214
4214
  height: 0;
4215
4215
  margin: var(--spacing-xs) 0;
4216
4216
  overflow: hidden;
4217
- border-top: 1px solid var(--glass-border-light);
4217
+ border-top: 0.0625rem solid var(--glass-border-light);
4218
4218
  }
4219
4219
 
4220
4220
  .bl-dropdown-header {
@@ -4259,14 +4259,14 @@ textarea {
4259
4259
  background: var(--glass-bg-medium);
4260
4260
  }
4261
4261
  .bl-nav-link:focus {
4262
- outline: 1px solid var(--color-border-focus);
4263
- outline-offset: -2px;
4262
+ outline: 0.0625rem solid var(--color-border-focus);
4263
+ outline-offset: -0.125rem;
4264
4264
  }
4265
4265
  .bl-nav-link.bl-active {
4266
4266
  color: var(--color-text);
4267
4267
  font-weight: var(--font-weight-semibold);
4268
4268
  background: var(--glass-bg-heavy);
4269
- border-bottom: 2px solid var(--color-accent);
4269
+ border-bottom: 0.125rem solid var(--color-accent);
4270
4270
  }
4271
4271
  .bl-nav-link.bl-disabled {
4272
4272
  color: var(--color-text-muted);
@@ -4289,13 +4289,13 @@ textarea {
4289
4289
  }
4290
4290
 
4291
4291
  .bl-nav-tabs {
4292
- border-bottom: 1px solid var(--glass-border-light);
4292
+ border-bottom: 0.0625rem solid var(--glass-border-light);
4293
4293
  background: transparent;
4294
4294
  padding: 0;
4295
4295
  }
4296
4296
  .bl-nav-tabs .bl-nav-link {
4297
- margin-bottom: -1px;
4298
- border: 1px solid transparent;
4297
+ margin-bottom: -0.0625rem;
4298
+ border: 0.0625rem solid transparent;
4299
4299
  border-top-left-radius: var(--tech-border-radius-sm);
4300
4300
  border-top-right-radius: var(--tech-border-radius-sm);
4301
4301
  background: transparent;
@@ -4309,7 +4309,7 @@ textarea {
4309
4309
  color: var(--color-text);
4310
4310
  background: var(--glass-bg-medium);
4311
4311
  border-color: var(--glass-border-medium) var(--glass-border-medium) transparent;
4312
- border-bottom: 2px solid var(--color-accent);
4312
+ border-bottom: 0.125rem solid var(--color-accent);
4313
4313
  }
4314
4314
 
4315
4315
  .bl-nav-pills .bl-nav-link {
@@ -4318,7 +4318,7 @@ textarea {
4318
4318
  .bl-nav-pills .bl-nav-link.bl-active {
4319
4319
  color: var(--color-text);
4320
4320
  background: var(--glass-bg-heavy);
4321
- border-bottom: 2px solid var(--color-accent);
4321
+ border-bottom: 0.125rem solid var(--color-accent);
4322
4322
  }
4323
4323
 
4324
4324
  .bl-breadcrumb {
@@ -4382,12 +4382,12 @@ textarea {
4382
4382
  position: relative;
4383
4383
  display: block;
4384
4384
  padding: var(--spacing-sm) var(--spacing-md);
4385
- margin-left: -1px;
4385
+ margin-left: -0.0625rem;
4386
4386
  line-height: var(--line-height-base);
4387
4387
  color: var(--color-text);
4388
4388
  text-decoration: none;
4389
4389
  background: var(--glass-bg-light);
4390
- border: 1px solid var(--glass-border-medium);
4390
+ border: 0.0625rem solid var(--glass-border-medium);
4391
4391
  backdrop-filter: blur(var(--glass-blur-sm));
4392
4392
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
4393
4393
  transition: var(--transition-base);
@@ -4401,8 +4401,8 @@ textarea {
4401
4401
  }
4402
4402
  .bl-page-link:focus {
4403
4403
  z-index: 2;
4404
- outline: 1px solid var(--color-border-focus);
4405
- outline-offset: -2px;
4404
+ outline: 0.0625rem solid var(--color-border-focus);
4405
+ outline-offset: -0.125rem;
4406
4406
  }
4407
4407
 
4408
4408
  .bl-table {
@@ -4414,16 +4414,16 @@ textarea {
4414
4414
  background: var(--glass-bg-medium);
4415
4415
  backdrop-filter: blur(var(--glass-blur-md));
4416
4416
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
4417
- border: 1px solid var(--glass-border-medium);
4417
+ border: 0.0625rem solid var(--glass-border-medium);
4418
4418
  border-radius: var(--tech-border-radius-md);
4419
4419
  overflow: hidden;
4420
4420
  }
4421
4421
  .bl-table > :not(caption) > * > * {
4422
4422
  padding: var(--spacing-sm) var(--spacing-md);
4423
4423
  background-color: transparent;
4424
- border-bottom-width: 1px;
4424
+ border-bottom-width: 0.0625rem;
4425
4425
  border-bottom-color: var(--glass-border-light);
4426
- border-right-width: 1px;
4426
+ border-right-width: 0.0625rem;
4427
4427
  border-right-color: var(--glass-border-light);
4428
4428
  box-shadow: inset 0 0 0 9999px transparent;
4429
4429
  }
@@ -4437,7 +4437,7 @@ textarea {
4437
4437
  vertical-align: bottom;
4438
4438
  }
4439
4439
  .bl-table > :not(:first-child) {
4440
- border-top: 1px solid var(--glass-border-light);
4440
+ border-top: 0.0625rem solid var(--glass-border-light);
4441
4441
  }
4442
4442
 
4443
4443
  .bl-table-caption {
@@ -4465,13 +4465,13 @@ textarea {
4465
4465
  }
4466
4466
 
4467
4467
  .bl-table-bordered {
4468
- border: 1px solid var(--glass-border-medium);
4468
+ border: 0.0625rem solid var(--glass-border-medium);
4469
4469
  }
4470
4470
  .bl-table-bordered > :not(caption) > * {
4471
- border-width: 1px 0;
4471
+ border-width: 0.0625rem 0;
4472
4472
  }
4473
4473
  .bl-table-bordered > :not(caption) > * > * {
4474
- border-width: 0 1px;
4474
+ border-width: 0 0.0625rem;
4475
4475
  border-color: var(--glass-border-light);
4476
4476
  }
4477
4477
 
@@ -4565,7 +4565,7 @@ textarea {
4565
4565
  position: absolute;
4566
4566
  z-index: var(--z-index-tooltip);
4567
4567
  display: none;
4568
- max-width: 200px;
4568
+ max-width: 12.5rem;
4569
4569
  padding: var(--spacing-xs) var(--spacing-sm);
4570
4570
  font-size: var(--font-size-xs);
4571
4571
  font-family: var(--font-family-mono);
@@ -4577,7 +4577,7 @@ textarea {
4577
4577
  background: var(--glass-bg-medium);
4578
4578
  backdrop-filter: blur(var(--glass-blur-md));
4579
4579
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
4580
- border: 1px solid var(--glass-border-medium);
4580
+ border: 0.0625rem solid var(--glass-border-medium);
4581
4581
  border-radius: var(--tech-border-radius-sm);
4582
4582
  opacity: 0;
4583
4583
  transition: var(--transition-opacity);
@@ -4599,9 +4599,9 @@ textarea {
4599
4599
  left: 50%;
4600
4600
  width: 0;
4601
4601
  height: 0;
4602
- margin-left: -6px;
4602
+ margin-left: -0.375rem;
4603
4603
  content: "";
4604
- border-width: 6px 6px 0 6px;
4604
+ border-width: 0.375rem 0.375rem 0 0.375rem;
4605
4605
  border-style: solid;
4606
4606
  border-color: var(--glass-bg-medium) transparent transparent transparent;
4607
4607
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
@@ -4619,9 +4619,9 @@ textarea {
4619
4619
  left: 50%;
4620
4620
  width: 0;
4621
4621
  height: 0;
4622
- margin-left: -6px;
4622
+ margin-left: -0.375rem;
4623
4623
  content: "";
4624
- border-width: 0 6px 6px 6px;
4624
+ border-width: 0 0.375rem 0.375rem 0.375rem;
4625
4625
  border-style: solid;
4626
4626
  border-color: transparent transparent var(--glass-bg-medium) transparent;
4627
4627
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
@@ -4639,9 +4639,9 @@ textarea {
4639
4639
  left: 100%;
4640
4640
  width: 0;
4641
4641
  height: 0;
4642
- margin-top: -6px;
4642
+ margin-top: -0.375rem;
4643
4643
  content: "";
4644
- border-width: 6px 0 6px 6px;
4644
+ border-width: 0.375rem 0 0.375rem 0.375rem;
4645
4645
  border-style: solid;
4646
4646
  border-color: transparent transparent transparent var(--glass-bg-medium);
4647
4647
  clip-path: polygon(0 20%, 0 80%, 100% 100%, 100% 0);
@@ -4659,9 +4659,9 @@ textarea {
4659
4659
  right: 100%;
4660
4660
  width: 0;
4661
4661
  height: 0;
4662
- margin-top: -6px;
4662
+ margin-top: -0.375rem;
4663
4663
  content: "";
4664
- border-width: 6px 6px 6px 0;
4664
+ border-width: 0.375rem 0.375rem 0.375rem 0;
4665
4665
  border-style: solid;
4666
4666
  border-color: transparent var(--glass-bg-medium) transparent transparent;
4667
4667
  clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 20%);
@@ -4674,7 +4674,7 @@ textarea {
4674
4674
  background: var(--glass-bg-light);
4675
4675
  backdrop-filter: blur(var(--glass-blur-sm));
4676
4676
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
4677
- border: 1px solid var(--glass-border-medium);
4677
+ border: 0.0625rem solid var(--glass-border-medium);
4678
4678
  border-radius: var(--tech-border-radius-sm);
4679
4679
  }
4680
4680
 
@@ -4739,10 +4739,10 @@ textarea {
4739
4739
  .bl-spinner::before {
4740
4740
  content: "";
4741
4741
  position: absolute;
4742
- top: 2px;
4743
- left: 2px;
4744
- right: 2px;
4745
- bottom: 2px;
4742
+ top: 0.125rem;
4743
+ left: 0.125rem;
4744
+ right: 0.125rem;
4745
+ bottom: 0.125rem;
4746
4746
  background: var(--color-accent);
4747
4747
  opacity: 0.3;
4748
4748
  border-radius: var(--tech-border-radius-sm);
@@ -4835,7 +4835,7 @@ textarea {
4835
4835
  background: var(--glass-bg-medium);
4836
4836
  backdrop-filter: blur(var(--glass-blur-md));
4837
4837
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
4838
- border: 1px solid var(--glass-border-medium);
4838
+ border: 0.0625rem solid var(--glass-border-medium);
4839
4839
  border-radius: var(--tech-border-radius-sm);
4840
4840
  color: var(--color-text);
4841
4841
  cursor: pointer;
@@ -4846,8 +4846,8 @@ textarea {
4846
4846
  border-color: var(--glass-border-heavy);
4847
4847
  }
4848
4848
  .bl-sidebar-toggle:focus {
4849
- outline: 1px solid var(--color-border-focus);
4850
- outline-offset: 2px;
4849
+ outline: 0.0625rem solid var(--color-border-focus);
4850
+ outline-offset: 0.125rem;
4851
4851
  }
4852
4852
  @media (min-width: 768px) {
4853
4853
  .bl-sidebar-toggle {
@@ -4860,29 +4860,35 @@ textarea {
4860
4860
  top: 0;
4861
4861
  left: 0;
4862
4862
  z-index: var(--z-index-sidebar);
4863
- width: 280px;
4863
+ width: 17.5rem;
4864
4864
  height: 100vh;
4865
4865
  display: flex;
4866
4866
  flex-direction: column;
4867
4867
  background: var(--glass-bg-medium);
4868
4868
  backdrop-filter: blur(var(--glass-blur-lg));
4869
4869
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
4870
- border-right: 1px solid var(--glass-border-medium);
4870
+ border-right: 0.0625rem solid var(--glass-border-medium);
4871
4871
  box-shadow: var(--glass-shadow-lg);
4872
4872
  transform: translateX(-100%);
4873
4873
  transition: transform var(--transition-duration-slow) var(--transition-ease-out);
4874
4874
  overflow: hidden;
4875
4875
  }
4876
+ @media (max-width: 767.98px) {
4877
+ .bl-sidebar {
4878
+ width: min(85%, 20rem);
4879
+ max-width: 90vw;
4880
+ }
4881
+ }
4876
4882
  .bl-sidebar::-webkit-scrollbar {
4877
- width: 6px;
4883
+ width: 0.375rem;
4878
4884
  }
4879
4885
  .bl-sidebar::-webkit-scrollbar-track {
4880
4886
  background: transparent;
4881
4887
  }
4882
4888
  .bl-sidebar::-webkit-scrollbar-thumb {
4883
4889
  background: var(--glass-bg-medium);
4884
- border-radius: 3px;
4885
- border: 1px solid var(--glass-border-light);
4890
+ border-radius: 0.1875rem;
4891
+ border: 0.0625rem solid var(--glass-border-light);
4886
4892
  }
4887
4893
  .bl-sidebar::-webkit-scrollbar-thumb:hover {
4888
4894
  background: var(--glass-bg-heavy);
@@ -4899,7 +4905,8 @@ textarea {
4899
4905
  height: auto;
4900
4906
  min-height: 100vh;
4901
4907
  box-shadow: none;
4902
- border-right: 1px solid var(--glass-border-medium);
4908
+ border-right: 0.0625rem solid var(--glass-border-medium);
4909
+ width: 17.5rem;
4903
4910
  }
4904
4911
  }
4905
4912
  .bl-sidebar.bl-sidebar-open {
@@ -4907,7 +4914,7 @@ textarea {
4907
4914
  }
4908
4915
  @media (min-width: 768px) {
4909
4916
  .bl-sidebar.bl-sidebar-collapsed {
4910
- width: 64px;
4917
+ width: 4rem;
4911
4918
  }
4912
4919
  .bl-sidebar.bl-sidebar-collapsed .bl-sidebar-header h3,
4913
4920
  .bl-sidebar.bl-sidebar-collapsed .bl-sidebar-nav .bl-nav-link span:not(.bl-icon),
@@ -4928,7 +4935,7 @@ textarea {
4928
4935
  left: auto;
4929
4936
  right: 0;
4930
4937
  border-right: none;
4931
- border-left: 1px solid var(--glass-border-medium);
4938
+ border-left: 0.0625rem solid var(--glass-border-medium);
4932
4939
  transform: translateX(100%);
4933
4940
  }
4934
4941
  .bl-sidebar.bl-sidebar-right.bl-sidebar-open {
@@ -4990,7 +4997,7 @@ textarea {
4990
4997
  align-items: center;
4991
4998
  justify-content: space-between;
4992
4999
  padding: var(--spacing-lg) var(--spacing-md);
4993
- border-bottom: 1px solid var(--glass-border-medium);
5000
+ border-bottom: 0.0625rem solid var(--glass-border-medium);
4994
5001
  background: var(--glass-bg-light);
4995
5002
  backdrop-filter: blur(var(--glass-blur-sm));
4996
5003
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -5015,11 +5022,11 @@ textarea {
5015
5022
  display: inline-flex;
5016
5023
  align-items: center;
5017
5024
  justify-content: center;
5018
- width: 32px;
5019
- height: 32px;
5025
+ width: 2rem;
5026
+ height: 2rem;
5020
5027
  padding: 0;
5021
5028
  background: transparent;
5022
- border: 1px solid transparent;
5029
+ border: 0.0625rem solid transparent;
5023
5030
  border-radius: var(--tech-border-radius-sm);
5024
5031
  color: var(--color-text);
5025
5032
  cursor: pointer;
@@ -5032,8 +5039,8 @@ textarea {
5032
5039
  border-color: var(--glass-border-medium);
5033
5040
  }
5034
5041
  .bl-sidebar-close:focus {
5035
- outline: 1px solid var(--color-border-focus);
5036
- outline-offset: 2px;
5042
+ outline: 0.0625rem solid var(--color-border-focus);
5043
+ outline-offset: 0.125rem;
5037
5044
  }
5038
5045
  @media (min-width: 768px) {
5039
5046
  .bl-sidebar-close {
@@ -5056,15 +5063,15 @@ textarea {
5056
5063
  }
5057
5064
  }
5058
5065
  .bl-sidebar-nav::-webkit-scrollbar {
5059
- width: 6px;
5066
+ width: 0.375rem;
5060
5067
  }
5061
5068
  .bl-sidebar-nav::-webkit-scrollbar-track {
5062
5069
  background: transparent;
5063
5070
  }
5064
5071
  .bl-sidebar-nav::-webkit-scrollbar-thumb {
5065
5072
  background: var(--glass-bg-medium);
5066
- border-radius: 3px;
5067
- border: 1px solid var(--glass-border-light);
5073
+ border-radius: 0.1875rem;
5074
+ border: 0.0625rem solid var(--glass-border-light);
5068
5075
  }
5069
5076
  .bl-sidebar-nav::-webkit-scrollbar-thumb:hover {
5070
5077
  background: var(--glass-bg-heavy);
@@ -5092,12 +5099,12 @@ textarea {
5092
5099
  line-height: var(--line-height-base);
5093
5100
  color: var(--color-text);
5094
5101
  text-decoration: none;
5095
- min-height: 40px;
5102
+ min-height: 2.5rem;
5096
5103
  }
5097
5104
  @media (max-width: 767.98px) {
5098
5105
  .bl-sidebar-nav .bl-nav-link {
5099
5106
  padding: var(--spacing-md);
5100
- min-height: 44px;
5107
+ min-height: 2.75rem;
5101
5108
  }
5102
5109
  }
5103
5110
  .bl-sidebar-nav .bl-nav-link span:not(.bl-icon) {
@@ -5106,27 +5113,27 @@ textarea {
5106
5113
  }
5107
5114
  .bl-sidebar-nav .bl-nav-link .bl-icon {
5108
5115
  flex-shrink: 0;
5109
- width: 18px;
5110
- height: 18px;
5116
+ width: 1.125rem;
5117
+ height: 1.125rem;
5111
5118
  color: var(--color-text-muted);
5112
5119
  transition: var(--transition-base);
5113
5120
  }
5114
5121
  .bl-sidebar-nav .bl-nav-link:hover {
5115
5122
  background: var(--glass-bg-light);
5116
5123
  color: var(--color-text);
5117
- transform: translateX(2px);
5124
+ transform: translateX(0.125rem);
5118
5125
  }
5119
5126
  .bl-sidebar-nav .bl-nav-link:hover .bl-icon {
5120
5127
  color: var(--color-text);
5121
5128
  }
5122
5129
  .bl-sidebar-nav .bl-nav-link:active {
5123
- transform: translateX(1px);
5130
+ transform: translateX(0.0625rem);
5124
5131
  }
5125
5132
  .bl-sidebar-nav .bl-nav-link.bl-active {
5126
5133
  background: var(--glass-bg-medium);
5127
5134
  color: var(--color-text);
5128
5135
  font-weight: var(--font-weight-medium);
5129
- padding-left: calc(var(--spacing-md) - 3px);
5136
+ padding-left: calc(var(--spacing-md) - 0.1875rem);
5130
5137
  transform: translateX(0);
5131
5138
  }
5132
5139
  .bl-sidebar-nav .bl-nav-link.bl-active::before {
@@ -5135,7 +5142,7 @@ textarea {
5135
5142
  left: 0;
5136
5143
  top: 0;
5137
5144
  bottom: 0;
5138
- width: 3px;
5145
+ width: 0.1875rem;
5139
5146
  background: var(--color-accent);
5140
5147
  border-radius: 0 var(--tech-border-radius-sm) var(--tech-border-radius-sm) 0;
5141
5148
  }
@@ -5147,8 +5154,8 @@ textarea {
5147
5154
  transform: translateX(0);
5148
5155
  }
5149
5156
  .bl-sidebar-nav .bl-nav-link:focus {
5150
- outline: 1px solid var(--color-border-focus);
5151
- outline-offset: -2px;
5157
+ outline: 0.0625rem solid var(--color-border-focus);
5158
+ outline-offset: -0.125rem;
5152
5159
  }
5153
5160
 
5154
5161
  .bl-nav-group {
@@ -5162,7 +5169,7 @@ textarea {
5162
5169
  }
5163
5170
  .bl-nav-group + .bl-nav-group {
5164
5171
  padding-top: var(--spacing-md);
5165
- border-top: 1px solid var(--glass-border-light);
5172
+ border-top: 0.0625rem solid var(--glass-border-light);
5166
5173
  margin-top: var(--spacing-lg);
5167
5174
  }
5168
5175
 
@@ -5181,7 +5188,7 @@ textarea {
5181
5188
 
5182
5189
  .bl-sidebar-footer {
5183
5190
  padding: var(--spacing-md);
5184
- border-top: 1px solid var(--glass-border-medium);
5191
+ border-top: 0.0625rem solid var(--glass-border-medium);
5185
5192
  background: var(--glass-bg-light);
5186
5193
  backdrop-filter: blur(var(--glass-blur-sm));
5187
5194
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
@@ -5237,7 +5244,7 @@ textarea {
5237
5244
  background: var(--glass-bg-medium);
5238
5245
  backdrop-filter: blur(var(--glass-blur-md));
5239
5246
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
5240
- border: 1px solid var(--glass-border-medium);
5247
+ border: 0.0625rem solid var(--glass-border-medium);
5241
5248
  border-radius: var(--tech-border-radius-sm);
5242
5249
  overflow: hidden;
5243
5250
  transition: var(--transition-base);
@@ -5266,8 +5273,8 @@ textarea {
5266
5273
  background: var(--glass-bg-light);
5267
5274
  }
5268
5275
  .bl-accordion-header:focus {
5269
- outline: 1px solid var(--color-border-focus);
5270
- outline-offset: -2px;
5276
+ outline: 0.0625rem solid var(--color-border-focus);
5277
+ outline-offset: -0.125rem;
5271
5278
  }
5272
5279
  .bl-accordion-header span:first-child {
5273
5280
  flex: 1;
@@ -5277,8 +5284,8 @@ textarea {
5277
5284
  display: inline-flex;
5278
5285
  align-items: center;
5279
5286
  justify-content: center;
5280
- width: 20px;
5281
- height: 20px;
5287
+ width: 1.25rem;
5288
+ height: 1.25rem;
5282
5289
  margin-left: var(--spacing-sm);
5283
5290
  transition: transform var(--transition-duration-base) var(--transition-ease-in-out);
5284
5291
  flex-shrink: 0;
@@ -5301,7 +5308,7 @@ textarea {
5301
5308
  .bl-accordion-item.bl-accordion-open .bl-accordion-body {
5302
5309
  max-height: 2000px;
5303
5310
  padding: var(--spacing-md);
5304
- border-top: 1px solid var(--glass-border-light);
5311
+ border-top: 0.0625rem solid var(--glass-border-light);
5305
5312
  }
5306
5313
 
5307
5314
  .bl-accordion-flush .bl-accordion-item {
@@ -5363,7 +5370,7 @@ textarea {
5363
5370
  display: flex;
5364
5371
  flex-direction: column;
5365
5372
  gap: var(--spacing-sm);
5366
- max-width: 400px;
5373
+ max-width: 25rem;
5367
5374
  width: 100%;
5368
5375
  }
5369
5376
  @media (max-width: 575.98px) {
@@ -5381,12 +5388,12 @@ textarea {
5381
5388
  background: var(--glass-bg-medium);
5382
5389
  backdrop-filter: blur(var(--glass-blur-lg));
5383
5390
  -webkit-backdrop-filter: blur(var(--glass-blur-lg));
5384
- border: 1px solid var(--glass-border-medium);
5391
+ border: 0.0625rem solid var(--glass-border-medium);
5385
5392
  border-radius: var(--tech-border-radius-md);
5386
5393
  box-shadow: var(--glass-shadow-lg);
5387
5394
  color: var(--color-text);
5388
5395
  pointer-events: all;
5389
- min-width: 300px;
5396
+ min-width: 18.75rem;
5390
5397
  max-width: 100%;
5391
5398
  animation: bl-toast-slide-in var(--transition-duration-base) var(--transition-ease-out);
5392
5399
  }
@@ -5425,8 +5432,8 @@ textarea {
5425
5432
  display: inline-flex;
5426
5433
  align-items: center;
5427
5434
  justify-content: center;
5428
- width: 24px;
5429
- height: 24px;
5435
+ width: 1.5rem;
5436
+ height: 1.5rem;
5430
5437
  padding: 0;
5431
5438
  background: transparent;
5432
5439
  border: none;
@@ -5443,33 +5450,33 @@ textarea {
5443
5450
  color: var(--color-text);
5444
5451
  }
5445
5452
  .bl-toast-close:focus {
5446
- outline: 1px solid var(--color-border-focus);
5447
- outline-offset: 2px;
5453
+ outline: 0.0625rem solid var(--color-border-focus);
5454
+ outline-offset: 0.125rem;
5448
5455
  }
5449
5456
 
5450
5457
  .bl-toast-success {
5451
- border-left: 4px solid var(--color-success);
5458
+ border-left: 0.25rem solid var(--color-success);
5452
5459
  }
5453
5460
  .bl-toast-success .bl-toast-title {
5454
5461
  color: var(--color-success);
5455
5462
  }
5456
5463
 
5457
5464
  .bl-toast-error {
5458
- border-left: 4px solid var(--color-error);
5465
+ border-left: 0.25rem solid var(--color-error);
5459
5466
  }
5460
5467
  .bl-toast-error .bl-toast-title {
5461
5468
  color: var(--color-error);
5462
5469
  }
5463
5470
 
5464
5471
  .bl-toast-warning {
5465
- border-left: 4px solid var(--color-warning);
5472
+ border-left: 0.25rem solid var(--color-warning);
5466
5473
  }
5467
5474
  .bl-toast-warning .bl-toast-title {
5468
5475
  color: var(--color-warning);
5469
5476
  }
5470
5477
 
5471
5478
  .bl-toast-info {
5472
- border-left: 4px solid var(--color-info);
5479
+ border-left: 0.25rem solid var(--color-info);
5473
5480
  }
5474
5481
  .bl-toast-info .bl-toast-title {
5475
5482
  color: var(--color-info);
@@ -5479,8 +5486,8 @@ textarea {
5479
5486
  display: inline-flex;
5480
5487
  align-items: center;
5481
5488
  justify-content: center;
5482
- width: 24px;
5483
- height: 24px;
5489
+ width: 1.5rem;
5490
+ height: 1.5rem;
5484
5491
  flex-shrink: 0;
5485
5492
  font-size: 1.25rem;
5486
5493
  }
@@ -5488,7 +5495,7 @@ textarea {
5488
5495
  @keyframes bl-toast-slide-in {
5489
5496
  from {
5490
5497
  opacity: 0;
5491
- transform: translateY(-20px);
5498
+ transform: translateY(-1.25rem);
5492
5499
  }
5493
5500
  to {
5494
5501
  opacity: 1;
@@ -5502,7 +5509,7 @@ textarea {
5502
5509
  }
5503
5510
  to {
5504
5511
  opacity: 0;
5505
- transform: translateY(-20px);
5512
+ transform: translateY(-1.25rem);
5506
5513
  }
5507
5514
  }
5508
5515
  .bl-toast-container.bl-toast-bottom-left .bl-toast,
@@ -5519,7 +5526,7 @@ textarea {
5519
5526
  @keyframes bl-toast-slide-in-bottom {
5520
5527
  from {
5521
5528
  opacity: 0;
5522
- transform: translateY(20px);
5529
+ transform: translateY(1.25rem);
5523
5530
  }
5524
5531
  to {
5525
5532
  opacity: 1;
@@ -5533,13 +5540,13 @@ textarea {
5533
5540
  }
5534
5541
  to {
5535
5542
  opacity: 0;
5536
- transform: translateY(20px);
5543
+ transform: translateY(1.25rem);
5537
5544
  }
5538
5545
  }
5539
5546
  .bl-divider {
5540
5547
  display: block;
5541
5548
  width: 100%;
5542
- height: 1px;
5549
+ height: 0.0625rem;
5543
5550
  margin: var(--spacing-md) 0;
5544
5551
  background: var(--glass-border-medium);
5545
5552
  border: none;
@@ -5558,7 +5565,7 @@ textarea {
5558
5565
  .bl-divider-text::before, .bl-divider-text::after {
5559
5566
  content: "";
5560
5567
  flex: 1;
5561
- height: 1px;
5568
+ height: 0.0625rem;
5562
5569
  background: var(--glass-border-medium);
5563
5570
  opacity: 0.5;
5564
5571
  }
@@ -5571,7 +5578,7 @@ textarea {
5571
5578
 
5572
5579
  .bl-divider-vertical {
5573
5580
  display: inline-block;
5574
- width: 1px;
5581
+ width: 0.0625rem;
5575
5582
  height: 100%;
5576
5583
  min-height: 1rem;
5577
5584
  margin: 0 var(--spacing-md);
@@ -5594,34 +5601,34 @@ textarea {
5594
5601
  }
5595
5602
 
5596
5603
  .bl-divider-thick {
5597
- height: 2px;
5604
+ height: 0.125rem;
5598
5605
  }
5599
5606
  .bl-divider-thick.bl-divider-vertical {
5600
- width: 2px;
5607
+ width: 0.125rem;
5601
5608
  height: 100%;
5602
5609
  }
5603
5610
 
5604
5611
  .bl-divider-dashed {
5605
5612
  background: none;
5606
- border-top: 1px dashed var(--glass-border-medium);
5613
+ border-top: 0.0625rem dashed var(--glass-border-medium);
5607
5614
  opacity: 0.5;
5608
5615
  }
5609
5616
  .bl-divider-dashed.bl-divider-vertical {
5610
5617
  border-top: none;
5611
- border-left: 1px dashed var(--glass-border-medium);
5618
+ border-left: 0.0625rem dashed var(--glass-border-medium);
5612
5619
  }
5613
5620
 
5614
5621
  .bl-avatar {
5615
5622
  display: inline-flex;
5616
5623
  align-items: center;
5617
5624
  justify-content: center;
5618
- width: 40px;
5619
- height: 40px;
5625
+ width: 2.5rem;
5626
+ height: 2.5rem;
5620
5627
  border-radius: 50%;
5621
5628
  background: var(--glass-bg-medium);
5622
5629
  backdrop-filter: blur(var(--glass-blur-md));
5623
5630
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
5624
- border: 1px solid var(--glass-border-medium);
5631
+ border: 0.0625rem solid var(--glass-border-medium);
5625
5632
  overflow: hidden;
5626
5633
  flex-shrink: 0;
5627
5634
  position: relative;
@@ -5648,8 +5655,8 @@ img ~ .bl-avatar::before {
5648
5655
  }
5649
5656
 
5650
5657
  .bl-avatar-sm {
5651
- width: 32px;
5652
- height: 32px;
5658
+ width: 2rem;
5659
+ height: 2rem;
5653
5660
  font-size: var(--font-size-sm);
5654
5661
  }
5655
5662
  .bl-avatar-sm::before {
@@ -5657,8 +5664,8 @@ img ~ .bl-avatar::before {
5657
5664
  }
5658
5665
 
5659
5666
  .bl-avatar-md {
5660
- width: 40px;
5661
- height: 40px;
5667
+ width: 2.5rem;
5668
+ height: 2.5rem;
5662
5669
  font-size: var(--font-size-base);
5663
5670
  }
5664
5671
  .bl-avatar-md::before {
@@ -5666,8 +5673,8 @@ img ~ .bl-avatar::before {
5666
5673
  }
5667
5674
 
5668
5675
  .bl-avatar-lg {
5669
- width: 56px;
5670
- height: 56px;
5676
+ width: 3.5rem;
5677
+ height: 3.5rem;
5671
5678
  font-size: var(--font-size-lg);
5672
5679
  }
5673
5680
  .bl-avatar-lg::before {
@@ -5675,8 +5682,8 @@ img ~ .bl-avatar::before {
5675
5682
  }
5676
5683
 
5677
5684
  .bl-avatar-xl {
5678
- width: 80px;
5679
- height: 80px;
5685
+ width: 5rem;
5686
+ height: 5rem;
5680
5687
  font-size: var(--font-size-xl);
5681
5688
  }
5682
5689
  .bl-avatar-xl::before {
@@ -5687,21 +5694,21 @@ img ~ .bl-avatar::before {
5687
5694
  position: absolute;
5688
5695
  bottom: 0;
5689
5696
  right: 0;
5690
- width: 12px;
5691
- height: 12px;
5697
+ width: 0.75rem;
5698
+ height: 0.75rem;
5692
5699
  border-radius: 50%;
5693
- border: 2px solid var(--color-bg);
5700
+ border: 0.125rem solid var(--color-bg);
5694
5701
  background: var(--color-success);
5695
5702
  }
5696
5703
  .bl-avatar-status.bl-avatar-status-sm {
5697
- width: 10px;
5698
- height: 10px;
5699
- border-width: 1.5px;
5704
+ width: 0.625rem;
5705
+ height: 0.625rem;
5706
+ border-width: 0.09375rem;
5700
5707
  }
5701
5708
  .bl-avatar-status.bl-avatar-status-lg {
5702
- width: 14px;
5703
- height: 14px;
5704
- border-width: 2.5px;
5709
+ width: 0.875rem;
5710
+ height: 0.875rem;
5711
+ border-width: 0.15625rem;
5705
5712
  }
5706
5713
 
5707
5714
  .bl-avatar-status-online {