vue-dockable-desktop 1.2.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +156 -0
  2. package/README.md +29 -5
  3. package/dist/index.cjs +1 -1
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +554 -469
  9. package/package.json +1 -1
package/dist/styles.css CHANGED
@@ -16,70 +16,79 @@
16
16
  */
17
17
 
18
18
  :root {
19
- /* The font of all the library's chrome. `inherit` hands it to the host page instead. */
20
- --vdd-font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
19
+ /* The font of all the library's chrome. `inherit` hands it to the host page instead.
20
+ Neither Outfit nor Inter is loaded by the library: load one yourself, or override this on
21
+ :root (menus, flyouts and toasts teleport to <body>, so :root is what reaches everything).
22
+ A skin picks its own font through --vdd-skin-font-family, never by declaring --vdd-font-family
23
+ itself: that would override the consumer's :root value on the element carrying data-vdd-skin.
24
+ This resolves on <html>, which <VddDesktop> gives data-vdd-skin too. */
25
+ --vdd-font-family: var(--vdd-skin-font-family, 'Outfit', 'Inter', system-ui, -apple-system, sans-serif);
21
26
  --vdd-styles-loaded: 1; /* sentinel — checked at mount to detect missing CSS import */
22
27
  --vdd-z-base: 1000; /* base for floating windows + all chrome overlays; override via WindowManagerProvider's zIndexBase */
23
- --vdd-bg-primary: #090b11;
24
- --vdd-bg-workspace: #0f111a;
25
- --vdd-bg-panel: #141722;
26
- --vdd-bg-tab-bar: #0d0f16;
27
- --vdd-text-primary: #f1f5f9;
28
- --vdd-text-secondary: #94a3b8;
28
+ --vdd-bg-primary: var(--vdd--b-bg-primary, #090b11);
29
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #0f111a);
30
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #141722);
31
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #0d0f16);
32
+ --vdd-text-primary: var(--vdd--b-text-primary, #f1f5f9);
33
+ --vdd-text-secondary: var(--vdd--b-text-secondary, #94a3b8);
29
34
  --vdd-border-color: rgba(255, 255, 255, 0.08);
30
- --vdd-accent-color: #38bdf8; /* Modern Cyan/Sky-blue accent */
31
- --vdd-accent-glow: rgba(56, 189, 248, 0.15);
35
+ /* Branding: an app sets --vdd-brand-accent / --vdd-brand-on-accent on :root, and every skin reads
36
+ them first (var(--vdd-brand-accent, <skin colour>)). The library only reads them — declared
37
+ here or in a skin, they would override the app's value on the element carrying data-vdd-skin.
38
+ Every tint of the accent is a color-mix() of --vdd-accent-color, never a copied rgba(). */
39
+ --vdd-accent-color: var(--vdd-brand-accent, #38bdf8); /* Modern Cyan/Sky-blue accent */
40
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
32
41
  --vdd-header-button-gap: 4px; /* Configurable gap spacing between titlebar action buttons */
33
42
  /* Window skins variables */
34
- --vdd-window-bg: rgba(20, 22, 28, var(--vdd-window-opacity, 0.85));
43
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(20 22 28)) calc(var(--vdd-window-opacity, 0.85) * 100%), transparent);
35
44
  --vdd-window-border: rgba(255, 255, 255, 0.08);
36
45
  --vdd-window-border-focused: rgba(255, 255, 255, 0.28);
37
46
  --vdd-window-header-bg: rgba(0, 0, 0, 0.25);
38
- --vdd-window-text: #f8f9fa;
47
+ --vdd-window-text: var(--vdd--b-window-text, #f8f9fa);
39
48
  --vdd-window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
40
49
  --vdd-window-shadow-focused: 0 24px 50px rgba(0, 0, 0, 0.55);
41
50
  /* Modal theme variables */
42
- --vdd-modal-curtain-bg: rgba(9, 11, 17, 0.65);
43
- --vdd-modal-bg: rgba(20, 23, 34, 0.95);
51
+ --vdd-modal-curtain-bg: color-mix(in srgb, var(--vdd--b-modal-curtain-bg, rgb(9 11 17)) 65%, transparent);
52
+ --vdd-modal-bg: color-mix(in srgb, var(--vdd--b-modal-bg, rgb(20 23 34)) 95%, transparent);
44
53
  --vdd-modal-border: rgba(255, 255, 255, 0.08);
45
54
  --vdd-modal-header-bg: rgba(0, 0, 0, 0.15);
46
55
  --vdd-modal-header-border: rgba(255, 255, 255, 0.06);
47
- --vdd-modal-close-hover-color: #ffffff;
48
- --vdd-side-panel-bg: rgba(20, 23, 34, 0.88);
56
+ --vdd-modal-close-hover-color: var(--vdd--b-modal-close-hover-color, #ffffff);
57
+ --vdd-side-panel-bg: color-mix(in srgb, var(--vdd--b-side-panel-bg, rgb(20 23 34)) 88%, transparent);
49
58
  --vdd-side-panel-border: rgba(255, 255, 255, 0.08);
50
59
  --vdd-side-panel-header-bg: rgba(0, 0, 0, 0.15);
51
60
  --vdd-side-panel-header-border: rgba(255, 255, 255, 0.06);
52
- --vdd-side-panel-close-hover-color: #ffffff;
61
+ --vdd-side-panel-close-hover-color: var(--vdd--b-side-panel-close-hover-color, #ffffff);
53
62
  /* Grid/Docked panel theme variables */
54
63
  --vdd-border-panel: rgba(255, 255, 255, 0.08);
55
- --vdd-bg-tab-inactive: #0c0d12;
56
- --vdd-text-tab-inactive: #858b99;
57
- --vdd-text-tab-active: #ffffff;
64
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #0c0d12);
65
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #858b99);
66
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #ffffff);
58
67
  /* Tab and control button hover colors */
59
- --vdd-bg-tab-hover: #171a22;
60
- --vdd-text-tab-hover: #e2e8f0;
68
+ --vdd-bg-tab-hover: var(--vdd--b-bg-tab-hover, #171a22);
69
+ --vdd-text-tab-hover: var(--vdd--b-text-tab-hover, #e2e8f0);
61
70
  --vdd-close-btn-hover-bg: rgba(255, 255, 255, 0.12);
62
- --vdd-close-btn-hover-color: #ffffff;
63
- --vdd-close-btn-color: #858b99;
64
- --vdd-close-btn-active-color: #e2e8f0;
71
+ --vdd-close-btn-hover-color: var(--vdd--b-close-btn-hover-color, #ffffff);
72
+ --vdd-close-btn-color: var(--vdd--b-close-btn-color, #858b99);
73
+ --vdd-close-btn-active-color: var(--vdd--b-close-btn-active-color, #e2e8f0);
65
74
  /* Tab focus states */
66
75
  --vdd-tab-indicator-focused: var(--vdd-accent-color, #38bdf8);
67
76
  --vdd-tab-indicator-unfocused: rgba(255, 255, 255, 0.3);
68
77
  --vdd-tab-bg-active-focused: var(--vdd-bg-panel);
69
- --vdd-tab-bg-active-unfocused: rgba(20, 23, 34, 0.55);
78
+ --vdd-tab-bg-active-unfocused: color-mix(in srgb, var(--vdd--b-tab-bg-active-unfocused, rgb(20 23 34)) 55%, transparent);
70
79
  --vdd-tab-text-active-focused: var(--vdd-text-tab-active, #ffffff);
71
80
  --vdd-tab-text-active-unfocused: rgba(255, 255, 255, 0.65);
72
81
  --vdd-resizer-bg: rgba(255, 255, 255, 0.08);
73
82
  --vdd-custom-btn-bg: rgba(255, 255, 255, 0.03);
74
83
  --vdd-custom-btn-border: rgba(255, 255, 255, 0.05);
75
84
  --vdd-custom-btn-hover-bg: rgba(255, 255, 255, 0.12);
76
- --vdd-custom-btn-hover-color: #ffffff;
85
+ --vdd-custom-btn-hover-color: var(--vdd--b-custom-btn-hover-color, #ffffff);
77
86
  /* Taskbar theme variables */
78
87
  --vdd-taskbar-bg: rgba(0, 0, 0, 0.75);
79
88
  --vdd-taskbar-border: rgba(255, 255, 255, 0.1);
80
89
  --vdd-taskbar-nav-color: rgba(255, 255, 255, 0.5);
81
- --vdd-taskbar-item-bg: rgba(15, 23, 42, 0.6);
82
- --vdd-taskbar-item-hover-bg: rgba(15, 23, 42, 0.8);
90
+ --vdd-taskbar-item-bg: color-mix(in srgb, var(--vdd--b-taskbar-item-bg, rgb(15 23 42)) 60%, transparent);
91
+ --vdd-taskbar-item-hover-bg: color-mix(in srgb, var(--vdd--b-taskbar-item-hover-bg, rgb(15 23 42)) 80%, transparent);
83
92
  --vdd-taskbar-item-border: rgba(255, 255, 255, 0.08);
84
93
  --vdd-taskbar-item-text: var(--vdd-accent-color, #38bdf8);
85
94
  /* Scrollbar theme variables */
@@ -103,7 +112,7 @@
103
112
  --vdd-panel-toolbar-btn-active-color: var(--vdd-tab-icon-active, #38bdf8);
104
113
  --vdd-panel-toolbar-separator-color: var(--vdd-toolbar-separator-color, rgba(255, 255, 255, 0.09));
105
114
  /* ── Panel Overlay — Floating Window ── */
106
- --vdd-panel-float-bg: rgba(22, 24, 34, 0.92);
115
+ --vdd-panel-float-bg: color-mix(in srgb, var(--vdd--b-panel-float-bg, rgb(22 24 34)) 92%, transparent);
107
116
  --vdd-panel-float-border: rgba(255, 255, 255, 0.1);
108
117
  --vdd-panel-float-radius: 8px;
109
118
  --vdd-panel-float-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
@@ -122,32 +131,32 @@
122
131
  with no background and inherited text in dark mode; the selected rail icon had no colour at
123
132
  all. `[data-color-scheme="light"]` overrides these, which is all a scheme block should ever
124
133
  do, and a gate rule now rejects a token whose only home is such a block. */
125
- --vdd-sidebar-bg: #1e2024;
126
- --vdd-sidebar-tabs-bg: #141619;
134
+ --vdd-sidebar-bg: var(--vdd--b-sidebar-bg, #1e2024);
135
+ --vdd-sidebar-tabs-bg: var(--vdd--b-sidebar-tabs-bg, #141619);
127
136
  --vdd-sidebar-border: rgba(255, 255, 255, 0.08);
128
137
  --vdd-sidebar-card-bg: rgba(255, 255, 255, 0.03);
129
138
  --vdd-sidebar-card-border: rgba(255, 255, 255, 0.08);
130
- --vdd-sidebar-card-active-bg: rgba(56, 189, 248, 0.06);
131
- --vdd-sidebar-card-active-border: rgba(56, 189, 248, 0.3);
132
- --vdd-sidebar-text-title: #f8f9fa;
133
- --vdd-sidebar-text-muted: #8a90a0;
134
- --vdd-sidebar-badge-bg: #2d3139;
135
- --vdd-sidebar-badge-text: #b0b5c0;
136
- --vdd-sidebar-btn-front-border: #38bdf8;
137
- --vdd-sidebar-btn-front-text: #38bdf8;
139
+ --vdd-sidebar-card-active-bg: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
140
+ --vdd-sidebar-card-active-border: color-mix(in srgb, var(--vdd-accent-color) 30%, transparent);
141
+ --vdd-sidebar-text-title: var(--vdd--b-sidebar-text-title, #f8f9fa);
142
+ --vdd-sidebar-text-muted: var(--vdd--b-sidebar-text-muted, #8a90a0);
143
+ --vdd-sidebar-badge-bg: var(--vdd--b-sidebar-badge-bg, #2d3139);
144
+ --vdd-sidebar-badge-text: var(--vdd--b-sidebar-badge-text, #b0b5c0);
145
+ --vdd-sidebar-btn-front-border: var(--vdd-accent-color);
146
+ --vdd-sidebar-btn-front-text: var(--vdd-accent-color);
138
147
  --vdd-sidebar-btn-front-bg: transparent;
139
- --vdd-sidebar-btn-front-hover-bg: rgba(56, 189, 248, 0.1);
140
- --vdd-tab-icon-active: #38bdf8;
141
- --vdd-tab-icon-inactive: #9ea4b0;
142
- --vdd-tab-btn-active-bg: #1e2024; /* Seamless merge look */
148
+ --vdd-sidebar-btn-front-hover-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
149
+ --vdd-tab-icon-active: var(--vdd-accent-color);
150
+ --vdd-tab-icon-inactive: var(--vdd--b-tab-icon-inactive, #9ea4b0);
151
+ --vdd-tab-btn-active-bg: var(--vdd--b-tab-btn-active-bg, #1e2024); /* Seamless merge look */
143
152
  --vdd-sidebar-btn-hover-bg: rgba(255, 255, 255, 0.05);
144
- --vdd-sidebar-card-hover-border: rgba(56, 189, 248, 0.25);
153
+ --vdd-sidebar-card-hover-border: color-mix(in srgb, var(--vdd-accent-color) 25%, transparent);
145
154
  --vdd-sidebar-card-hover-bg: rgba(255, 255, 255, 0.04);
146
- --vdd-sidebar-card-active-shadow: rgba(56, 189, 248, 0.08);
155
+ --vdd-sidebar-card-active-shadow: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
147
156
  --vdd-sidebar-drawer-header-bg: rgba(0, 0, 0, 0.12);
148
157
  --vdd-toolbar-btn-hover-bg: rgba(255, 255, 255, 0.06);
149
- --vdd-toolbar-btn-radio-active-bg: rgba(56, 189, 248, 0.14);
150
- --vdd-toolbar-btn-toggle-active-bg: rgba(56, 189, 248, 0.08);
158
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
159
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
151
160
  --vdd-toolbar-separator-color: rgba(255, 255, 255, 0.09);
152
161
  /* Sidebar active-tab design tokens */
153
162
  --vdd-tab-btn-active-shadow: none;
@@ -164,6 +173,66 @@
164
173
  --vdd-toolbar-btn-active-glow: none;
165
174
  }
166
175
 
176
+ /* Brand surfaces (7.3.0): each surface a skin declares reads --vdd--b-<token> first. These are
177
+ mixes of the application's --vdd-brand-surface and --vdd-brand-text. --vdd--b-base is the surface,
178
+ written as a mix with the text so that it is valid only when *both* are set; every other value is
179
+ built on it and has no fallback. While either input is unset they are all invalid, and every
180
+ surface falls back to the skin's own colour. Internal, not API — declared only here, where :root
181
+ resolves the brand variables. */
182
+ :root {
183
+ --vdd--b-base: color-mix(in srgb, var(--vdd-brand-surface) 100%, var(--vdd-brand-text));
184
+ --vdd--b-bg-panel: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 6%);
185
+ --vdd--b-bg-primary: var(--vdd--b-base);
186
+ --vdd--b-bg-tab-bar: color-mix(in srgb, var(--vdd--b-base), black 10%);
187
+ --vdd--b-bg-tab-hover: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 10%);
188
+ --vdd--b-bg-tab-inactive: color-mix(in srgb, var(--vdd--b-base), black 10%);
189
+ --vdd--b-bg-workspace: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 3%);
190
+ --vdd--b-border-panel: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 14%);
191
+ --vdd--b-close-btn-active-color: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
192
+ --vdd--b-close-btn-color: color-mix(in srgb, var(--vdd-brand-text) 62%, var(--vdd--b-base));
193
+ --vdd--b-close-btn-hover-color: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
194
+ --vdd--b-custom-btn-hover-color: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
195
+ --vdd--b-dock-target-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 6%);
196
+ --vdd--b-dock-target-center-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 12%);
197
+ --vdd--b-modal-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 6%);
198
+ --vdd--b-modal-close-hover-color: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
199
+ --vdd--b-modal-curtain-bg: color-mix(in srgb, var(--vdd--b-base), black 20%);
200
+ --vdd--b-panel-card-bg: color-mix(in srgb, var(--vdd--b-base), black 6%);
201
+ --vdd--b-panel-card-border: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 16%);
202
+ --vdd--b-panel-float-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 6%);
203
+ --vdd--b-panel-text: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
204
+ --vdd--b-panel-toolbar-frosted-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 6%);
205
+ --vdd--b-placeholder-bg: color-mix(in srgb, var(--vdd-brand-text) 62%, var(--vdd--b-base));
206
+ --vdd--b-side-panel-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 6%);
207
+ --vdd--b-side-panel-close-hover-color: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
208
+ --vdd--b-sidebar-badge-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 16%);
209
+ --vdd--b-sidebar-badge-text: color-mix(in srgb, var(--vdd-brand-text) 62%, var(--vdd--b-base));
210
+ --vdd--b-sidebar-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 4%);
211
+ --vdd--b-sidebar-card-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 8%);
212
+ --vdd--b-sidebar-tabs-bg: color-mix(in srgb, var(--vdd--b-base), black 10%);
213
+ --vdd--b-sidebar-text-muted: color-mix(in srgb, var(--vdd-brand-text) 62%, var(--vdd--b-base));
214
+ --vdd--b-sidebar-text-title: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
215
+ --vdd--b-tab-bg-active-unfocused: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 3%);
216
+ --vdd--b-tab-btn-active-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 9%);
217
+ --vdd--b-tab-icon-inactive: color-mix(in srgb, var(--vdd-brand-text) 62%, var(--vdd--b-base));
218
+ --vdd--b-tab-text-active-focused: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
219
+ --vdd--b-tab-text-active-unfocused: color-mix(in srgb, var(--vdd-brand-text) 62%, var(--vdd--b-base));
220
+ --vdd--b-taskbar-bg: color-mix(in srgb, var(--vdd--b-base), black 10%);
221
+ --vdd--b-taskbar-item-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 6%);
222
+ --vdd--b-taskbar-item-hover-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 12%);
223
+ --vdd--b-text-primary: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
224
+ --vdd--b-text-secondary: color-mix(in srgb, var(--vdd-brand-text) 62%, var(--vdd--b-base));
225
+ --vdd--b-text-tab-active: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
226
+ --vdd--b-text-tab-hover: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
227
+ --vdd--b-text-tab-inactive: color-mix(in srgb, var(--vdd-brand-text) 62%, var(--vdd--b-base));
228
+ --vdd--b-toast-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 10%);
229
+ --vdd--b-window-bg: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 6%);
230
+ --vdd--b-window-border: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 14%);
231
+ --vdd--b-window-border-focused: color-mix(in srgb, var(--vdd--b-base), var(--vdd-brand-text) 30%);
232
+ --vdd--b-window-header-bg: color-mix(in srgb, var(--vdd--b-base), black 10%);
233
+ --vdd--b-window-text: color-mix(in srgb, var(--vdd-brand-text) 100%, var(--vdd--b-base));
234
+ }
235
+
167
236
  /* Every element the library renders carries an vdd- prefixed class (see
168
237
  CLAUDE.md's prefix convention) — this targets exactly those elements
169
238
  directly, never their descendants, so a consumer's own content nested
@@ -205,6 +274,14 @@
205
274
  overflow: hidden;
206
275
  }
207
276
 
277
+ /* Form controls don't inherit a font by default. Only the library's own controls (those with a
278
+ vdd- class) are told to, never the consumer's inputs and buttons inside a panel. Without it the
279
+ rail and toolbar buttons kept the browser's button font whatever --vdd-font-family said
280
+ (rdd 6.4.0; found by the M15 branding gate). */
281
+ :where(button, input, select, textarea)[class*="vdd-"] {
282
+ font-family: inherit;
283
+ }
284
+
208
285
  /* Cosmetic properties are scoped to the library's own root element only — never
209
286
  the consumer's page, html/body, or their own mount div. */
210
287
  .vdd-workspace {
@@ -371,7 +448,7 @@
371
448
  opacity: 0; /* hidden by default on inactive tabs, allows hover/active overrides */
372
449
  transition: opacity 0.12s ease, background-color 0.12s ease, color 0.12s ease;
373
450
  margin-left: 8px;
374
- border-radius: 3px;
451
+ border-radius: calc(3px * var(--vdd-radius-scale, 1));
375
452
  color: var(--vdd-close-btn-color) !important;
376
453
  display: flex;
377
454
  align-items: center;
@@ -471,7 +548,7 @@ body.vdd-resizing-col-active * {
471
548
  font-size: 9px;
472
549
  width: 18px;
473
550
  height: 18px;
474
- border-radius: 4px;
551
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
475
552
  display: flex;
476
553
  align-items: center;
477
554
  justify-content: center;
@@ -585,14 +662,14 @@ body.vdd-resizing-col-active * {
585
662
  display: flex;
586
663
  align-items: center;
587
664
  justify-content: center;
588
- border-radius: 4px;
665
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
589
666
  cursor: pointer;
590
667
  }
591
668
 
592
669
  .vdd-taskbar-glassmorphic-item:hover {
593
670
  background: var(--vdd-taskbar-item-hover-bg) !important;
594
671
  border-color: var(--vdd-accent-color, #38bdf8) !important;
595
- box-shadow: 0 6px 16px rgba(56, 189, 248, 0.15);
672
+ box-shadow: 0 6px 16px color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
596
673
  }
597
674
 
598
675
  /* Minimalist Taskbar Icon-Only & Premium Tooltip Rules */
@@ -647,7 +724,7 @@ body.vdd-resizing-col-active * {
647
724
  background: var(--vdd-bg-panel, #1e1e1e) !important;
648
725
  color: var(--vdd-text-primary, #ffffff) !important;
649
726
  padding: 8px !important;
650
- border-radius: 6px;
727
+ border-radius: calc(6px * var(--vdd-radius-scale, 1));
651
728
  font-size: 11px !important;
652
729
  font-family: var(--vdd-font-family);
653
730
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
@@ -697,7 +774,7 @@ body.vdd-resizing-col-active * {
697
774
  * See docs/PARITY.md divergence D11.
698
775
  */
699
776
  .vdd-taskbar-item-preview-frame {
700
- border-radius: 4px;
777
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
701
778
  overflow: hidden;
702
779
  background: #000000;
703
780
  border: 1px solid var(--vdd-taskbar-item-border, rgba(255, 255, 255, 0.15));
@@ -727,7 +804,7 @@ body.vdd-resizing-col-active * {
727
804
  .vdd-tooltip-close-x {
728
805
  width: 18px;
729
806
  height: 18px;
730
- border-radius: 3px;
807
+ border-radius: calc(3px * var(--vdd-radius-scale, 1));
731
808
  background: transparent !important;
732
809
  border: none !important;
733
810
  color: var(--vdd-close-btn-color, var(--vdd-text-secondary, #888888)) !important;
@@ -774,7 +851,7 @@ body.vdd-resizing-col-active * {
774
851
  .vdd-workspace ::-webkit-scrollbar-thumb,
775
852
  .vdd-sidebar-drawer-body::-webkit-scrollbar-thumb {
776
853
  background: var(--vdd-scrollbar-thumb);
777
- border-radius: 4px;
854
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
778
855
  }
779
856
  .vdd-workspace ::-webkit-scrollbar-thumb:hover,
780
857
  .vdd-sidebar-drawer-body::-webkit-scrollbar-thumb:hover {
@@ -784,7 +861,7 @@ body.vdd-resizing-col-active * {
784
861
  .vdd-floating-window {
785
862
  display: flex;
786
863
  flex-direction: column;
787
- border-radius: 8px;
864
+ border-radius: calc(8px * var(--vdd-radius-scale, 1));
788
865
  border: 1px solid var(--vdd-window-border);
789
866
  box-shadow: var(--vdd-window-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
790
867
  backdrop-filter: blur(16px) saturate(180%);
@@ -860,7 +937,7 @@ body.vdd-resizing-col-active * {
860
937
  z-index: calc(var(--vdd-z-base, 1000) + 8500);
861
938
  background: var(--vdd-sidebar-bg, #1e2024);
862
939
  border: 1px solid var(--vdd-sidebar-border, rgba(255, 255, 255, 0.08));
863
- border-radius: 6px;
940
+ border-radius: calc(6px * var(--vdd-radius-scale, 1));
864
941
  padding: 4px 0;
865
942
  min-width: 220px;
866
943
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
@@ -895,7 +972,7 @@ body.vdd-resizing-col-active * {
895
972
  gap: 8px;
896
973
  background: none;
897
974
  border: none;
898
- border-radius: 4px;
975
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
899
976
  color: var(--vdd-sidebar-text-title, #cccccc);
900
977
  cursor: pointer;
901
978
  text-align: start;
@@ -995,13 +1072,13 @@ body.vdd-resizing-col-active * {
995
1072
  justify-content: center;
996
1073
  background-color: rgba(0, 0, 0, 0.15);
997
1074
  pointer-events: none;
998
- border-radius: 4px;
1075
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
999
1076
  }
1000
1077
 
1001
1078
  /* Translucent overlay preview highlighting the grid section about to split */
1002
1079
  .vdd-dock-preview-highlight {
1003
1080
  position: absolute;
1004
- background-color: rgba(56, 189, 248, 0.2) !important; /* neon cyan overlay */
1081
+ background-color: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent) !important; /* accent overlay */
1005
1082
  border: 1.5px dashed var(--vdd-accent-color) !important;
1006
1083
  transition: all 0.1s ease-out;
1007
1084
  pointer-events: none;
@@ -1019,9 +1096,9 @@ body.vdd-resizing-col-active * {
1019
1096
  /* Visual split target buttons (top, bottom, left, right, center) */
1020
1097
  .vdd-dock-target-box {
1021
1098
  position: absolute;
1022
- background-color: rgba(15, 23, 42, 0.92);
1099
+ background-color: color-mix(in srgb, var(--vdd--b-dock-target-bg, rgb(15 23 42)) 92%, transparent);
1023
1100
  border: 1px solid rgba(255, 255, 255, 0.15);
1024
- border-radius: 4px;
1101
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
1025
1102
  display: flex;
1026
1103
  align-items: center;
1027
1104
  justify-content: center;
@@ -1037,7 +1114,7 @@ body.vdd-resizing-col-active * {
1037
1114
  .vdd-dock-target-box--active {
1038
1115
  background-color: var(--vdd-accent-color) !important;
1039
1116
  border-color: #ffffff !important;
1040
- color: #090b11 !important;
1117
+ color: var(--vdd-brand-on-accent, #090b11) !important;
1041
1118
  transform: scale(1.12);
1042
1119
  box-shadow: 0 0 12px var(--vdd-accent-color);
1043
1120
  }
@@ -1072,7 +1149,7 @@ body.vdd-resizing-col-active * {
1072
1149
  top: 45px;
1073
1150
  width: 50px;
1074
1151
  height: 50px;
1075
- background-color: rgba(30, 41, 59, 0.95);
1152
+ background-color: color-mix(in srgb, var(--vdd--b-dock-target-center-bg, rgb(30 41 59)) 95%, transparent);
1076
1153
  color: var(--vdd-accent-color);
1077
1154
  }
1078
1155
 
@@ -1118,47 +1195,49 @@ body.vdd-dragging-active {
1118
1195
 
1119
1196
 
1120
1197
  [data-color-scheme="light"] {
1121
- --vdd-bg-primary: #f8f9fa;
1122
- --vdd-bg-workspace: #f1f5f9;
1123
- --vdd-bg-panel: #ffffff;
1124
- --vdd-bg-tab-bar: #e9ecef;
1125
- --vdd-text-primary: #212529;
1126
- --vdd-text-secondary: #6c757d;
1198
+ /* The default skin's light-mode accent (the blue its light tokens were already drawn in). */
1199
+ --vdd-accent-color: var(--vdd-brand-accent, #0066cc);
1200
+ --vdd-bg-primary: var(--vdd--b-bg-primary, #f8f9fa);
1201
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #f1f5f9);
1202
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #ffffff);
1203
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #e9ecef);
1204
+ --vdd-text-primary: var(--vdd--b-text-primary, #212529);
1205
+ --vdd-text-secondary: var(--vdd--b-text-secondary, #6c757d);
1127
1206
  --vdd-border-color: rgba(0, 0, 0, 0.08);
1128
1207
 
1129
- --vdd-sidebar-bg: #f8f9fa;
1130
- --vdd-sidebar-tabs-bg: #e9ecef;
1208
+ --vdd-sidebar-bg: var(--vdd--b-sidebar-bg, #f8f9fa);
1209
+ --vdd-sidebar-tabs-bg: var(--vdd--b-sidebar-tabs-bg, #e9ecef);
1131
1210
  --vdd-sidebar-border: rgba(0, 0, 0, 0.08);
1132
- --vdd-sidebar-card-bg: #ffffff;
1211
+ --vdd-sidebar-card-bg: var(--vdd--b-sidebar-card-bg, #ffffff);
1133
1212
  --vdd-sidebar-card-border: rgba(0, 0, 0, 0.08);
1134
- --vdd-sidebar-card-active-bg: rgba(0, 102, 204, 0.05);
1135
- --vdd-sidebar-card-active-border: rgba(0, 102, 204, 0.3);
1136
- --vdd-sidebar-text-title: #212529;
1137
- --vdd-sidebar-text-muted: #6c757d;
1138
- --vdd-sidebar-badge-bg: #e9ecef;
1139
- --vdd-sidebar-badge-text: #495057;
1140
- --vdd-sidebar-btn-front-border: #0066cc;
1141
- --vdd-sidebar-btn-front-text: #0066cc;
1213
+ --vdd-sidebar-card-active-bg: color-mix(in srgb, var(--vdd-accent-color) 5%, transparent);
1214
+ --vdd-sidebar-card-active-border: color-mix(in srgb, var(--vdd-accent-color) 30%, transparent);
1215
+ --vdd-sidebar-text-title: var(--vdd--b-sidebar-text-title, #212529);
1216
+ --vdd-sidebar-text-muted: var(--vdd--b-sidebar-text-muted, #6c757d);
1217
+ --vdd-sidebar-badge-bg: var(--vdd--b-sidebar-badge-bg, #e9ecef);
1218
+ --vdd-sidebar-badge-text: var(--vdd--b-sidebar-badge-text, #495057);
1219
+ --vdd-sidebar-btn-front-border: var(--vdd-accent-color);
1220
+ --vdd-sidebar-btn-front-text: var(--vdd-accent-color);
1142
1221
  --vdd-sidebar-btn-front-bg: transparent;
1143
- --vdd-sidebar-btn-front-hover-bg: rgba(0, 102, 204, 0.08);
1144
- --vdd-tab-icon-active: #0066cc;
1145
- --vdd-tab-icon-inactive: #555c66;
1146
- --vdd-tab-btn-active-bg: #f8f9fa; /* Seamless merge look */
1222
+ --vdd-sidebar-btn-front-hover-bg: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1223
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1224
+ --vdd-tab-icon-inactive: var(--vdd--b-tab-icon-inactive, #555c66);
1225
+ --vdd-tab-btn-active-bg: var(--vdd--b-tab-btn-active-bg, #f8f9fa); /* Seamless merge look */
1147
1226
  --vdd-sidebar-btn-hover-bg: rgba(0, 0, 0, 0.05);
1148
- --vdd-sidebar-card-hover-border: rgba(0, 102, 204, 0.3);
1227
+ --vdd-sidebar-card-hover-border: color-mix(in srgb, var(--vdd-accent-color) 30%, transparent);
1149
1228
  --vdd-sidebar-card-hover-bg: rgba(0, 0, 0, 0.03);
1150
- --vdd-sidebar-card-active-shadow: rgba(0, 102, 204, 0.08);
1229
+ --vdd-sidebar-card-active-shadow: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1151
1230
  --vdd-sidebar-drawer-header-bg: rgba(0, 0, 0, 0.04);
1152
1231
  --vdd-toolbar-btn-hover-bg: rgba(0, 0, 0, 0.05);
1153
- --vdd-toolbar-btn-radio-active-bg: rgba(0, 102, 204, 0.1);
1154
- --vdd-toolbar-btn-toggle-active-bg: rgba(0, 102, 204, 0.06);
1232
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1233
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1155
1234
  --vdd-toolbar-separator-color: rgba(0, 0, 0, 0.1);
1156
1235
  /* Light skin window overrides */
1157
- --vdd-window-bg: rgba(243, 244, 246, var(--vdd-window-opacity, 0.9));
1236
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(243 244 246)) calc(var(--vdd-window-opacity, 0.9) * 100%), transparent);
1158
1237
  --vdd-window-border: rgba(0, 0, 0, 0.08);
1159
1238
  --vdd-window-border-focused: rgba(0, 0, 0, 0.28);
1160
1239
  --vdd-window-header-bg: rgba(0, 0, 0, 0.04);
1161
- --vdd-window-text: #212529;
1240
+ --vdd-window-text: var(--vdd--b-window-text, #212529);
1162
1241
  --vdd-window-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
1163
1242
  --vdd-window-shadow-focused: 0 16px 36px rgba(0, 0, 0, 0.12);
1164
1243
  /* Light skin modal overrides */
@@ -1167,44 +1246,44 @@ body.vdd-dragging-active {
1167
1246
  --vdd-modal-border: rgba(0, 0, 0, 0.1);
1168
1247
  --vdd-modal-header-bg: rgba(0, 0, 0, 0.04);
1169
1248
  --vdd-modal-header-border: rgba(0, 0, 0, 0.08);
1170
- --vdd-modal-close-hover-color: #212529;
1249
+ --vdd-modal-close-hover-color: var(--vdd--b-modal-close-hover-color, #212529);
1171
1250
  /* Light skin side panel overrides */
1172
1251
  --vdd-side-panel-bg: rgba(255, 255, 255, 0.97);
1173
1252
  --vdd-side-panel-border: rgba(0, 0, 0, 0.1);
1174
1253
  --vdd-side-panel-header-bg: rgba(0, 0, 0, 0.04);
1175
1254
  --vdd-side-panel-header-border: rgba(0, 0, 0, 0.08);
1176
- --vdd-side-panel-close-hover-color: #212529;
1255
+ --vdd-side-panel-close-hover-color: var(--vdd--b-side-panel-close-hover-color, #212529);
1177
1256
  /* Light skin grid/docked panel overrides */
1178
1257
  --vdd-border-panel: rgba(0, 0, 0, 0.08);
1179
- --vdd-bg-tab-inactive: #e9ecef;
1180
- --vdd-text-tab-inactive: #495057;
1181
- --vdd-text-tab-active: #212529;
1258
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #e9ecef);
1259
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #495057);
1260
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #212529);
1182
1261
  /* Light skin tab and control button hover colors */
1183
- --vdd-bg-tab-hover: #dee2e6;
1184
- --vdd-text-tab-hover: #212529;
1262
+ --vdd-bg-tab-hover: var(--vdd--b-bg-tab-hover, #dee2e6);
1263
+ --vdd-text-tab-hover: var(--vdd--b-text-tab-hover, #212529);
1185
1264
  --vdd-close-btn-hover-bg: rgba(0, 0, 0, 0.08);
1186
- --vdd-close-btn-hover-color: #212529;
1187
- --vdd-close-btn-color: #6c757d;
1188
- --vdd-close-btn-active-color: #212529;
1189
- --vdd-tab-indicator-focused: #0066cc;
1265
+ --vdd-close-btn-hover-color: var(--vdd--b-close-btn-hover-color, #212529);
1266
+ --vdd-close-btn-color: var(--vdd--b-close-btn-color, #6c757d);
1267
+ --vdd-close-btn-active-color: var(--vdd--b-close-btn-active-color, #212529);
1268
+ --vdd-tab-indicator-focused: var(--vdd-accent-color);
1190
1269
  --vdd-tab-indicator-unfocused: rgba(0, 0, 0, 0.25);
1191
1270
  --vdd-tab-bg-active-focused: var(--vdd-bg-panel);
1192
- --vdd-tab-bg-active-unfocused: rgba(220, 224, 230, 0.65);
1193
- --vdd-tab-text-active-focused: #212529;
1194
- --vdd-tab-text-active-unfocused: #6c757d;
1271
+ --vdd-tab-bg-active-unfocused: color-mix(in srgb, var(--vdd--b-tab-bg-active-unfocused, rgb(220 224 230)) 65%, transparent);
1272
+ --vdd-tab-text-active-focused: var(--vdd--b-tab-text-active-focused, #212529);
1273
+ --vdd-tab-text-active-unfocused: var(--vdd--b-tab-text-active-unfocused, #6c757d);
1195
1274
  --vdd-resizer-bg: rgba(0, 0, 0, 0.08);
1196
1275
  --vdd-custom-btn-bg: rgba(0, 0, 0, 0.03);
1197
1276
  --vdd-custom-btn-border: rgba(0, 0, 0, 0.08);
1198
1277
  --vdd-custom-btn-hover-bg: rgba(0, 0, 0, 0.08);
1199
- --vdd-custom-btn-hover-color: #212529;
1278
+ --vdd-custom-btn-hover-color: var(--vdd--b-custom-btn-hover-color, #212529);
1200
1279
  /* Light skin taskbar theme variables */
1201
- --vdd-taskbar-bg: rgba(248, 249, 250, 0.85);
1280
+ --vdd-taskbar-bg: color-mix(in srgb, var(--vdd--b-taskbar-bg, rgb(248 249 250)) 85%, transparent);
1202
1281
  --vdd-taskbar-border: rgba(0, 0, 0, 0.08);
1203
1282
  --vdd-taskbar-nav-color: rgba(0, 0, 0, 0.5);
1204
1283
  --vdd-taskbar-item-bg: rgba(255, 255, 255, 0.65);
1205
1284
  --vdd-taskbar-item-hover-bg: rgba(255, 255, 255, 0.85);
1206
1285
  --vdd-taskbar-item-border: rgba(0, 0, 0, 0.08);
1207
- --vdd-taskbar-item-text: #0066cc;
1286
+ --vdd-taskbar-item-text: var(--vdd-accent-color);
1208
1287
  /* Light skin scrollbar theme variables */
1209
1288
  --vdd-scrollbar-thumb: rgba(0, 0, 0, 0.15);
1210
1289
  --vdd-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
@@ -1212,8 +1291,8 @@ body.vdd-dragging-active {
1212
1291
  /* Light skin mockup panel inner theme variables */
1213
1292
  --vdd-panel-card-bg: rgba(0, 0, 0, 0.03);
1214
1293
  --vdd-panel-card-border: rgba(0, 0, 0, 0.08);
1215
- --vdd-panel-text: #212529;
1216
- --vdd-panel-title-color: #0066cc;
1294
+ --vdd-panel-text: var(--vdd--b-panel-text, #212529);
1295
+ --vdd-panel-title-color: var(--vdd-accent-color);
1217
1296
  /* ── Panel Overlay — Toolbar (light) ── */
1218
1297
  --vdd-panel-toolbar-fg: rgba(0, 0, 0, 0.55);
1219
1298
  --vdd-panel-toolbar-fg-hover: rgba(0, 0, 0, 0.85);
@@ -1234,74 +1313,76 @@ body.vdd-dragging-active {
1234
1313
  SKIN 1: VS Code (Default Variables matching :root)
1235
1314
  -------------------------------------------------------------------------- */
1236
1315
  [data-vdd-skin="vscode"] {
1237
- /* Inherits everything from :root */
1316
+ --vdd-skin-font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif; /* VS Code's workbench font */
1317
+ /* Otherwise inherits everything from :root */
1238
1318
  }
1239
1319
 
1240
1320
  /* --------------------------------------------------------------------------
1241
1321
  SKIN 2: macOS / Glassmorphic Preset
1242
1322
  -------------------------------------------------------------------------- */
1243
1323
  [data-vdd-skin="macos"] {
1244
- --vdd-bg-workspace: #1a1a24;
1245
- --vdd-bg-panel: rgba(30, 30, 40, 0.45);
1246
- --vdd-bg-tab-bar: rgba(18, 18, 24, 0.3);
1247
- --vdd-window-bg: rgba(25, 25, 35, var(--vdd-window-opacity, 0.7));
1324
+ --vdd-skin-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* San Francisco */
1325
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #1a1a24);
1326
+ --vdd-bg-panel: color-mix(in srgb, var(--vdd--b-bg-panel, rgb(30 30 40)) 45%, transparent);
1327
+ --vdd-bg-tab-bar: color-mix(in srgb, var(--vdd--b-bg-tab-bar, rgb(18 18 24)) 30%, transparent);
1328
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(25 25 35)) calc(var(--vdd-window-opacity, 0.7) * 100%), transparent);
1248
1329
  --vdd-window-border: rgba(255, 255, 255, 0.1);
1249
1330
  --vdd-window-header-bg: rgba(0, 0, 0, 0.15);
1250
- --vdd-accent-color: #38bdf8;
1251
- --vdd-accent-glow: rgba(56, 189, 248, 0.25);
1331
+ --vdd-accent-color: var(--vdd-brand-accent, #38bdf8);
1332
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 25%, transparent);
1252
1333
  --vdd-border-panel: rgba(255, 255, 255, 0.08);
1253
1334
  --vdd-bg-tab-inactive: transparent;
1254
- --vdd-text-tab-inactive: #94a3b8;
1255
- --vdd-text-tab-active: #ffffff;
1335
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #94a3b8);
1336
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #ffffff);
1256
1337
  --vdd-window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
1257
- --vdd-window-shadow-focused: 0 24px 50px rgba(56, 189, 248, 0.15);
1338
+ --vdd-window-shadow-focused: 0 24px 50px color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1258
1339
  --vdd-panel-card-bg: rgba(255, 255, 255, 0.03);
1259
1340
  --vdd-panel-card-border: rgba(255, 255, 255, 0.08);
1260
1341
  }
1261
1342
 
1262
1343
  [data-vdd-skin="macos"][data-color-scheme="light"] {
1263
- --vdd-bg-primary: #f3f4f6;
1264
- --vdd-bg-workspace: #e5e7eb;
1344
+ --vdd-bg-primary: var(--vdd--b-bg-primary, #f3f4f6);
1345
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #e5e7eb);
1265
1346
  --vdd-bg-panel: rgba(255, 255, 255, 0.7);
1266
- --vdd-bg-tab-bar: rgba(229, 231, 235, 0.5);
1267
- --vdd-window-bg: rgba(255, 255, 255, var(--vdd-window-opacity, 0.85));
1347
+ --vdd-bg-tab-bar: color-mix(in srgb, var(--vdd--b-bg-tab-bar, rgb(229 231 235)) 50%, transparent);
1348
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(255 255 255)) calc(var(--vdd-window-opacity, 0.85) * 100%), transparent);
1268
1349
  --vdd-window-border: rgba(0, 0, 0, 0.12);
1269
- --vdd-window-header-bg: rgba(243, 244, 246, 0.5);
1270
- --vdd-accent-color: #0066cc;
1271
- --vdd-accent-glow: rgba(0, 102, 204, 0.15);
1350
+ --vdd-window-header-bg: color-mix(in srgb, var(--vdd--b-window-header-bg, rgb(243 244 246)) 50%, transparent);
1351
+ --vdd-accent-color: var(--vdd-brand-accent, #0066cc);
1352
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1272
1353
  --vdd-border-panel: rgba(0, 0, 0, 0.1);
1273
1354
  --vdd-bg-tab-inactive: transparent;
1274
- --vdd-text-tab-inactive: #4b5563;
1275
- --vdd-text-tab-active: #111827;
1276
- --vdd-window-text: #111827;
1355
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #4b5563);
1356
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #111827);
1357
+ --vdd-window-text: var(--vdd--b-window-text, #111827);
1277
1358
  --vdd-window-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
1278
- --vdd-window-shadow-focused: 0 16px 36px rgba(0, 102, 204, 0.18);
1359
+ --vdd-window-shadow-focused: 0 16px 36px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent);
1279
1360
  --vdd-panel-card-bg: rgba(0, 0, 0, 0.04);
1280
1361
  --vdd-panel-card-border: rgba(0, 0, 0, 0.08);
1281
- --vdd-panel-text: #111827;
1282
- --vdd-panel-title-color: #0066cc;
1283
- --vdd-close-btn-color: #4b5563;
1284
- --vdd-close-btn-active-color: #111827;
1362
+ --vdd-panel-text: var(--vdd--b-panel-text, #111827);
1363
+ --vdd-panel-title-color: var(--vdd-accent-color);
1364
+ --vdd-close-btn-color: var(--vdd--b-close-btn-color, #4b5563);
1365
+ --vdd-close-btn-active-color: var(--vdd--b-close-btn-active-color, #111827);
1285
1366
  }
1286
1367
 
1287
1368
  /* macOS structural adjustments */
1288
1369
  [data-vdd-skin="macos"] .vdd-floating-window {
1289
- border-radius: 12px;
1370
+ border-radius: calc(12px * var(--vdd-radius-scale, 1));
1290
1371
  backdrop-filter: blur(20px) saturate(180%);
1291
1372
  -webkit-backdrop-filter: blur(20px) saturate(180%);
1292
1373
  border-color: var(--vdd-window-border);
1293
1374
  }
1294
1375
  [data-vdd-skin="macos"] .vdd-floating-window-titlebar {
1295
- border-top-left-radius: 12px;
1296
- border-top-right-radius: 12px;
1376
+ border-top-left-radius: calc(12px * var(--vdd-radius-scale, 1));
1377
+ border-top-right-radius: calc(12px * var(--vdd-radius-scale, 1));
1297
1378
  }
1298
1379
  [data-vdd-skin="macos"] .vdd-workspace-panel {
1299
- border-radius: 8px;
1380
+ border-radius: calc(8px * var(--vdd-radius-scale, 1));
1300
1381
  backdrop-filter: blur(12px) saturate(180%);
1301
1382
  -webkit-backdrop-filter: blur(12px) saturate(180%);
1302
1383
  }
1303
1384
  [data-vdd-skin="macos"] .vdd-workspace-tab {
1304
- border-radius: 6px !important;
1385
+ border-radius: calc(6px * var(--vdd-radius-scale, 1)) !important;
1305
1386
  margin: 4px 4px 4px 4px !important;
1306
1387
  height: 28px !important;
1307
1388
  border: 1px solid var(--vdd-border-panel) !important;
@@ -1389,50 +1470,51 @@ body.vdd-dragging-active {
1389
1470
  SKIN 3: Chrome / Browser-Style Preset
1390
1471
  -------------------------------------------------------------------------- */
1391
1472
  [data-vdd-skin="chrome"] {
1392
- --vdd-bg-workspace: #202124;
1393
- --vdd-bg-panel: #292a2d;
1394
- --vdd-bg-tab-bar: #202124;
1395
- --vdd-window-bg: rgba(41, 42, 45, var(--vdd-window-opacity, 1.0));
1396
- --vdd-window-border: #3c4043;
1397
- --vdd-window-header-bg: #202124;
1398
- --vdd-accent-color: #8ab4f8;
1399
- --vdd-accent-glow: rgba(138, 180, 248, 0.15);
1400
- --vdd-border-panel: #3c4043;
1401
- --vdd-bg-tab-inactive: #202124;
1402
- --vdd-text-tab-inactive: #9aa0a6;
1403
- --vdd-text-tab-active: #ffffff;
1404
- --vdd-panel-card-bg: #202124;
1405
- --vdd-panel-card-border: #3c4043;
1406
- --vdd-window-text: #ffffff;
1407
- --vdd-panel-text: #e8eaed;
1408
- --vdd-tab-icon-active: #8ab4f8;
1409
- --vdd-toolbar-btn-radio-active-bg: rgba(138, 180, 248, 0.14);
1410
- --vdd-toolbar-btn-toggle-active-bg: rgba(138, 180, 248, 0.08);
1473
+ --vdd-skin-font-family: 'Google Sans Text', 'Google Sans', Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif; /* Google's UI fonts */
1474
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #202124);
1475
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #292a2d);
1476
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #202124);
1477
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(41 42 45)) calc(var(--vdd-window-opacity, 1.0) * 100%), transparent);
1478
+ --vdd-window-border: var(--vdd--b-window-border, #3c4043);
1479
+ --vdd-window-header-bg: var(--vdd--b-window-header-bg, #202124);
1480
+ --vdd-accent-color: var(--vdd-brand-accent, #8ab4f8);
1481
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1482
+ --vdd-border-panel: var(--vdd--b-border-panel, #3c4043);
1483
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #202124);
1484
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #9aa0a6);
1485
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #ffffff);
1486
+ --vdd-panel-card-bg: var(--vdd--b-panel-card-bg, #202124);
1487
+ --vdd-panel-card-border: var(--vdd--b-panel-card-border, #3c4043);
1488
+ --vdd-window-text: var(--vdd--b-window-text, #ffffff);
1489
+ --vdd-panel-text: var(--vdd--b-panel-text, #e8eaed);
1490
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1491
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
1492
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1411
1493
  }
1412
1494
 
1413
1495
  [data-vdd-skin="chrome"][data-color-scheme="light"] {
1414
- --vdd-bg-workspace: #dee1e6;
1415
- --vdd-bg-panel: #ffffff;
1416
- --vdd-bg-tab-bar: #dee1e6;
1417
- --vdd-window-bg: rgba(255, 255, 255, var(--vdd-window-opacity, 1.0));
1418
- --vdd-window-border: #cbd5e1;
1419
- --vdd-window-header-bg: #dee1e6;
1420
- --vdd-accent-color: #1a73e8;
1421
- --vdd-accent-glow: rgba(26, 115, 232, 0.15);
1422
- --vdd-border-panel: #dadce0;
1423
- --vdd-bg-tab-inactive: #dee1e6;
1424
- --vdd-text-tab-inactive: #474747;
1425
- --vdd-text-tab-active: #1f1f1f;
1426
- --vdd-panel-card-bg: #f1f3f4;
1427
- --vdd-panel-card-border: #dadce0;
1428
- --vdd-window-text: #1f1f1f;
1429
- --vdd-panel-text: #1f1f1f;
1430
- --vdd-panel-title-color: #1a73e8;
1431
- --vdd-close-btn-color: #474747;
1432
- --vdd-close-btn-active-color: #1f1f1f;
1433
- --vdd-tab-icon-active: #1a73e8;
1434
- --vdd-toolbar-btn-radio-active-bg: rgba(26, 115, 232, 0.12);
1435
- --vdd-toolbar-btn-toggle-active-bg: rgba(26, 115, 232, 0.07);
1496
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #dee1e6);
1497
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #ffffff);
1498
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #dee1e6);
1499
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(255 255 255)) calc(var(--vdd-window-opacity, 1.0) * 100%), transparent);
1500
+ --vdd-window-border: var(--vdd--b-window-border, #cbd5e1);
1501
+ --vdd-window-header-bg: var(--vdd--b-window-header-bg, #dee1e6);
1502
+ --vdd-accent-color: var(--vdd-brand-accent, #1a73e8);
1503
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1504
+ --vdd-border-panel: var(--vdd--b-border-panel, #dadce0);
1505
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #dee1e6);
1506
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #474747);
1507
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #1f1f1f);
1508
+ --vdd-panel-card-bg: var(--vdd--b-panel-card-bg, #f1f3f4);
1509
+ --vdd-panel-card-border: var(--vdd--b-panel-card-border, #dadce0);
1510
+ --vdd-window-text: var(--vdd--b-window-text, #1f1f1f);
1511
+ --vdd-panel-text: var(--vdd--b-panel-text, #1f1f1f);
1512
+ --vdd-panel-title-color: var(--vdd-accent-color);
1513
+ --vdd-close-btn-color: var(--vdd--b-close-btn-color, #474747);
1514
+ --vdd-close-btn-active-color: var(--vdd--b-close-btn-active-color, #1f1f1f);
1515
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1516
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1517
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 7%, transparent);
1436
1518
  }
1437
1519
 
1438
1520
  /* Chrome tab angled geometry shapes */
@@ -1453,47 +1535,48 @@ body.vdd-dragging-active {
1453
1535
  SKIN 4: Fluent Slate Preset
1454
1536
  -------------------------------------------------------------------------- */
1455
1537
  [data-vdd-skin="slate"] {
1456
- --vdd-bg-workspace: #0f172a;
1457
- --vdd-bg-panel: #1e293b;
1458
- --vdd-bg-tab-bar: #0f172a;
1459
- --vdd-window-bg: rgba(30, 41, 59, var(--vdd-window-opacity, 1.0));
1460
- --vdd-window-border: #334155;
1461
- --vdd-window-header-bg: #1e293b;
1462
- --vdd-accent-color: #38bdf8;
1463
- --vdd-accent-glow: rgba(56, 189, 248, 0.15);
1464
- --vdd-border-panel: #334155;
1465
- --vdd-bg-tab-inactive: #1e293b;
1466
- --vdd-text-tab-inactive: #64748b;
1467
- --vdd-text-tab-active: #f8fafc;
1468
- --vdd-panel-card-bg: #0f172a;
1469
- --vdd-panel-card-border: #334155;
1470
- --vdd-window-text: #f8fafc;
1471
- --vdd-panel-text: #f8fafc;
1538
+ --vdd-skin-font-family: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif; /* Fluent's stack */
1539
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #0f172a);
1540
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #1e293b);
1541
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #0f172a);
1542
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(30 41 59)) calc(var(--vdd-window-opacity, 1.0) * 100%), transparent);
1543
+ --vdd-window-border: var(--vdd--b-window-border, #334155);
1544
+ --vdd-window-header-bg: var(--vdd--b-window-header-bg, #1e293b);
1545
+ --vdd-accent-color: var(--vdd-brand-accent, #38bdf8);
1546
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1547
+ --vdd-border-panel: var(--vdd--b-border-panel, #334155);
1548
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #1e293b);
1549
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #64748b);
1550
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #f8fafc);
1551
+ --vdd-panel-card-bg: var(--vdd--b-panel-card-bg, #0f172a);
1552
+ --vdd-panel-card-border: var(--vdd--b-panel-card-border, #334155);
1553
+ --vdd-window-text: var(--vdd--b-window-text, #f8fafc);
1554
+ --vdd-panel-text: var(--vdd--b-panel-text, #f8fafc);
1472
1555
  }
1473
1556
 
1474
1557
  [data-vdd-skin="slate"][data-color-scheme="light"] {
1475
- --vdd-bg-workspace: #f1f5f9;
1476
- --vdd-bg-panel: #ffffff;
1477
- --vdd-bg-tab-bar: #f1f5f9;
1478
- --vdd-window-bg: rgba(255, 255, 255, var(--vdd-window-opacity, 1.0));
1479
- --vdd-window-border: #cbd5e1;
1480
- --vdd-window-header-bg: #f8fafc;
1481
- --vdd-accent-color: #0078d4;
1482
- --vdd-accent-glow: rgba(0, 120, 212, 0.15);
1483
- --vdd-border-panel: #e2e8f0;
1484
- --vdd-bg-tab-inactive: #f8fafc;
1485
- --vdd-text-tab-inactive: #475569;
1486
- --vdd-text-tab-active: #0f172a;
1487
- --vdd-panel-card-bg: #f8fafc;
1488
- --vdd-panel-card-border: #cbd5e1;
1489
- --vdd-window-text: #0f172a;
1490
- --vdd-panel-text: #0f172a;
1491
- --vdd-panel-title-color: #0078d4;
1492
- --vdd-close-btn-color: #475569;
1493
- --vdd-close-btn-active-color: #0f172a;
1494
- --vdd-tab-icon-active: #0078d4;
1495
- --vdd-toolbar-btn-radio-active-bg: rgba(0, 120, 212, 0.10);
1496
- --vdd-toolbar-btn-toggle-active-bg: rgba(0, 120, 212, 0.06);
1558
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #f1f5f9);
1559
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #ffffff);
1560
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #f1f5f9);
1561
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(255 255 255)) calc(var(--vdd-window-opacity, 1.0) * 100%), transparent);
1562
+ --vdd-window-border: var(--vdd--b-window-border, #cbd5e1);
1563
+ --vdd-window-header-bg: var(--vdd--b-window-header-bg, #f8fafc);
1564
+ --vdd-accent-color: var(--vdd-brand-accent, #0078d4);
1565
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1566
+ --vdd-border-panel: var(--vdd--b-border-panel, #e2e8f0);
1567
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #f8fafc);
1568
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #475569);
1569
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #0f172a);
1570
+ --vdd-panel-card-bg: var(--vdd--b-panel-card-bg, #f8fafc);
1571
+ --vdd-panel-card-border: var(--vdd--b-panel-card-border, #cbd5e1);
1572
+ --vdd-window-text: var(--vdd--b-window-text, #0f172a);
1573
+ --vdd-panel-text: var(--vdd--b-panel-text, #0f172a);
1574
+ --vdd-panel-title-color: var(--vdd-accent-color);
1575
+ --vdd-close-btn-color: var(--vdd--b-close-btn-color, #475569);
1576
+ --vdd-close-btn-active-color: var(--vdd--b-close-btn-active-color, #0f172a);
1577
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1578
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1579
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1497
1580
  }
1498
1581
 
1499
1582
  [data-vdd-skin="slate"] .vdd-workspace-tab.vdd-active::before {
@@ -1506,123 +1589,124 @@ body.vdd-dragging-active {
1506
1589
  SKIN 5: Nordic Frost Preset (Nord Theme)
1507
1590
  -------------------------------------------------------------------------- */
1508
1591
  [data-vdd-skin="nord"] {
1509
- --vdd-bg-workspace: #2e3440;
1510
- --vdd-bg-panel: #3b4252;
1511
- --vdd-bg-tab-bar: #2e3440;
1512
- --vdd-window-bg: rgba(59, 66, 82, var(--vdd-window-opacity, 1.0));
1513
- --vdd-window-border: #434c5e;
1514
- --vdd-window-header-bg: #2e3440;
1515
- --vdd-accent-color: #88c0d0;
1516
- --vdd-accent-glow: rgba(136, 192, 208, 0.2);
1517
- --vdd-border-panel: #434c5e;
1518
- --vdd-bg-tab-inactive: #2e3440;
1519
- --vdd-text-tab-inactive: #d8dee9;
1520
- --vdd-text-tab-active: #eceff4;
1521
- --vdd-panel-card-bg: #2e3440;
1522
- --vdd-panel-card-border: #4c566a;
1523
- --vdd-close-btn-color: #d8dee9;
1524
- --vdd-close-btn-active-color: #88c0d0;
1525
- --vdd-scrollbar-thumb: rgba(136, 192, 208, 0.25);
1526
- --vdd-scrollbar-thumb-hover: rgba(136, 192, 208, 0.4);
1527
- --vdd-window-text: #eceff4;
1528
- --vdd-panel-text: #eceff4;
1529
- --vdd-tab-icon-active: #88c0d0;
1530
- --vdd-toolbar-btn-radio-active-bg: rgba(136, 192, 208, 0.14);
1531
- --vdd-toolbar-btn-toggle-active-bg: rgba(136, 192, 208, 0.08);
1592
+ --vdd-skin-font-family: 'Avenir Next', 'Nunito', 'Segoe UI', system-ui, sans-serif; /* no official font: a softer humanist sans */
1593
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #2e3440);
1594
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #3b4252);
1595
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #2e3440);
1596
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(59 66 82)) calc(var(--vdd-window-opacity, 1.0) * 100%), transparent);
1597
+ --vdd-window-border: var(--vdd--b-window-border, #434c5e);
1598
+ --vdd-window-header-bg: var(--vdd--b-window-header-bg, #2e3440);
1599
+ --vdd-accent-color: var(--vdd-brand-accent, #88c0d0);
1600
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent);
1601
+ --vdd-border-panel: var(--vdd--b-border-panel, #434c5e);
1602
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #2e3440);
1603
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #d8dee9);
1604
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #eceff4);
1605
+ --vdd-panel-card-bg: var(--vdd--b-panel-card-bg, #2e3440);
1606
+ --vdd-panel-card-border: var(--vdd--b-panel-card-border, #4c566a);
1607
+ --vdd-close-btn-color: var(--vdd--b-close-btn-color, #d8dee9);
1608
+ --vdd-close-btn-active-color: var(--vdd-accent-color);
1609
+ --vdd-scrollbar-thumb: color-mix(in srgb, var(--vdd-accent-color) 25%, transparent);
1610
+ --vdd-scrollbar-thumb-hover: color-mix(in srgb, var(--vdd-accent-color) 40%, transparent);
1611
+ --vdd-window-text: var(--vdd--b-window-text, #eceff4);
1612
+ --vdd-panel-text: var(--vdd--b-panel-text, #eceff4);
1613
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1614
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
1615
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1532
1616
  }
1533
1617
 
1534
1618
  [data-vdd-skin="nord"][data-color-scheme="light"] {
1535
- --vdd-bg-workspace: #e5e9f0;
1536
- --vdd-bg-panel: #eceff4;
1537
- --vdd-bg-tab-bar: #e5e9f0;
1538
- --vdd-window-bg: rgba(236, 239, 244, var(--vdd-window-opacity, 1.0));
1539
- --vdd-window-border: #d8dee9;
1540
- --vdd-window-header-bg: #e5e9f0;
1541
- --vdd-accent-color: #5e81ac;
1542
- --vdd-accent-glow: rgba(94, 129, 172, 0.15);
1543
- --vdd-border-panel: #d8dee9;
1544
- --vdd-bg-tab-inactive: #e5e9f0;
1545
- --vdd-text-tab-inactive: #4c566a;
1546
- --vdd-text-tab-active: #2e3440;
1547
- --vdd-panel-card-bg: #e5e9f0;
1548
- --vdd-panel-card-border: #d8dee9;
1549
- --vdd-close-btn-color: #4c566a;
1550
- --vdd-close-btn-active-color: #5e81ac;
1551
- --vdd-scrollbar-thumb: rgba(94, 129, 172, 0.2);
1552
- --vdd-scrollbar-thumb-hover: rgba(94, 129, 172, 0.35);
1553
- --vdd-window-text: #2e3440;
1554
- --vdd-panel-text: #2e3440;
1555
- --vdd-panel-title-color: #5e81ac;
1556
- --vdd-tab-icon-active: #5e81ac;
1557
- --vdd-toolbar-btn-radio-active-bg: rgba(94, 129, 172, 0.12);
1558
- --vdd-toolbar-btn-toggle-active-bg: rgba(94, 129, 172, 0.07);
1619
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #e5e9f0);
1620
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #eceff4);
1621
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #e5e9f0);
1622
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(236 239 244)) calc(var(--vdd-window-opacity, 1.0) * 100%), transparent);
1623
+ --vdd-window-border: var(--vdd--b-window-border, #d8dee9);
1624
+ --vdd-window-header-bg: var(--vdd--b-window-header-bg, #e5e9f0);
1625
+ --vdd-accent-color: var(--vdd-brand-accent, #5e81ac);
1626
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1627
+ --vdd-border-panel: var(--vdd--b-border-panel, #d8dee9);
1628
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #e5e9f0);
1629
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #4c566a);
1630
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #2e3440);
1631
+ --vdd-panel-card-bg: var(--vdd--b-panel-card-bg, #e5e9f0);
1632
+ --vdd-panel-card-border: var(--vdd--b-panel-card-border, #d8dee9);
1633
+ --vdd-close-btn-color: var(--vdd--b-close-btn-color, #4c566a);
1634
+ --vdd-close-btn-active-color: var(--vdd-accent-color);
1635
+ --vdd-scrollbar-thumb: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent);
1636
+ --vdd-scrollbar-thumb-hover: color-mix(in srgb, var(--vdd-accent-color) 35%, transparent);
1637
+ --vdd-window-text: var(--vdd--b-window-text, #2e3440);
1638
+ --vdd-panel-text: var(--vdd--b-panel-text, #2e3440);
1639
+ --vdd-panel-title-color: var(--vdd-accent-color);
1640
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1641
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1642
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 7%, transparent);
1559
1643
  }
1560
1644
 
1561
1645
  /* --------------------------------------------------------------------------
1562
1646
  SKIN 6: Midnight Obsidian Preset (Vercel Style)
1563
1647
  -------------------------------------------------------------------------- */
1564
1648
  [data-vdd-skin="obsidian"] {
1565
- --vdd-bg-workspace: #000000;
1566
- --vdd-bg-panel: #0a0a0a;
1567
- --vdd-bg-tab-bar: #000000;
1568
- --vdd-window-bg: rgba(10, 10, 10, var(--vdd-window-opacity, 1.0));
1569
- --vdd-window-border: #1a1a1a;
1570
- --vdd-window-border-focused: #333333;
1571
- --vdd-window-header-bg: #000000;
1572
- --vdd-accent-color: #ffffff;
1573
- --vdd-accent-glow: rgba(255, 255, 255, 0.08);
1574
- --vdd-border-panel: #1a1a1a;
1575
- --vdd-bg-tab-inactive: #000000;
1576
- --vdd-text-tab-inactive: #737373;
1577
- --vdd-text-tab-active: #ffffff;
1578
- --vdd-panel-card-bg: #030303;
1579
- --vdd-panel-card-border: #1a1a1a;
1580
- --vdd-close-btn-color: #737373;
1581
- --vdd-close-btn-active-color: #ffffff;
1649
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #000000);
1650
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #0a0a0a);
1651
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #000000);
1652
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(10 10 10)) calc(var(--vdd-window-opacity, 1.0) * 100%), transparent);
1653
+ --vdd-window-border: var(--vdd--b-window-border, #1a1a1a);
1654
+ --vdd-window-border-focused: var(--vdd--b-window-border-focused, #333333);
1655
+ --vdd-window-header-bg: var(--vdd--b-window-header-bg, #000000);
1656
+ --vdd-accent-color: var(--vdd-brand-accent, #ffffff);
1657
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1658
+ --vdd-border-panel: var(--vdd--b-border-panel, #1a1a1a);
1659
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #000000);
1660
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #737373);
1661
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #ffffff);
1662
+ --vdd-panel-card-bg: var(--vdd--b-panel-card-bg, #030303);
1663
+ --vdd-panel-card-border: var(--vdd--b-panel-card-border, #1a1a1a);
1664
+ --vdd-close-btn-color: var(--vdd--b-close-btn-color, #737373);
1665
+ --vdd-close-btn-active-color: var(--vdd--b-close-btn-active-color, #ffffff);
1582
1666
  --vdd-scrollbar-thumb: rgba(255, 255, 255, 0.15);
1583
1667
  --vdd-scrollbar-thumb-hover: rgba(255, 255, 255, 0.35);
1584
- --vdd-window-text: #ffffff;
1585
- --vdd-panel-text: #ffffff;
1586
- --vdd-tab-icon-active: #ffffff;
1587
- --vdd-toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.10);
1588
- --vdd-toolbar-btn-toggle-active-bg: rgba(255, 255, 255, 0.06);
1668
+ --vdd-window-text: var(--vdd--b-window-text, #ffffff);
1669
+ --vdd-panel-text: var(--vdd--b-panel-text, #ffffff);
1670
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1671
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1672
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1589
1673
  }
1590
1674
 
1591
1675
  [data-vdd-skin="obsidian"][data-color-scheme="light"] {
1592
- --vdd-bg-workspace: #ffffff;
1593
- --vdd-bg-panel: #fafafa;
1594
- --vdd-bg-tab-bar: #ffffff;
1595
- --vdd-window-bg: rgba(250, 250, 250, var(--vdd-window-opacity, 1.0));
1596
- --vdd-window-border: #e5e5e5;
1597
- --vdd-window-border-focused: #a3a3a3;
1598
- --vdd-window-header-bg: #ffffff;
1599
- --vdd-accent-color: #000000;
1600
- --vdd-accent-glow: rgba(0, 0, 0, 0.05);
1601
- --vdd-border-panel: #eaeaea;
1602
- --vdd-bg-tab-inactive: #ffffff;
1603
- --vdd-text-tab-inactive: #737373;
1604
- --vdd-text-tab-active: #000000;
1605
- --vdd-panel-card-bg: #ffffff;
1606
- --vdd-panel-card-border: #e5e5e5;
1607
- --vdd-close-btn-color: #737373;
1608
- --vdd-close-btn-active-color: #000000;
1676
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #ffffff);
1677
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #fafafa);
1678
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #ffffff);
1679
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(250 250 250)) calc(var(--vdd-window-opacity, 1.0) * 100%), transparent);
1680
+ --vdd-window-border: var(--vdd--b-window-border, #e5e5e5);
1681
+ --vdd-window-border-focused: var(--vdd--b-window-border-focused, #a3a3a3);
1682
+ --vdd-window-header-bg: var(--vdd--b-window-header-bg, #ffffff);
1683
+ --vdd-accent-color: var(--vdd-brand-accent, #000000);
1684
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 5%, transparent);
1685
+ --vdd-border-panel: var(--vdd--b-border-panel, #eaeaea);
1686
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #ffffff);
1687
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #737373);
1688
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #000000);
1689
+ --vdd-panel-card-bg: var(--vdd--b-panel-card-bg, #ffffff);
1690
+ --vdd-panel-card-border: var(--vdd--b-panel-card-border, #e5e5e5);
1691
+ --vdd-close-btn-color: var(--vdd--b-close-btn-color, #737373);
1692
+ --vdd-close-btn-active-color: var(--vdd--b-close-btn-active-color, #000000);
1609
1693
  --vdd-scrollbar-thumb: rgba(0, 0, 0, 0.1);
1610
1694
  --vdd-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
1611
- --vdd-window-text: #000000;
1612
- --vdd-panel-text: #000000;
1613
- --vdd-panel-title-color: #000000;
1614
- --vdd-tab-icon-active: #000000;
1615
- --vdd-toolbar-btn-radio-active-bg: rgba(0, 0, 0, 0.10);
1616
- --vdd-toolbar-btn-toggle-active-bg: rgba(0, 0, 0, 0.06);
1695
+ --vdd-window-text: var(--vdd--b-window-text, #000000);
1696
+ --vdd-panel-text: var(--vdd--b-panel-text, #000000);
1697
+ --vdd-panel-title-color: var(--vdd-accent-color);
1698
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1699
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1700
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1617
1701
  }
1618
1702
 
1619
1703
  /* Obsidian custom borderless panel elevations */
1620
1704
  [data-vdd-skin="obsidian"] .vdd-floating-window {
1621
1705
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.2) !important;
1622
- border-radius: 6px;
1706
+ border-radius: calc(6px * var(--vdd-radius-scale, 1));
1623
1707
  }
1624
1708
  [data-vdd-skin="obsidian"] .vdd-floating-window.vdd-window-focused {
1625
- box-shadow: 0 24px 50px rgba(255, 255, 255, 0.06), 0 0 1px rgba(255, 255, 255, 0.4) !important;
1709
+ box-shadow: 0 24px 50px color-mix(in srgb, var(--vdd-accent-color) 6%, transparent), 0 0 1px color-mix(in srgb, var(--vdd-accent-color) 40%, transparent) !important;
1626
1710
  }
1627
1711
  [data-vdd-skin="obsidian"][data-color-scheme="light"] .vdd-floating-window {
1628
1712
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.1) !important;
@@ -1635,58 +1719,59 @@ body.vdd-dragging-active {
1635
1719
  SKIN 7: Tokyo Night Preset
1636
1720
  -------------------------------------------------------------------------- */
1637
1721
  [data-vdd-skin="tokyo"] {
1638
- --vdd-bg-workspace: #1a1b26;
1639
- --vdd-bg-panel: #24283c;
1640
- --vdd-bg-tab-bar: #1f2335;
1641
- --vdd-window-bg: rgba(36, 40, 60, var(--vdd-window-opacity, 1.0));
1642
- --vdd-window-border: #383e5a;
1643
- --vdd-window-border-focused: #7aa2f7;
1644
- --vdd-window-header-bg: #1f2335;
1645
- --vdd-accent-color: #bb9af7;
1646
- --vdd-accent-glow: rgba(187, 154, 247, 0.25);
1647
- --vdd-border-panel: #383e5a;
1648
- --vdd-bg-tab-inactive: #1f2335;
1649
- --vdd-text-tab-inactive: #787c99;
1650
- --vdd-text-tab-active: #c0caf5;
1651
- --vdd-panel-card-bg: #1a1b26;
1652
- --vdd-panel-card-border: #383e5a;
1653
- --vdd-close-btn-color: #787c99;
1654
- --vdd-close-btn-active-color: #7aa2f7;
1655
- --vdd-scrollbar-thumb: rgba(122, 162, 247, 0.25);
1656
- --vdd-scrollbar-thumb-hover: rgba(187, 154, 247, 0.4);
1657
- --vdd-window-text: #c0caf5;
1658
- --vdd-panel-text: #c0caf5;
1659
- --vdd-tab-icon-active: #7aa2f7;
1660
- --vdd-toolbar-btn-radio-active-bg: rgba(122, 162, 247, 0.14);
1661
- --vdd-toolbar-btn-toggle-active-bg: rgba(122, 162, 247, 0.08);
1722
+ --vdd-skin-font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* no official font: a terminal/editor feel */
1723
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #1a1b26);
1724
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #24283c);
1725
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #1f2335);
1726
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(36 40 60)) calc(var(--vdd-window-opacity, 1.0) * 100%), transparent);
1727
+ --vdd-window-border: var(--vdd--b-window-border, #383e5a);
1728
+ --vdd-window-border-focused: var(--vdd-accent-color);
1729
+ --vdd-window-header-bg: var(--vdd--b-window-header-bg, #1f2335);
1730
+ --vdd-accent-color: var(--vdd-brand-accent, #bb9af7);
1731
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 25%, transparent);
1732
+ --vdd-border-panel: var(--vdd--b-border-panel, #383e5a);
1733
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #1f2335);
1734
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #787c99);
1735
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #c0caf5);
1736
+ --vdd-panel-card-bg: var(--vdd--b-panel-card-bg, #1a1b26);
1737
+ --vdd-panel-card-border: var(--vdd--b-panel-card-border, #383e5a);
1738
+ --vdd-close-btn-color: var(--vdd--b-close-btn-color, #787c99);
1739
+ --vdd-close-btn-active-color: var(--vdd-accent-color);
1740
+ --vdd-scrollbar-thumb: color-mix(in srgb, var(--vdd-accent-color) 25%, transparent);
1741
+ --vdd-scrollbar-thumb-hover: color-mix(in srgb, var(--vdd-accent-color) 40%, transparent);
1742
+ --vdd-window-text: var(--vdd--b-window-text, #c0caf5);
1743
+ --vdd-panel-text: var(--vdd--b-panel-text, #c0caf5);
1744
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1745
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
1746
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 8%, transparent);
1662
1747
  }
1663
1748
 
1664
1749
  [data-vdd-skin="tokyo"][data-color-scheme="light"] {
1665
- --vdd-bg-workspace: #e1e2e7;
1666
- --vdd-bg-panel: #f2f4f8;
1667
- --vdd-bg-tab-bar: #d5d6db;
1668
- --vdd-window-bg: rgba(242, 244, 248, var(--vdd-window-opacity, 1.0));
1669
- --vdd-window-border: #b4b5b9;
1670
- --vdd-window-border-focused: #385af6;
1671
- --vdd-window-header-bg: #d5d6db;
1672
- --vdd-accent-color: #9854f1;
1673
- --vdd-accent-glow: rgba(152, 84, 241, 0.15);
1674
- --vdd-border-panel: #b4b5b9;
1675
- --vdd-bg-tab-inactive: #d5d6db;
1676
- --vdd-text-tab-inactive: #565a6e;
1677
- --vdd-text-tab-active: #383e56;
1678
- --vdd-panel-card-bg: #e1e2e7;
1679
- --vdd-panel-card-border: #b4b5b9;
1680
- --vdd-close-btn-color: #565a6e;
1681
- --vdd-close-btn-active-color: #385af6;
1682
- --vdd-scrollbar-thumb: rgba(56, 90, 246, 0.2);
1683
- --vdd-scrollbar-thumb-hover: rgba(152, 84, 241, 0.35);
1684
- --vdd-window-text: #383e56;
1685
- --vdd-panel-text: #383e56;
1686
- --vdd-panel-title-color: #9854f1;
1687
- --vdd-tab-icon-active: #385af6;
1688
- --vdd-toolbar-btn-radio-active-bg: rgba(56, 90, 246, 0.12);
1689
- --vdd-toolbar-btn-toggle-active-bg: rgba(56, 90, 246, 0.07);
1750
+ --vdd-bg-workspace: var(--vdd--b-bg-workspace, #e1e2e7);
1751
+ --vdd-bg-panel: var(--vdd--b-bg-panel, #f2f4f8);
1752
+ --vdd-bg-tab-bar: var(--vdd--b-bg-tab-bar, #d5d6db);
1753
+ --vdd-window-bg: color-mix(in srgb, var(--vdd--b-window-bg, rgb(242 244 248)) calc(var(--vdd-window-opacity, 1.0) * 100%), transparent);
1754
+ --vdd-window-border: var(--vdd--b-window-border, #b4b5b9);
1755
+ --vdd-window-border-focused: var(--vdd-accent-color);
1756
+ --vdd-window-header-bg: var(--vdd--b-window-header-bg, #d5d6db);
1757
+ --vdd-accent-color: var(--vdd-brand-accent, #9854f1);
1758
+ --vdd-accent-glow: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
1759
+ --vdd-border-panel: var(--vdd--b-border-panel, #b4b5b9);
1760
+ --vdd-bg-tab-inactive: var(--vdd--b-bg-tab-inactive, #d5d6db);
1761
+ --vdd-text-tab-inactive: var(--vdd--b-text-tab-inactive, #565a6e);
1762
+ --vdd-text-tab-active: var(--vdd--b-text-tab-active, #383e56);
1763
+ --vdd-panel-card-bg: var(--vdd--b-panel-card-bg, #e1e2e7);
1764
+ --vdd-panel-card-border: var(--vdd--b-panel-card-border, #b4b5b9);
1765
+ --vdd-close-btn-color: var(--vdd--b-close-btn-color, #565a6e);
1766
+ --vdd-close-btn-active-color: var(--vdd-accent-color);
1767
+ --vdd-scrollbar-thumb: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent);
1768
+ --vdd-scrollbar-thumb-hover: color-mix(in srgb, var(--vdd-accent-color) 35%, transparent);
1769
+ --vdd-window-text: var(--vdd--b-window-text, #383e56);
1770
+ --vdd-panel-text: var(--vdd--b-panel-text, #383e56);
1771
+ --vdd-panel-title-color: var(--vdd-accent-color);
1772
+ --vdd-tab-icon-active: var(--vdd-accent-color);
1773
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1774
+ --vdd-toolbar-btn-toggle-active-bg: color-mix(in srgb, var(--vdd-accent-color) 7%, transparent);
1690
1775
  }
1691
1776
 
1692
1777
  /* ==========================================================================
@@ -1716,11 +1801,11 @@ body.vdd-dragging-active {
1716
1801
  --vdd-toolbar-accent-bar-width: 2px;
1717
1802
  }
1718
1803
  [data-vdd-skin="chrome"] .vdd-sidebar-tabs-strip.vdd-left .vdd-sidebar-tab-btn.vdd-active {
1719
- border-radius: 0 10px 10px 0 !important;
1804
+ border-radius: 0 calc(10px * var(--vdd-radius-scale, 1)) calc(10px * var(--vdd-radius-scale, 1)) 0 !important;
1720
1805
  border-left: none !important;
1721
1806
  }
1722
1807
  [data-vdd-skin="chrome"] .vdd-sidebar-tabs-strip.vdd-right .vdd-sidebar-tab-btn.vdd-active {
1723
- border-radius: 10px 0 0 10px !important;
1808
+ border-radius: calc(10px * var(--vdd-radius-scale, 1)) 0 0 calc(10px * var(--vdd-radius-scale, 1)) !important;
1724
1809
  border-right: none !important;
1725
1810
  border-top: 1px solid var(--vdd-sidebar-border) !important;
1726
1811
  border-bottom: 1px solid var(--vdd-sidebar-border) !important;
@@ -1730,11 +1815,11 @@ body.vdd-dragging-active {
1730
1815
  slate — Fluent Pill (floating capsule, accent-tinted)
1731
1816
  -------------------------------------------------------------------------- */
1732
1817
  [data-vdd-skin="slate"] {
1733
- --vdd-tab-btn-active-bg: rgba(96, 165, 250, 0.14);
1818
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
1734
1819
  --vdd-tab-btn-active-width: 36px;
1735
1820
  --vdd-tab-btn-active-radius: 8px;
1736
1821
  --vdd-tab-accent-bar-width: 0px;
1737
- --vdd-toolbar-btn-radio-active-bg: rgba(96, 165, 250, 0.14);
1822
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 14%, transparent);
1738
1823
  --vdd-toolbar-accent-bar-width: 0px;
1739
1824
  }
1740
1825
  [data-vdd-skin="slate"] .vdd-sidebar-tab-btn.vdd-active {
@@ -1744,11 +1829,11 @@ body.vdd-dragging-active {
1744
1829
  }
1745
1830
  [data-vdd-skin="slate"] .vdd-toolbar-strip .vdd-toolbar-btn-radio.vdd-active,
1746
1831
  [data-vdd-skin="slate"] .vdd-toolbar-strip .vdd-toolbar-btn-group.vdd-active {
1747
- border-radius: 8px !important;
1832
+ border-radius: calc(8px * var(--vdd-radius-scale, 1)) !important;
1748
1833
  }
1749
1834
  [data-vdd-skin="slate"][data-color-scheme="light"] {
1750
- --vdd-tab-btn-active-bg: rgba(0, 120, 212, 0.12);
1751
- --vdd-toolbar-btn-radio-active-bg: rgba(0, 120, 212, 0.12);
1835
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1836
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1752
1837
  }
1753
1838
 
1754
1839
  /* --------------------------------------------------------------------------
@@ -1776,7 +1861,7 @@ body.vdd-dragging-active {
1776
1861
  transform: translateX(-50%);
1777
1862
  width: 16px;
1778
1863
  height: 2px;
1779
- border-radius: 1px;
1864
+ border-radius: calc(1px * var(--vdd-radius-scale, 1));
1780
1865
  background-color: var(--vdd-tab-icon-active);
1781
1866
  }
1782
1867
  [data-vdd-skin="nord"] .vdd-toolbar-strip .vdd-toolbar-btn-radio.vdd-active,
@@ -1799,7 +1884,7 @@ body.vdd-dragging-active {
1799
1884
  transform: translateX(-50%);
1800
1885
  width: 14px;
1801
1886
  height: 2px;
1802
- border-radius: 1px;
1887
+ border-radius: calc(1px * var(--vdd-radius-scale, 1));
1803
1888
  background-color: var(--vdd-tab-icon-active);
1804
1889
  }
1805
1890
  [data-vdd-skin="nord"] .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-radio.vdd-active::after,
@@ -1811,7 +1896,7 @@ body.vdd-dragging-active {
1811
1896
  transform: translateX(-50%);
1812
1897
  width: 14px;
1813
1898
  height: 2px;
1814
- border-radius: 1px;
1899
+ border-radius: calc(1px * var(--vdd-radius-scale, 1));
1815
1900
  background-color: var(--vdd-tab-icon-active);
1816
1901
  }
1817
1902
 
@@ -1819,78 +1904,78 @@ body.vdd-dragging-active {
1819
1904
  obsidian — Deep Glow (near-black fill, 2 px bar, inner glow, icon shadow)
1820
1905
  -------------------------------------------------------------------------- */
1821
1906
  [data-vdd-skin="obsidian"] {
1822
- --vdd-tab-btn-active-bg: rgba(255, 255, 255, 0.03);
1823
- --vdd-tab-btn-active-shadow: inset 0 0 12px rgba(255, 255, 255, 0.06);
1824
- --vdd-tab-btn-active-glow: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
1907
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 3%, transparent);
1908
+ --vdd-tab-btn-active-shadow: inset 0 0 12px color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1909
+ --vdd-tab-btn-active-glow: drop-shadow(0 0 5px color-mix(in srgb, var(--vdd-accent-color) 50%, transparent));
1825
1910
  --vdd-tab-accent-bar-width: 2px;
1826
- --vdd-toolbar-btn-radio-active-bg: rgba(255, 255, 255, 0.03);
1827
- --vdd-toolbar-btn-active-shadow: inset 0 0 12px rgba(255, 255, 255, 0.06);
1828
- --vdd-toolbar-btn-active-glow: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
1911
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 3%, transparent);
1912
+ --vdd-toolbar-btn-active-shadow: inset 0 0 12px color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1913
+ --vdd-toolbar-btn-active-glow: drop-shadow(0 0 5px color-mix(in srgb, var(--vdd-accent-color) 50%, transparent));
1829
1914
  --vdd-toolbar-accent-bar-width: 2px;
1830
1915
  }
1831
1916
  [data-vdd-skin="obsidian"] .vdd-sidebar-tabs-strip.vdd-left .vdd-sidebar-tab-btn.vdd-active {
1832
- box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
1917
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1833
1918
  }
1834
1919
  [data-vdd-skin="obsidian"] .vdd-sidebar-tabs-strip.vdd-right .vdd-sidebar-tab-btn.vdd-active {
1835
- box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
1920
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1836
1921
  }
1837
1922
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-radio.vdd-active,
1838
1923
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-group.vdd-active {
1839
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
1924
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1840
1925
  }
1841
1926
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-radio.vdd-active,
1842
1927
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-group.vdd-active {
1843
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
1928
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset -3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1844
1929
  }
1845
1930
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-radio.vdd-active,
1846
1931
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-group.vdd-active {
1847
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 -3px 8px rgba(255, 255, 255, 0.08) !important;
1932
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 -3px 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1848
1933
  }
1849
1934
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-radio.vdd-active,
1850
1935
  [data-vdd-skin="obsidian"] .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-group.vdd-active {
1851
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 3px 8px rgba(255, 255, 255, 0.08) !important;
1936
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 3px 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
1852
1937
  }
1853
1938
  [data-vdd-skin="obsidian"][data-color-scheme="light"] {
1854
- --vdd-tab-btn-active-shadow: inset 0 0 12px rgba(0, 0, 0, 0.06);
1855
- --vdd-tab-btn-active-glow: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
1856
- --vdd-toolbar-btn-active-shadow: inset 0 0 12px rgba(0, 0, 0, 0.06);
1857
- --vdd-toolbar-btn-active-glow: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
1939
+ --vdd-tab-btn-active-shadow: inset 0 0 12px color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1940
+ --vdd-tab-btn-active-glow: drop-shadow(0 0 4px color-mix(in srgb, var(--vdd-accent-color) 40%, transparent));
1941
+ --vdd-toolbar-btn-active-shadow: inset 0 0 12px color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
1942
+ --vdd-toolbar-btn-active-glow: drop-shadow(0 0 4px color-mix(in srgb, var(--vdd-accent-color) 40%, transparent));
1858
1943
  }
1859
1944
 
1860
1945
  /* --------------------------------------------------------------------------
1861
1946
  tokyo — Neon Pulse (accent-blue tint, vivid neon glow)
1862
1947
  -------------------------------------------------------------------------- */
1863
1948
  [data-vdd-skin="tokyo"] {
1864
- --vdd-tab-btn-active-bg: rgba(122, 162, 247, 0.10);
1865
- --vdd-tab-btn-active-shadow: inset 0 0 16px rgba(122, 162, 247, 0.12);
1866
- --vdd-tab-btn-active-glow: drop-shadow(0 0 6px rgba(122, 162, 247, 0.65));
1949
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1950
+ --vdd-tab-btn-active-shadow: inset 0 0 16px color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1951
+ --vdd-tab-btn-active-glow: drop-shadow(0 0 6px color-mix(in srgb, var(--vdd-accent-color) 65%, transparent));
1867
1952
  --vdd-tab-accent-bar-width: 2px;
1868
- --vdd-toolbar-btn-radio-active-bg: rgba(122, 162, 247, 0.10);
1869
- --vdd-toolbar-btn-active-shadow: inset 0 0 16px rgba(122, 162, 247, 0.12);
1870
- --vdd-toolbar-btn-active-glow: drop-shadow(0 0 6px rgba(122, 162, 247, 0.65));
1953
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 10%, transparent);
1954
+ --vdd-toolbar-btn-active-shadow: inset 0 0 16px color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
1955
+ --vdd-toolbar-btn-active-glow: drop-shadow(0 0 6px color-mix(in srgb, var(--vdd-accent-color) 65%, transparent));
1871
1956
  --vdd-toolbar-accent-bar-width: 2px;
1872
1957
  }
1873
1958
  [data-vdd-skin="tokyo"] .vdd-sidebar-tabs-strip.vdd-left .vdd-sidebar-tab-btn.vdd-active {
1874
- box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
1959
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1875
1960
  }
1876
1961
  [data-vdd-skin="tokyo"] .vdd-sidebar-tabs-strip.vdd-right .vdd-sidebar-tab-btn.vdd-active {
1877
- box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
1962
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1878
1963
  }
1879
1964
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-radio.vdd-active,
1880
1965
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-group.vdd-active {
1881
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
1966
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1882
1967
  }
1883
1968
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-radio.vdd-active,
1884
1969
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-group.vdd-active {
1885
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
1970
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset -3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1886
1971
  }
1887
1972
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-radio.vdd-active,
1888
1973
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-group.vdd-active {
1889
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 -3px 12px rgba(122, 162, 247, 0.18) !important;
1974
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 -3px 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1890
1975
  }
1891
1976
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-radio.vdd-active,
1892
1977
  [data-vdd-skin="tokyo"] .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-group.vdd-active {
1893
- box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 3px 12px rgba(122, 162, 247, 0.18) !important;
1978
+ box-shadow: var(--vdd-toolbar-btn-active-shadow), inset 0 3px 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
1894
1979
  }
1895
1980
 
1896
1981
  /* --------------------------------------------------------------------------
@@ -1899,12 +1984,12 @@ body.vdd-dragging-active {
1899
1984
  A contained chip that floats inside the strip — not an edge-connecting bridge.
1900
1985
  -------------------------------------------------------------------------- */
1901
1986
  [data-vdd-skin="macos"] {
1902
- --vdd-tab-btn-active-bg: rgba(56, 189, 248, 0.2);
1987
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent);
1903
1988
  --vdd-tab-btn-active-width: 36px;
1904
1989
  --vdd-tab-btn-active-radius: 10px;
1905
1990
  --vdd-tab-btn-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
1906
1991
  --vdd-tab-accent-bar-width: 0px;
1907
- --vdd-toolbar-btn-radio-active-bg: rgba(56, 189, 248, 0.2);
1992
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent);
1908
1993
  --vdd-toolbar-btn-active-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
1909
1994
  --vdd-toolbar-accent-bar-width: 0px;
1910
1995
  }
@@ -1915,13 +2000,13 @@ body.vdd-dragging-active {
1915
2000
  }
1916
2001
  [data-vdd-skin="macos"] .vdd-toolbar-strip .vdd-toolbar-btn-radio.vdd-active,
1917
2002
  [data-vdd-skin="macos"] .vdd-toolbar-strip .vdd-toolbar-btn-group.vdd-active {
1918
- border-radius: 10px !important;
2003
+ border-radius: calc(10px * var(--vdd-radius-scale, 1)) !important;
1919
2004
  }
1920
2005
  [data-vdd-skin="macos"][data-color-scheme="light"] {
1921
- --vdd-tab-btn-active-bg: rgba(0, 102, 204, 0.16);
1922
- --vdd-tab-btn-active-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.3);
1923
- --vdd-toolbar-btn-radio-active-bg: rgba(0, 102, 204, 0.16);
1924
- --vdd-toolbar-btn-active-shadow: inset 0 0 0 1px rgba(0, 102, 204, 0.3);
2006
+ --vdd-tab-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 16%, transparent);
2007
+ --vdd-tab-btn-active-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vdd-accent-color) 30%, transparent);
2008
+ --vdd-toolbar-btn-radio-active-bg: color-mix(in srgb, var(--vdd-accent-color) 16%, transparent);
2009
+ --vdd-toolbar-btn-active-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vdd-accent-color) 30%, transparent);
1925
2010
  }
1926
2011
 
1927
2012
  /* ─── Sidebar structure ──────────────────────────────────────────────────────
@@ -2116,7 +2201,7 @@ body.vdd-dragging-active {
2116
2201
  align-items: center;
2117
2202
  justify-content: center;
2118
2203
  border: 1px solid transparent !important;
2119
- border-radius: 6px;
2204
+ border-radius: calc(6px * var(--vdd-radius-scale, 1));
2120
2205
  background: transparent;
2121
2206
  color: var(--vdd-tab-icon-inactive);
2122
2207
  position: relative;
@@ -2138,7 +2223,7 @@ body.vdd-dragging-active {
2138
2223
  background-color: var(--vdd-tab-btn-active-bg) !important;
2139
2224
  border-top: 1px solid var(--vdd-sidebar-border) !important;
2140
2225
  border-bottom: 1px solid var(--vdd-sidebar-border) !important;
2141
- border-radius: var(--vdd-tab-btn-active-radius, 0px) !important;
2226
+ border-radius: calc(var(--vdd-tab-btn-active-radius, 0px) * var(--vdd-radius-scale, 1)) !important;
2142
2227
  box-shadow: var(--vdd-tab-btn-active-shadow, none);
2143
2228
  filter: var(--vdd-tab-btn-active-glow, none);
2144
2229
  z-index: 6;
@@ -2211,7 +2296,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
2211
2296
  background: var(--vdd-modal-bg);
2212
2297
  border: 1px solid var(--vdd-modal-border);
2213
2298
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
2214
- border-radius: 12px;
2299
+ border-radius: calc(12px * var(--vdd-radius-scale, 1));
2215
2300
  display: flex;
2216
2301
  flex-direction: column;
2217
2302
  color: var(--vdd-text-primary);
@@ -2252,7 +2337,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
2252
2337
  display: flex;
2253
2338
  align-items: center;
2254
2339
  justify-content: center;
2255
- border-radius: 4px;
2340
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
2256
2341
  transition: all 0.15s ease;
2257
2342
  }
2258
2343
 
@@ -2377,7 +2462,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
2377
2462
  display: flex;
2378
2463
  align-items: center;
2379
2464
  justify-content: center;
2380
- border-radius: 4px;
2465
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
2381
2466
  transition: all 0.15s ease;
2382
2467
  }
2383
2468
 
@@ -2414,12 +2499,12 @@ html.vdd-no-animations [class*="vdd-"]::after {
2414
2499
  .vdd-workspace-edge-trigger {
2415
2500
  position: absolute;
2416
2501
  z-index: calc(var(--vdd-z-base, 1000) + 8999);
2417
- background-color: rgba(0, 123, 255, 0.01);
2502
+ background-color: color-mix(in srgb, var(--vdd-accent-color) 1%, transparent);
2418
2503
  transition: background-color 0.2s;
2419
2504
  }
2420
2505
 
2421
2506
  .vdd-workspace-edge-trigger:hover {
2422
- background-color: rgba(0, 123, 255, 0.12);
2507
+ background-color: color-mix(in srgb, var(--vdd-accent-color) 12%, transparent);
2423
2508
  }
2424
2509
 
2425
2510
  .vdd-edge-trigger-left {
@@ -2453,8 +2538,8 @@ html.vdd-no-animations [class*="vdd-"]::after {
2453
2538
  .vdd-workspace-edge-preview {
2454
2539
  position: absolute;
2455
2540
  z-index: calc(var(--vdd-z-base, 1000) + 8998);
2456
- background-color: rgba(0, 123, 255, 0.2);
2457
- border: 2px dashed #007bff;
2541
+ background-color: color-mix(in srgb, var(--vdd-accent-color) 20%, transparent);
2542
+ border: 2px dashed var(--vdd-accent-color);
2458
2543
  pointer-events: none;
2459
2544
  animation: vdd-fade-in 0.15s ease-out;
2460
2545
  }
@@ -2465,8 +2550,8 @@ html.vdd-no-animations [class*="vdd-"]::after {
2465
2550
  width: 80px;
2466
2551
  height: 80px;
2467
2552
  border: 2px dashed var(--vdd-accent-color, #38bdf8);
2468
- border-radius: 8px;
2469
- background: rgba(56, 189, 248, 0.06);
2553
+ border-radius: calc(8px * var(--vdd-radius-scale, 1));
2554
+ background: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
2470
2555
  pointer-events: auto;
2471
2556
  z-index: calc(var(--vdd-z-base, 1000) + 9000);
2472
2557
  opacity: 0.55;
@@ -2478,7 +2563,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
2478
2563
  .vdd-corner-zone--bottom-right { bottom: 0; right: 0; }
2479
2564
  .vdd-corner-zone--hovered {
2480
2565
  opacity: 1;
2481
- background: rgba(56, 189, 248, 0.18);
2566
+ background: color-mix(in srgb, var(--vdd-accent-color) 18%, transparent);
2482
2567
  border-style: solid;
2483
2568
  }
2484
2569
 
@@ -2628,26 +2713,26 @@ html.vdd-no-animations [class*="vdd-"]::after {
2628
2713
 
2629
2714
  /* obsidian & tokyo — flip the inset glow X offset sign */
2630
2715
  [dir="rtl"] [data-vdd-skin="obsidian"] .vdd-sidebar-tabs-strip.vdd-left .vdd-sidebar-tab-btn.vdd-active {
2631
- box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 8px rgba(255, 255, 255, 0.08) !important;
2716
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
2632
2717
  }
2633
2718
  [dir="rtl"] [data-vdd-skin="obsidian"] .vdd-sidebar-tabs-strip.vdd-right .vdd-sidebar-tab-btn.vdd-active {
2634
- box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 8px rgba(255, 255, 255, 0.08) !important;
2719
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 8px color-mix(in srgb, var(--vdd-accent-color) 8%, transparent) !important;
2635
2720
  }
2636
2721
  [dir="rtl"] [data-vdd-skin="tokyo"] .vdd-sidebar-tabs-strip.vdd-left .vdd-sidebar-tab-btn.vdd-active {
2637
- box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 12px rgba(122, 162, 247, 0.18) !important;
2722
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset -3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
2638
2723
  }
2639
2724
  [dir="rtl"] [data-vdd-skin="tokyo"] .vdd-sidebar-tabs-strip.vdd-right .vdd-sidebar-tab-btn.vdd-active {
2640
- box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 12px rgba(122, 162, 247, 0.18) !important;
2725
+ box-shadow: var(--vdd-tab-btn-active-shadow), inset 3px 0 12px color-mix(in srgb, var(--vdd-accent-color) 18%, transparent) !important;
2641
2726
  }
2642
2727
 
2643
2728
  /* chrome — swap the capsule border-radius when strips change sides */
2644
2729
  [dir="rtl"] [data-vdd-skin="chrome"] .vdd-sidebar-tabs-strip.vdd-left .vdd-sidebar-tab-btn.vdd-active {
2645
- border-radius: 10px 0 0 10px !important;
2730
+ border-radius: calc(10px * var(--vdd-radius-scale, 1)) 0 0 calc(10px * var(--vdd-radius-scale, 1)) !important;
2646
2731
  margin-left: 0 !important;
2647
2732
  margin-right: 0 !important;
2648
2733
  }
2649
2734
  [dir="rtl"] [data-vdd-skin="chrome"] .vdd-sidebar-tabs-strip.vdd-right .vdd-sidebar-tab-btn.vdd-active {
2650
- border-radius: 0 10px 10px 0 !important;
2735
+ border-radius: 0 calc(10px * var(--vdd-radius-scale, 1)) calc(10px * var(--vdd-radius-scale, 1)) 0 !important;
2651
2736
  margin-right: 0 !important;
2652
2737
  margin-left: 0 !important;
2653
2738
  }
@@ -2751,7 +2836,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
2751
2836
  background: rgba(0, 0, 0, 0.8);
2752
2837
  border: 1px solid var(--vdd-accent-color, #38bdf8);
2753
2838
  border-left: 3px solid var(--vdd-accent-color, #38bdf8);
2754
- border-radius: 4px;
2839
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
2755
2840
  color: var(--vdd-accent-color, #38bdf8);
2756
2841
  font-family: monospace;
2757
2842
  padding: 0.375rem 1rem;
@@ -2779,7 +2864,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
2779
2864
  margin: 0;
2780
2865
  padding: 0.625rem;
2781
2866
  font-size: 0.875rem;
2782
- border-radius: 0.375rem;
2867
+ border-radius: calc(0.375rem * var(--vdd-radius-scale, 1));
2783
2868
  }
2784
2869
 
2785
2870
  .vdd-confirmation-alert-danger {
@@ -2847,7 +2932,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
2847
2932
  display: flex;
2848
2933
  align-items: center;
2849
2934
  justify-content: center;
2850
- border-radius: 4px;
2935
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
2851
2936
  transition: all 0.15s ease;
2852
2937
  flex-shrink: 0;
2853
2938
  }
@@ -2918,7 +3003,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
2918
3003
  justify-content: center;
2919
3004
  background: transparent;
2920
3005
  border: 1px solid transparent;
2921
- border-radius: 6px;
3006
+ border-radius: calc(6px * var(--vdd-radius-scale, 1));
2922
3007
  color: var(--vdd-tab-icon-inactive);
2923
3008
  cursor: pointer;
2924
3009
  flex-shrink: 0;
@@ -2946,10 +3031,10 @@ html.vdd-no-animations [class*="vdd-"]::after {
2946
3031
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
2947
3032
  }
2948
3033
 
2949
- .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-radio.vdd-active { border-left: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 0 6px 6px 0; }
2950
- .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-radio.vdd-active { border-right: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 6px 0 0 6px; }
2951
- .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-radio.vdd-active { border-bottom: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 6px 6px 0 0; }
2952
- .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-radio.vdd-active { border-top: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 0 0 6px 6px; }
3034
+ .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-radio.vdd-active { border-left: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 0 calc(6px * var(--vdd-radius-scale, 1)) calc(6px * var(--vdd-radius-scale, 1)) 0; }
3035
+ .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-radio.vdd-active { border-right: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: calc(6px * var(--vdd-radius-scale, 1)) 0 0 calc(6px * var(--vdd-radius-scale, 1)); }
3036
+ .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-radio.vdd-active { border-bottom: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: calc(6px * var(--vdd-radius-scale, 1)) calc(6px * var(--vdd-radius-scale, 1)) 0 0; }
3037
+ .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-radio.vdd-active { border-top: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 0 0 calc(6px * var(--vdd-radius-scale, 1)) calc(6px * var(--vdd-radius-scale, 1)); }
2953
3038
 
2954
3039
  /* Toggle active — lighter tint, no directional border */
2955
3040
  .vdd-toolbar-btn-toggle.vdd-active {
@@ -2984,10 +3069,10 @@ html.vdd-no-animations [class*="vdd-"]::after {
2984
3069
  transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
2985
3070
  }
2986
3071
 
2987
- .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-group.vdd-active { border-left: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 0 6px 6px 0; }
2988
- .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-group.vdd-active { border-right: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 6px 0 0 6px; }
2989
- .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-group.vdd-active { border-bottom: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 6px 6px 0 0; }
2990
- .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-group.vdd-active { border-top: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 0 0 6px 6px; }
3072
+ .vdd-toolbar-strip.vdd-left .vdd-toolbar-btn-group.vdd-active { border-left: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 0 calc(6px * var(--vdd-radius-scale, 1)) calc(6px * var(--vdd-radius-scale, 1)) 0; }
3073
+ .vdd-toolbar-strip.vdd-right .vdd-toolbar-btn-group.vdd-active { border-right: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: calc(6px * var(--vdd-radius-scale, 1)) 0 0 calc(6px * var(--vdd-radius-scale, 1)); }
3074
+ .vdd-toolbar-strip.vdd-top .vdd-toolbar-btn-group.vdd-active { border-bottom: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: calc(6px * var(--vdd-radius-scale, 1)) calc(6px * var(--vdd-radius-scale, 1)) 0 0; }
3075
+ .vdd-toolbar-strip.vdd-bottom .vdd-toolbar-btn-group.vdd-active { border-top: var(--vdd-toolbar-accent-bar-width, 3px) solid var(--vdd-tab-icon-active); border-radius: 0 0 calc(6px * var(--vdd-radius-scale, 1)) calc(6px * var(--vdd-radius-scale, 1)); }
2991
3076
 
2992
3077
  /* Separators */
2993
3078
  .vdd-toolbar-strip.vdd-left .vdd-toolbar-separator,
@@ -3024,7 +3109,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3024
3109
  z-index: calc(var(--vdd-z-base, 1000) + 7000);
3025
3110
  background: var(--vdd-sidebar-bg, var(--vdd-bg-panel));
3026
3111
  border: 1px solid var(--vdd-sidebar-border);
3027
- border-radius: 8px;
3112
+ border-radius: calc(8px * var(--vdd-radius-scale, 1));
3028
3113
  padding: 4px;
3029
3114
  min-width: 168px;
3030
3115
  display: flex;
@@ -3060,7 +3145,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3060
3145
  gap: 8px;
3061
3146
  padding: 5px 8px;
3062
3147
  border: 1px solid transparent;
3063
- border-radius: 6px;
3148
+ border-radius: calc(6px * var(--vdd-radius-scale, 1));
3064
3149
  background: transparent;
3065
3150
  color: var(--vdd-sidebar-text-title, var(--vdd-text-primary));
3066
3151
  cursor: pointer;
@@ -3127,7 +3212,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3127
3212
  font-family: monospace;
3128
3213
  font-weight: 500;
3129
3214
  cursor: pointer;
3130
- border-radius: 4px;
3215
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
3131
3216
  transition: all 0.15s ease;
3132
3217
  white-space: nowrap;
3133
3218
  user-select: none;
@@ -3152,20 +3237,20 @@ html.vdd-no-animations [class*="vdd-"]::after {
3152
3237
  }
3153
3238
 
3154
3239
  [data-color-scheme="light"] .vdd-btn-outline {
3155
- border-color: #6c757d;
3156
- color: #6c757d;
3240
+ border-color: var(--vdd--b-text-secondary, #6c757d);
3241
+ color: var(--vdd--b-text-secondary, #6c757d);
3157
3242
  }
3158
3243
 
3159
3244
  [data-color-scheme="light"] .vdd-btn-outline:hover {
3160
3245
  background: rgba(0, 0, 0, 0.05);
3161
- border-color: #495057;
3162
- color: #495057;
3246
+ border-color: var(--vdd--b-text-tab-inactive, #495057);
3247
+ color: var(--vdd--b-text-tab-inactive, #495057);
3163
3248
  }
3164
3249
 
3165
3250
  .vdd-btn-primary {
3166
3251
  background: var(--vdd-accent-color, #38bdf8);
3167
3252
  border: 1px solid var(--vdd-accent-color, #38bdf8);
3168
- color: #090b11;
3253
+ color: var(--vdd-brand-on-accent, #090b11);
3169
3254
  }
3170
3255
 
3171
3256
  .vdd-btn-primary:hover {
@@ -3173,7 +3258,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3173
3258
  }
3174
3259
 
3175
3260
  [data-color-scheme="light"] .vdd-btn-primary {
3176
- color: #ffffff;
3261
+ color: var(--vdd-brand-on-accent, #ffffff);
3177
3262
  }
3178
3263
 
3179
3264
  /* ============================================================
@@ -3336,23 +3421,23 @@ html.vdd-no-animations [class*="vdd-"]::after {
3336
3421
  }
3337
3422
 
3338
3423
  [data-vdd-skin="slate"] {
3339
- --vdd-panel-toolbar-btn-active-color: #60a5fa;
3340
- --vdd-panel-toolbar-btn-active-bg: rgba(96, 165, 250, 0.15);
3424
+ --vdd-panel-toolbar-btn-active-color: var(--vdd-accent-color);
3425
+ --vdd-panel-toolbar-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
3341
3426
  }
3342
3427
 
3343
3428
  [data-vdd-skin="nord"] {
3344
- --vdd-panel-toolbar-btn-active-color: #88c0d0;
3345
- --vdd-panel-toolbar-btn-active-bg: rgba(136, 192, 208, 0.15);
3429
+ --vdd-panel-toolbar-btn-active-color: var(--vdd-accent-color);
3430
+ --vdd-panel-toolbar-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
3346
3431
  }
3347
3432
 
3348
3433
  [data-vdd-skin="obsidian"] {
3349
- --vdd-panel-toolbar-btn-active-color: #a78bfa;
3350
- --vdd-panel-toolbar-btn-active-bg: rgba(167, 139, 250, 0.15);
3434
+ --vdd-panel-toolbar-btn-active-color: var(--vdd-accent-color);
3435
+ --vdd-panel-toolbar-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
3351
3436
  }
3352
3437
 
3353
3438
  [data-vdd-skin="tokyo"] {
3354
- --vdd-panel-toolbar-btn-active-color: #7aa2f7;
3355
- --vdd-panel-toolbar-btn-active-bg: rgba(122, 162, 247, 0.15);
3439
+ --vdd-panel-toolbar-btn-active-color: var(--vdd-accent-color);
3440
+ --vdd-panel-toolbar-btn-active-bg: color-mix(in srgb, var(--vdd-accent-color) 15%, transparent);
3356
3441
  }
3357
3442
 
3358
3443
  /* ==========================================================================
@@ -3402,7 +3487,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3402
3487
  width: var(--vdd-panel-toolbar-btn-size, 32px);
3403
3488
  height: var(--vdd-panel-toolbar-btn-size, 32px);
3404
3489
  flex-shrink: 0;
3405
- border-radius: var(--vdd-panel-toolbar-btn-radius, 6px);
3490
+ border-radius: calc(var(--vdd-panel-toolbar-btn-radius, 6px) * var(--vdd-radius-scale, 1));
3406
3491
  border: none;
3407
3492
  background: transparent;
3408
3493
  color: var(--vdd-panel-toolbar-fg, rgba(255, 255, 255, 0.65));
@@ -3437,7 +3522,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3437
3522
 
3438
3523
  /* ── Toolbar strip variants ── */
3439
3524
  .vdd-panel-toolbar[data-variant="frosted"] {
3440
- background: rgba(15, 20, 30, 0.55);
3525
+ background: color-mix(in srgb, var(--vdd--b-panel-toolbar-frosted-bg, rgb(15 20 30)) 55%, transparent);
3441
3526
  backdrop-filter: blur(10px) saturate(150%);
3442
3527
  -webkit-backdrop-filter: blur(10px) saturate(150%);
3443
3528
  }
@@ -3445,7 +3530,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3445
3530
  background: var(--vdd-bg-tab-bar, #0d0f16);
3446
3531
  }
3447
3532
  [data-color-scheme="light"] .vdd-panel-toolbar[data-variant="frosted"] {
3448
- background: rgba(233, 236, 239, 0.72);
3533
+ background: color-mix(in srgb, var(--vdd--b-panel-toolbar-frosted-bg, rgb(233 236 239)) 72%, transparent);
3449
3534
  }
3450
3535
  .vdd-panel-toolbar--top[data-variant="frosted"],
3451
3536
  .vdd-panel-toolbar--top[data-variant="solid"] {
@@ -3587,7 +3672,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3587
3672
  height: var(--vdd-panel-toolbar-btn-size, 28px);
3588
3673
  width: 200px;
3589
3674
  border: 1px solid var(--vdd-panel-toolbar-separator-color, rgba(255, 255, 255, 0.15));
3590
- border-radius: var(--vdd-panel-toolbar-btn-radius, 6px);
3675
+ border-radius: calc(var(--vdd-panel-toolbar-btn-radius, 6px) * var(--vdd-radius-scale, 1));
3591
3676
  background: rgba(0, 0, 0, 0.18);
3592
3677
  color: inherit;
3593
3678
  padding: 0 8px;
@@ -3610,7 +3695,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3610
3695
  z-index: calc(var(--vdd-z-base, 1000) + 8502);
3611
3696
  background: var(--vdd-panel-float-bg, rgba(22, 24, 34, 0.95));
3612
3697
  border: 1px solid var(--vdd-panel-float-border, rgba(255, 255, 255, 0.1));
3613
- border-radius: var(--vdd-panel-float-radius, 8px);
3698
+ border-radius: calc(var(--vdd-panel-float-radius, 8px) * var(--vdd-radius-scale, 1));
3614
3699
  box-shadow: var(--vdd-panel-float-shadow-active, 0 8px 28px rgba(0, 0, 0, 0.55));
3615
3700
  overflow: hidden;
3616
3701
  max-height: 300px;
@@ -3655,7 +3740,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3655
3740
  min-height: 60px;
3656
3741
  display: flex;
3657
3742
  flex-direction: column;
3658
- border-radius: var(--vdd-panel-float-radius, 8px);
3743
+ border-radius: calc(var(--vdd-panel-float-radius, 8px) * var(--vdd-radius-scale, 1));
3659
3744
  background: var(--vdd-panel-float-bg, rgba(22, 24, 34, 0.92));
3660
3745
  border: 1px solid var(--vdd-panel-float-border, rgba(255, 255, 255, 0.1));
3661
3746
  box-shadow: var(--vdd-panel-float-shadow, 0 4px 16px rgba(0, 0, 0, 0.35));
@@ -3727,7 +3812,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3727
3812
  border: 1px solid var(--vdd-custom-btn-border, rgba(255, 255, 255, 0.05));
3728
3813
  color: var(--vdd-text-secondary, #94a3b8);
3729
3814
  cursor: pointer;
3730
- border-radius: 4px;
3815
+ border-radius: calc(4px * var(--vdd-radius-scale, 1));
3731
3816
  padding: 0;
3732
3817
  line-height: 1;
3733
3818
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
@@ -3766,8 +3851,8 @@ html.vdd-no-animations [class*="vdd-"]::after {
3766
3851
  width: 80px;
3767
3852
  height: 80px;
3768
3853
  border: 2px dashed var(--vdd-accent-color, #38bdf8);
3769
- border-radius: 8px;
3770
- background: rgba(56, 189, 248, 0.06);
3854
+ border-radius: calc(8px * var(--vdd-radius-scale, 1));
3855
+ background: color-mix(in srgb, var(--vdd-accent-color) 6%, transparent);
3771
3856
  pointer-events: none;
3772
3857
  z-index: 200;
3773
3858
  opacity: 0.55;
@@ -3776,7 +3861,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3776
3861
 
3777
3862
  .vdd-panel-float-dropzone--hovered {
3778
3863
  opacity: 1;
3779
- background: rgba(56, 189, 248, 0.18);
3864
+ background: color-mix(in srgb, var(--vdd-accent-color) 18%, transparent);
3780
3865
  border-style: solid;
3781
3866
  }
3782
3867
 
@@ -3800,7 +3885,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3800
3885
  --vdd-toast-success-color: #4ade80;
3801
3886
  --vdd-toast-warning-color: #fbbf24;
3802
3887
  --vdd-toast-error-color: #f87171;
3803
- --vdd-toast-bg: #2a2d32;
3888
+ --vdd-toast-bg: var(--vdd--b-toast-bg, #2a2d32);
3804
3889
  --vdd-toast-border: rgba(255, 255, 255, 0.14);
3805
3890
  }
3806
3891
  [data-color-scheme="light"] {
@@ -3808,7 +3893,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3808
3893
  --vdd-toast-success-color: #15803d;
3809
3894
  --vdd-toast-warning-color: #b45309;
3810
3895
  --vdd-toast-error-color: #b91c1c;
3811
- --vdd-toast-bg: #ffffff;
3896
+ --vdd-toast-bg: var(--vdd--b-toast-bg, #ffffff);
3812
3897
  --vdd-toast-border: rgba(0, 0, 0, 0.14);
3813
3898
  }
3814
3899
 
@@ -3833,7 +3918,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3833
3918
  .vdd-toast {
3834
3919
  pointer-events: all; position: relative; overflow: hidden;
3835
3920
  display: flex; align-items: flex-start; gap: 10px;
3836
- padding: 20px 14px; border-radius: 6px;
3921
+ padding: 20px 14px; border-radius: calc(6px * var(--vdd-radius-scale, 1));
3837
3922
  background: var(--vdd-toast-bg, #2a2d32);
3838
3923
  border: 1px solid var(--vdd-toast-border, rgba(255,255,255,0.14)); border-inline-start-width: 3px;
3839
3924
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.2);
@@ -3998,7 +4083,7 @@ html.vdd-no-animations [class*="vdd-"]::after {
3998
4083
  font-size: 2rem;
3999
4084
  font-weight: 600;
4000
4085
  color: var(--vdd-panel-title-color, var(--vdd-panel-text));
4001
- background: rgba(108, 117, 125, 0.15);
4086
+ background: color-mix(in srgb, var(--vdd--b-placeholder-bg, rgb(108 117 125)) 15%, transparent);
4002
4087
  border: 1px dashed var(--vdd-taskbar-item-border);
4003
4088
  user-select: none;
4004
4089
  }