@tecof/theme-editor 0.0.39 → 0.0.40

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/README.md +25 -25
  2. package/dist/index.d.mts +6 -6
  3. package/dist/index.d.ts +6 -6
  4. package/dist/index.js +1035 -1267
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +1035 -1267
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/styles.css +1711 -394
  9. package/package.json +31 -9
package/dist/styles.css CHANGED
@@ -71,24 +71,108 @@
71
71
 
72
72
 
73
73
  .doka--root{box-sizing:content-box;position:relative;overflow:hidden;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:100%;width:100%;line-height:normal;font-size:16px;font-size:var(--doka-font-size);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-family:var(--doka-font-family);font-weight:450;text-align:left;text-rendering:optimizeLegibility;direction:ltr;display:flex;justify-content:center;align-items:center;color:hsla(0,0%,100%,.9);color:var(--doka-editor--color);background:rgba(0,0,0,.99);background:var(--doka-editor--background-color);contain:strict;transition:background-color .25s ease-in-out,color .25s ease-in-out}.doka--root:before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:-1;background:radial-gradient(ellipse at center,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,0) 80%);background:radial-gradient(ellipse at center,var(--doka-editor--background-ellipse-inner-color) 0,var(--doka-editor--background-ellipse-outer-color) 80%)}.doka--root label{margin:0!important}.doka--root label:after,.doka--root label:before{content:none!important}.doka--root .doka--markup{display:flex;flex-direction:column}.doka--root .doka--markup .doka--toolbar{display:inline-flex;margin:0 auto;padding:1.25em 0}.doka--root .doka--markup-utils.doka--markup-utils{border:none;padding:0}.doka--root .doka--markup-utils.doka--markup-utils ul{list-style:none;margin:0;padding:0;display:flex}.doka--root .doka--markup-utils.doka--markup-utils li{margin:0 .75em}.doka--root .doka--markup-utils.doka--markup-utils input{display:none}.doka--root .doka--markup-utils.doka--markup-utils label{display:flex;align-items:center;pointer-events:all;padding:0 .75em 0 .5em;line-height:inherit;margin:0;height:2.5em;color:hsla(0,0%,100%,.9);color:var(--doka-button--color)}.doka--root .doka--markup-utils.doka--markup-utils input:checked+label{color:#ffd843;color:var(--doka-filter-tile-selected--color)}.doka--root .doka--toolbar[data-layout=compact] .doka--markup-utils li{margin:0 .3125em}.doka--root .doka--markup-tools{box-sizing:content-box;display:flex;flex-wrap:wrap;margin:auto 1em 0;padding:.3125em 0 .75em;justify-content:center;align-items:flex-end;max-height:3em;min-height:2.0625em}.doka--root .doka--markup-tools[data-active=true]{pointer-events:all!important}.doka--root .doka--markup-tools .doka--button span{text-align:left}.doka--root .doka--markup-tools .doka--dropdown>.doka--button{color:hsla(0,0%,100%,.9);color:var(--doka-button--color);background-color:hsla(0,0%,100%,.15);background-color:var(--doka-button--background);border-radius:9999em;line-height:1.75em;margin:0 .25em;font-size:.925em}.doka--root .doka--markup-tools .doka--dropdown>.doka--button>span{margin-left:.3125em}.doka--root .doka--markup-tools .doka--dropdown{margin-top:.5em}.doka--root .doka--markup-tools [data-active=false]>.doka--button{display:none}.doka--root .doka--markup-tools .doka--markup-color{margin-top:-.875em}.doka--root .doka--markup-tools .doka--markup-color[data-active=false]{display:none}.doka--root .doka--markup-color.doka--markup-color{display:flex;justify-content:center}.doka--root .doka--markup-color.doka--markup-color,.doka--root .doka--markup-color.doka--markup-color ul{list-style:none;margin:0;padding:0}.doka--root .doka--markup-color.doka--markup-color ul{display:flex;justify-content:center}.doka--root .doka--markup-color.doka--markup-color li{padding:0;margin:0 .125em}.doka--root .doka--markup-color.doka--markup-color li input{display:none}.doka--root .doka--markup-color.doka--markup-color label{display:block;overflow:hidden;color:transparent;width:1.5em;height:1.5em;margin:0;padding:0;font-weight:400;line-height:inherit;border-radius:9999em;transition:box-shadow .125s ease-out;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);cursor:inherit}.doka--root .doka--markup-color.doka--markup-color .doka--color-input input[data-selected=true]+label,.doka--root .doka--markup-color.doka--markup-color input:checked+label{box-shadow:inset 0 0 0 2px rgba(0,0,0,.5),0 0 0 2px #fff}.doka--root .doka--markup-color.doka--markup-color .doka--color-input{margin:0 .125em}.doka--root .doka--color-input{position:relative;display:flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:9999em;color:hsla(0,0%,100%,.9);color:var(--doka-button--color);background-color:hsla(0,0%,100%,.15);background-color:var(--doka-button--background)}.doka--root .doka--color-input label{overflow:hidden;background-image:radial-gradient(hsla(0,0%,100%,.3) 33%,hsla(0,0%,100%,0) 36%),url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23FECD09' d='M12 0h12v24H12z'/%3E%3Cpath fill='%2366AF01' d='M0 12h24v12H0z'/%3E%3Cpath fill='%237300CD' d='M0 0h12v24H0z'/%3E%3Cpath fill='%23E12224' d='M0 0h12v12H0z'/%3E%3Cpath fill='%23FF7D00' d='M12 12L24 0H12z'/%3E%3Cpath fill='%23B400AA' d='M0 12V0l12 12z'/%3E%3Cpath fill='%23039695' d='M12 24h12L12 12z'/%3E%3Cpath fill='%23465FCD' d='M12 24H0l12-12z'/%3E%3C/g%3E%3C/svg%3E")}.doka--root .doka--color-input input{position:absolute;opacity:0;-webkit-appearance:none;border:0;padding:0;margin:0;left:0;top:0;width:100%;height:100%;font-size:1em;min-width:0;min-height:0}.doka--root .doka--color-input span{position:absolute;pointer-events:none}.doka--root .doka--color-input .doka--color-visualizer{opacity:0;width:.375em;height:.375em;border-radius:1em;box-shadow:0 0 1px 1px #fff,0 0 0 1.5px rgba(0,0,0,.7);z-index:1}.doka--root .doka--color-input .doka--color-visualizer[style]{opacity:1}.doka--root .doka--color-input .doka--color-brightness{width:100%;height:100%;left:0;top:0;border-radius:9999em;background:#000;box-shadow:inset 0 0 .75em hsla(0,0%,100%,.25),0 0 1px #000;opacity:0}.doka--root[data-style-viewport~=x-cramped] .doka--markup-color{width:100%}.doka--root .doka--scroller{-webkit-overflow-scrolling:touch;overscroll-behavior-x:none;touch-action:pan-x;text-align:center;pointer-events:all;width:40em;margin:0 auto 1em;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scrollbar-color:hsla(0,0%,100%,.2) transparent;scrollbar-color:var(--doka-scroller-thumb--color) transparent}@supports (-ms-ime-align:auto){.doka--root .doka--scroller{overflow-x:hidden}}.doka--root .doka--scroller[data-drag-state=dragging] button,.doka--root .doka--scroller[data-drag-state=dragging] input{pointer-events:none!important}.doka--root .doka--scroller::-webkit-scrollbar{height:.375em;background-color:transparent;background-color:var(--doka-scroller-rail--color)}.doka--root .doka--scroller::-webkit-scrollbar-track{background:transparent}.doka--root .doka--scroller::-webkit-scrollbar-thumb{background-color:transparent;border-radius:9999rem;border:3px solid transparent;border:3px solid var(--doka-scroller-rail--color);transition:background-color .25s ease-in-out}@media (pointer:fine) and (hover:hover){.doka--root .doka--scroller:hover{scrollbar-width:thin}.doka--root .doka--scroller:hover::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.2);background-color:var(--doka-scroller-thumb--color)}}.doka--root[data-style-viewport*=x-cramped] .doka--filter-scroller{-ms-scroll-snap-type:proximity;scroll-snap-type:proximity;-ms-scroll-snap-type:x proximity;scroll-snap-type:x proximity;scroll-padding:2em;margin-bottom:0}.doka--root .doka--scroller{scrollbar-base-color:#111;scrollbar-face-color:#333;scrollbar-3dlight-color:#111;scrollbar-highlight-color:#111;scrollbar-track-color:#111;scrollbar-arrow-color:#111;scrollbar-shadow-color:#111}@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))) and (mix-blend-mode:screen){.doka--root .doka--scroller{margin:0 auto 1em;-webkit-mask:linear-gradient(90deg,transparent 0,#000 2em,#000 calc(100% - 2em),transparent),linear-gradient(0deg,#000 8px,transparent 0);mask:linear-gradient(90deg,transparent 0,#000 2em,#000 calc(100% - 2em),transparent),linear-gradient(0deg,#000 8px,transparent 0)}.doka--root[data-style-viewport*=x-cramped] .doka--scroller{-webkit-mask:linear-gradient(90deg,transparent 0,#000 1em,#000 calc(100% - 1em),transparent);mask:linear-gradient(90deg,transparent 0,#000 1em,#000 calc(100% - 1em),transparent)}}.doka--root .doka--sticker{height:calc(100% - 3em);width:calc(100% - 2em);left:1em;top:1em}.doka--root .doka--sticker-list{display:inline-flex;align-items:flex-start;list-style:none;margin:0;padding:0 2em .5em}.doka--root .doka--sticker-list li{margin:.25em .3125em;padding:0}.doka--root .doka--sticker-list li:first-child{margin-left:0}.doka--root .doka--sticker-list li:last-child{margin-right:0}.doka--root .doka--sticker-list button{background-color:hsla(0,0%,100%,.1);background-color:var(--doka-component--background-dim);padding:.25em}.doka--root .doka--sticker-list img,.doka--root .doka--sticker-list svg{display:block;width:2em;height:2em;-o-object-fit:contain;object-fit:contain;pointer-events:none;border-radius:.25em}.doka--root .doka--sticker-list span{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.doka--root[data-style-viewport*=x-cramped] .doka--sticker{display:flex;flex-direction:column-reverse;top:2em}.doka--root[data-style-viewport*=x-cramped] .doka--sticker .doka--sticker-list{padding:0 1em;height:3.5em}@media (-ms-high-contrast:none){.doka--root .doka--sticker-list li,::-ms-backdrop{flex:none;width:2.5em}}.doka--root .doka--status-progress{display:none;background-color:rgba(0,0,0,.2);background-color:var(--doka-status-bubble--color-dim);border-radius:50%;pointer-events:none}.doka--root .doka--status-bubble{pointer-events:none;will-change:transform;text-align:center}.doka--root .doka--status-bubble .doka--status-bubble-inner{position:relative;display:inline-block;color:rgba(0,0,0,.8);color:var(--doka-status-bubble--color);background-color:hsla(0,0%,100%,.75);background-color:var(--doka-status-bubble--background);box-shadow:0 .125em 1em rgba(0,0,0,.2);box-shadow:var(--doka-status-bubble--shadow);transition:background-color .25s ease-in-out,color .25s ease-in-out;font-size:.875em;max-width:80%;margin:0 auto;border-radius:1em;line-height:1.5;text-align:center;padding:.1875em 1em .25em}.doka--root .doka--status-bubble p{display:inline;margin:0;padding:0}.doka--root .doka--status-bubble .doka--status-progress:not([data-value="0"]){position:absolute;display:block;right:.35em;top:.35em;width:1.25em;height:1.25em}.doka--root .doka--status-bubble .doka--status-progress:not([data-value="0"])+p,.doka--root .doka--status-bubble button+p{padding-right:1.5em}.doka--root .doka--status-bubble button{position:relative;z-index:1;margin:0;padding:0;border:none;font-family:inherit;font-size:1em;font-weight:400;outline:transparent;display:flex;justify-content:center;align-items:center;pointer-events:all;border-radius:9999em;width:18px;height:18px;color:hsla(0,0%,100%,.75);color:var(--doka-status-bubble--background);background-color:rgba(0,0,0,.8);background-color:var(--doka-status-bubble--color);position:absolute;right:.375em;top:.35em}.doka--root .doka--status-bubble button svg{width:.875em;height:.875em}.doka--root .doka--status-bubble button:after{content:"";position:absolute;left:-1em;right:-1em;top:-1em;bottom:-1em}@supports ((-webkit-backdrop-filter:var(--doka-effect--frost)) or (backdrop-filter:var(--doka-effect--frost))){.doka--root .doka--status-bubble-inner{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-backdrop-filter:var(--doka-effect--frost);backdrop-filter:var(--doka-effect--frost);background:hsla(0,0%,100%,.5);background:var(--doka-status-bubble-effect--background)}}.doka--root .doka--toolbar{z-index:3;flex-shrink:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1.25em 0;pointer-events:none;margin:0 2em}.doka--root .doka--toolbar>*{pointer-events:all;margin:0 .75em;height:2.5em}.doka--root .doka--toolbar svg{display:inline-block;flex-shrink:0}.doka--root .doka--toolbar svg *{transition:opacity .25s ease-out,transform .5s ease-out}.doka--root .doka--toolbar .doka--button{white-space:nowrap;flex-shrink:0}.doka--root[data-style-viewport~=flow-controls][data-style-viewport~=single-util]:not([data-style-viewport~=x-cramped]) .doka--toolbar{margin:-4.875em 11em 0}.doka--root .doka--toolbar[data-layout=compact]>*{margin:0 .5em}.doka--root[data-style-viewport~=x-cramped] .doka--toolbar{padding:1em 0}.doka--root[data-style-viewport~=x-cramped] .doka--toolbar>*{margin:0 .25em}.doka--root .doka--utils{display:flex;justify-content:center;flex:1;padding:0;overflow:hidden}.doka--root .doka--utils>*{pointer-events:all}.doka--root .doka--utils>*+*{margin-left:1px}/* @tecof/theme-editor ─── Core styles ─── */
74
+
75
+ /* ═══════════════════════════════════════════════════════════════════
76
+ Tecof Editor — Design System / :root Tokens
77
+ Marka paleti: lime-green. KURAL: 600 = ana renk, 700 = hover.
78
+ Accent zemini üzerine KOYU yazı (--tecof-accent-fg) kullanılır (AA kontrast).
79
+ Bu token'lar yalnızca editör arayüzünü boyar; kullanıcı sitesinin teması
80
+ (--theme-* değişkenleri, generateCSSVariables) bundan etkilenmez.
81
+ ═══════════════════════════════════════════════════════════════════ */
82
+ :root {
83
+ /* ─── Marka Paleti (lime-green) ─── */
84
+ --tecof-primary-50: #faffe4;
85
+ --tecof-primary-100: #f2ffc5;
86
+ --tecof-primary-200: #e3ff92;
87
+ --tecof-primary-300: #ceff53;
88
+ --tecof-primary-400: #b6fb20;
89
+ --tecof-primary-500: #9ae600;
90
+ --tecof-primary-600: #74b500; /* ANA renk */
91
+ --tecof-primary-700: #588902; /* HOVER */
92
+ --tecof-primary-800: #476c08;
93
+ --tecof-primary-900: #3c5b0c;
94
+ --tecof-primary-950: #1d3300;
95
+
96
+ /* ─── Semantik Accent Token'ları ─── */
97
+ --tecof-accent: var(--tecof-primary-600);
98
+ --tecof-accent-hover: var(--tecof-primary-700);
99
+ --tecof-accent-active: var(--tecof-primary-800);
100
+ --tecof-accent-fg: var(--tecof-primary-950); /* zemin üstü KOYU yazı */
101
+ --tecof-accent-subtle: var(--tecof-primary-50); /* tint arka plan */
102
+ --tecof-accent-subtle-hover: var(--tecof-primary-100);
103
+ --tecof-accent-border: var(--tecof-primary-300);
104
+ --tecof-accent-text: var(--tecof-primary-700); /* açık zeminde okunur accent metin */
105
+ --tecof-accent-ring: rgba(116, 181, 0, 0.30); /* focus halkası = 600 @30% */
106
+
107
+ /* ─── Nötr / yüzey ölçeği ─── */
108
+ --tecof-bg: #f4f4f5;
109
+ --tecof-surface: #ffffff;
110
+ --tecof-surface-2: #fafafa;
111
+ --tecof-border: #e4e4e7;
112
+ --tecof-border-subtle: rgba(228, 228, 231, 0.8);
113
+ --tecof-border-strong: #d4d4d8;
114
+ --tecof-text: #18181b;
115
+ --tecof-text-soft: #3f3f46;
116
+ --tecof-text-muted: #71717a;
117
+ --tecof-text-subtle: #a1a1aa;
118
+ --tecof-text-faint: #d4d4d8;
119
+ --tecof-danger: #ef4444;
120
+ --tecof-danger-bg: #fef2f2;
121
+ --tecof-danger-border: #fecaca;
122
+ --tecof-danger-border-strong: #fca5a5;
123
+ --tecof-danger-text: #991b1b;
124
+ --tecof-danger-hover: #dc2626;
125
+ --tecof-success: #10b981;
126
+ --tecof-success-bg: #f0fdf4;
127
+ --tecof-success-text: #16a34a;
128
+ --tecof-success-bright: #22c55e;
129
+ --tecof-warning: #f59e0b;
130
+ --tecof-warning-bg: #fef3c7;
131
+ --tecof-warning-text: #d97706;
132
+
133
+ /* ─── Şekil / border / gölge ─── */
134
+ --tecof-radius-xs: 4px;
135
+ --tecof-radius-sm: 6px;
136
+ --tecof-radius: 8px;
137
+ --tecof-radius-lg: 12px;
138
+ --tecof-radius-xl: 16px;
139
+ --tecof-radius-pill: 999px;
140
+ --tecof-line: 1px solid var(--tecof-border);
141
+ --tecof-line-subtle: 1px solid var(--tecof-border-subtle);
142
+ --tecof-line-strong: 1px solid var(--tecof-border-strong);
143
+ --tecof-line-dashed: 1px dashed var(--tecof-border-strong);
144
+ --tecof-focus-ring: 0 0 0 3px rgba(116, 181, 0, 0.10);
145
+ --tecof-focus-ring-strong: 0 0 0 3px rgba(116, 181, 0, 0.15);
146
+ --tecof-danger-ring: 0 0 0 3px rgba(239, 68, 68, 0.10);
147
+ --tecof-overlay-scrim: rgba(9, 9, 11, 0.60);
148
+ --tecof-scrollbar-thumb: rgba(0, 0, 0, 0.15);
149
+ --tecof-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
150
+ --tecof-toolbar-hover: rgba(0, 0, 0, 0.12);
151
+ --tecof-toolbar-separator: rgba(0, 0, 0, 0.18);
152
+ --tecof-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
153
+ --tecof-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
154
+ --tecof-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
155
+ --tecof-transition: all 0.2s ease;
156
+ }
157
+
74
158
  /* ─── CodeEditorField ─── */
75
159
  .tecof-code-editor-container {
76
160
  width: 100%;
77
161
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
78
- border: 1px solid #e4e4e7;
79
- border-radius: 8px;
162
+ border: var(--tecof-line);
163
+ border-radius: var(--tecof-radius);
80
164
  overflow: hidden;
81
- background: #ffffff;
165
+ background: var(--tecof-surface);
82
166
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
83
167
  }
84
168
 
85
169
  .tecof-code-editor-container:hover {
86
- border-color: #d4d4d8;
170
+ border-color: var(--tecof-border-strong);
87
171
  }
88
172
 
89
173
  .tecof-code-editor-container:focus-within {
90
- border-color: var(--tecof-primary-500, #3b82f6);
91
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
174
+ border-color: var(--tecof-accent);
175
+ box-shadow: var(--tecof-focus-ring);
92
176
  outline: none;
93
177
  }
94
178
 
@@ -112,7 +196,7 @@
112
196
  width: 40px;
113
197
  height: 40px;
114
198
  border-radius: 10px;
115
- border: 2px solid #e4e4e7;
199
+ border: 2px solid var(--tecof-border);
116
200
  cursor: pointer;
117
201
  flex-shrink: 0;
118
202
  overflow: hidden;
@@ -120,8 +204,8 @@
120
204
  }
121
205
 
122
206
  .tecof-color-swatch.focused {
123
- border-color: var(--tecof-primary-500, #3b82f6);
124
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
207
+ border-color: var(--tecof-accent);
208
+ box-shadow: var(--tecof-focus-ring);
125
209
  }
126
210
 
127
211
  .tecof-color-native-input {
@@ -141,10 +225,10 @@
141
225
  padding: 8px 12px;
142
226
  font-size: 14px;
143
227
  line-height: 1.5;
144
- color: #18181b;
145
- background: #ffffff;
146
- border: 1px solid #e4e4e7;
147
- border-radius: 8px;
228
+ color: var(--tecof-text);
229
+ background: var(--tecof-surface);
230
+ border: var(--tecof-line);
231
+ border-radius: var(--tecof-radius);
148
232
  outline: none;
149
233
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
150
234
  letter-spacing: 0.5px;
@@ -155,13 +239,13 @@
155
239
  }
156
240
 
157
241
  .tecof-color-hex-input:focus {
158
- border-color: var(--tecof-primary-500, #3b82f6);
159
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
242
+ border-color: var(--tecof-accent);
243
+ box-shadow: var(--tecof-focus-ring);
160
244
  }
161
245
 
162
246
  .tecof-color-hex-input.invalid {
163
- border-color: #ef4444;
164
- box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
247
+ border-color: var(--tecof-danger);
248
+ box-shadow: var(--tecof-danger-ring);
165
249
  }
166
250
 
167
251
  .tecof-color-action-btn {
@@ -170,18 +254,18 @@
170
254
  justify-content: center;
171
255
  width: 36px;
172
256
  height: 36px;
173
- color: #71717a;
174
- background: #f4f4f5;
175
- border: 1px solid #e4e4e7;
176
- border-radius: 8px;
257
+ color: var(--tecof-text-muted);
258
+ background: var(--tecof-bg);
259
+ border: var(--tecof-line);
260
+ border-radius: var(--tecof-radius);
177
261
  cursor: pointer;
178
262
  transition: all 0.2s ease;
179
263
  flex-shrink: 0;
180
264
  }
181
265
 
182
266
  .tecof-color-action-btn:hover {
183
- background: #e4e4e7;
184
- color: #3f3f46;
267
+ background: var(--tecof-border);
268
+ color: var(--tecof-text-soft);
185
269
  }
186
270
 
187
271
  .tecof-color-preset-grid {
@@ -193,7 +277,7 @@
193
277
  .tecof-color-preset-swatch {
194
278
  width: 100%;
195
279
  aspect-ratio: 1;
196
- border-radius: 6px;
280
+ border-radius: var(--tecof-radius-sm);
197
281
  border: 1px solid transparent;
198
282
  cursor: pointer;
199
283
  transition: transform 0.1s ease, box-shadow 0.1s ease;
@@ -202,12 +286,12 @@
202
286
  }
203
287
 
204
288
  .tecof-color-preset-swatch.is-white {
205
- border-color: #e4e4e7;
289
+ border-color: var(--tecof-border);
206
290
  }
207
291
 
208
292
  .tecof-color-preset-swatch.selected {
209
- border: 2px solid var(--tecof-primary-500, #3b82f6);
210
- box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
293
+ border: 2px solid var(--tecof-accent);
294
+ box-shadow: 0 0 0 2px rgba(116, 181, 0, 0.2);
211
295
  }
212
296
 
213
297
  .tecof-color-opacity-row {
@@ -219,7 +303,7 @@
219
303
  .tecof-color-opacity-label {
220
304
  font-size: 11px;
221
305
  font-weight: 600;
222
- color: #71717a;
306
+ color: var(--tecof-text-muted);
223
307
  text-transform: uppercase;
224
308
  letter-spacing: 0.5px;
225
309
  flex-shrink: 0;
@@ -231,7 +315,7 @@
231
315
  height: 6px;
232
316
  -webkit-appearance: none;
233
317
  appearance: none;
234
- background: #e4e4e7;
318
+ background: var(--tecof-border);
235
319
  border-radius: 3px;
236
320
  outline: none;
237
321
  cursor: pointer;
@@ -243,8 +327,8 @@
243
327
  width: 16px;
244
328
  height: 16px;
245
329
  border-radius: 50%;
246
- background: #ffffff;
247
- border: 2px solid var(--tecof-primary-500, #3b82f6);
330
+ background: var(--tecof-surface);
331
+ border: 2px solid var(--tecof-accent);
248
332
  cursor: pointer;
249
333
  transition: transform 0.1s ease;
250
334
  }
@@ -256,7 +340,7 @@
256
340
  .tecof-color-opacity-value {
257
341
  font-size: 12px;
258
342
  font-weight: 500;
259
- color: #3f3f46;
343
+ color: var(--tecof-text-soft);
260
344
  width: 32px;
261
345
  text-align: right;
262
346
  }
@@ -264,7 +348,7 @@
264
348
  .tecof-color-section-label {
265
349
  font-size: 11px;
266
350
  font-weight: 600;
267
- color: #a1a1aa;
351
+ color: var(--tecof-text-subtle);
268
352
  text-transform: uppercase;
269
353
  letter-spacing: 0.5px;
270
354
  margin: 4px 0 2px 0;
@@ -272,7 +356,7 @@
272
356
 
273
357
  /* ─── EditorField ─── */
274
358
  .tecof-editor-wrapper {
275
- background: #ffffff;
359
+ background: var(--tecof-surface);
276
360
  }
277
361
 
278
362
  .tecof-editor-toolbar {
@@ -280,8 +364,8 @@
280
364
  flex-wrap: wrap;
281
365
  gap: 1px;
282
366
  padding: 4px 6px;
283
- border-bottom: 1px solid #e4e4e7;
284
- background: #fafafa;
367
+ border-bottom: 1px solid var(--tecof-border);
368
+ background: var(--tecof-surface-2);
285
369
  }
286
370
 
287
371
  .tecof-editor-toolbar-btn {
@@ -293,10 +377,10 @@
293
377
  padding: 0;
294
378
  font-size: 13px;
295
379
  font-weight: 400;
296
- color: #52525b;
380
+ color: var(--tecof-text-muted);
297
381
  background: transparent;
298
382
  border: none;
299
- border-radius: 4px;
383
+ border-radius: var(--tecof-radius-xs);
300
384
  cursor: pointer;
301
385
  transition: all 0.15s ease;
302
386
  outline: none;
@@ -304,20 +388,20 @@
304
388
  }
305
389
 
306
390
  .tecof-editor-toolbar-btn:hover {
307
- background: #e4e4e7;
308
- color: #18181b;
391
+ background: var(--tecof-border);
392
+ color: var(--tecof-text);
309
393
  }
310
394
 
311
395
  .tecof-editor-toolbar-btn.active {
312
396
  font-weight: 700;
313
- color: var(--tecof-primary-500, #3b82f6);
314
- background: #eff6ff;
397
+ color: var(--tecof-accent);
398
+ background: var(--tecof-accent-subtle);
315
399
  }
316
400
 
317
401
  .tecof-editor-divider {
318
402
  width: 1px;
319
403
  height: 20px;
320
- background: #e4e4e7;
404
+ background: var(--tecof-border);
321
405
  margin: 4px 3px;
322
406
  align-self: center;
323
407
  }
@@ -329,7 +413,7 @@
329
413
  outline: none;
330
414
  font-size: 14px;
331
415
  line-height: 1.6;
332
- color: #18181b;
416
+ color: var(--tecof-text);
333
417
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
334
418
  }
335
419
 
@@ -366,20 +450,20 @@
366
450
  }
367
451
 
368
452
  .tecof-editor-field .tiptap blockquote {
369
- border-left: 3px solid #e4e4e7;
453
+ border-left: 3px solid var(--tecof-border);
370
454
  padding-left: 12px;
371
455
  margin: 0.6em 0;
372
- color: #71717a;
456
+ color: var(--tecof-text-muted);
373
457
  font-style: italic;
374
458
  }
375
459
 
376
460
  .tecof-editor-field .tiptap a {
377
- color: var(--tecof-primary-500, #3b82f6);
461
+ color: var(--tecof-accent);
378
462
  text-decoration: underline;
379
463
  }
380
464
 
381
465
  .tecof-editor-field .tiptap code {
382
- background: #f4f4f5;
466
+ background: var(--tecof-bg);
383
467
  padding: 2px 4px;
384
468
  border-radius: 3px;
385
469
  font-family: 'SF Mono', 'Fira Code', monospace;
@@ -387,10 +471,10 @@
387
471
  }
388
472
 
389
473
  .tecof-editor-field .tiptap pre {
390
- background: #18181b;
391
- color: #e4e4e7;
474
+ background: var(--tecof-text);
475
+ color: var(--tecof-border);
392
476
  padding: 12px 16px;
393
- border-radius: 6px;
477
+ border-radius: var(--tecof-radius-sm);
394
478
  font-family: 'SF Mono', 'Fira Code', monospace;
395
479
  font-size: 13px;
396
480
  overflow-x: auto;
@@ -398,7 +482,7 @@
398
482
 
399
483
  .tecof-editor-field .tiptap hr {
400
484
  border: none;
401
- border-top: 1px solid #e4e4e7;
485
+ border-top: 1px solid var(--tecof-border);
402
486
  margin: 1em 0;
403
487
  }
404
488
 
@@ -412,8 +496,8 @@
412
496
  display: flex;
413
497
  gap: 2px;
414
498
  margin-bottom: 8px;
415
- border-radius: 8px;
416
- background: #f4f4f5;
499
+ border-radius: var(--tecof-radius);
500
+ background: var(--tecof-bg);
417
501
  padding: 3px;
418
502
  overflow: hidden;
419
503
  }
@@ -427,10 +511,10 @@
427
511
  padding: 6px 8px;
428
512
  font-size: 12px;
429
513
  font-weight: 400;
430
- color: #71717a;
514
+ color: var(--tecof-text-muted);
431
515
  background: transparent;
432
516
  border: none;
433
- border-radius: 6px;
517
+ border-radius: var(--tecof-radius-sm);
434
518
  cursor: pointer;
435
519
  transition: all 0.15s ease;
436
520
  outline: none;
@@ -438,21 +522,21 @@
438
522
  }
439
523
 
440
524
  .tecof-lang-tab:hover {
441
- color: #3f3f46;
525
+ color: var(--tecof-text-soft);
442
526
  }
443
527
 
444
528
  .tecof-lang-tab.active {
445
529
  font-weight: 600;
446
- color: #18181b;
447
- background: #ffffff;
530
+ color: var(--tecof-text);
531
+ background: var(--tecof-surface);
448
532
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
449
533
  }
450
534
 
451
535
  .tecof-lang-default-badge {
452
536
  font-size: 8px;
453
537
  font-weight: 700;
454
- color: #ffffff;
455
- background: var(--tecof-primary-500, #3b82f6);
538
+ color: var(--tecof-accent-fg);
539
+ background: var(--tecof-accent);
456
540
  border-radius: 3px;
457
541
  padding: 1px 4px;
458
542
  line-height: 12px;
@@ -468,10 +552,10 @@
468
552
  padding: 8px 12px;
469
553
  font-size: 14px;
470
554
  line-height: 1.5;
471
- color: #18181b;
472
- background: #ffffff;
473
- border: 1px solid #e4e4e7;
474
- border-radius: 8px;
555
+ color: var(--tecof-text);
556
+ background: var(--tecof-surface);
557
+ border: var(--tecof-line);
558
+ border-radius: var(--tecof-radius);
475
559
  outline: none;
476
560
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
477
561
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
@@ -479,8 +563,8 @@
479
563
  }
480
564
 
481
565
  .tecof-lang-input:focus {
482
- border-color: var(--tecof-primary-500, #3b82f6);
483
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
566
+ border-color: var(--tecof-accent);
567
+ box-shadow: var(--tecof-focus-ring);
484
568
  }
485
569
 
486
570
  .tecof-lang-textarea {
@@ -494,14 +578,14 @@
494
578
  justify-content: center;
495
579
  padding: 12px;
496
580
  font-size: 12px;
497
- color: #71717a;
581
+ color: var(--tecof-text-muted);
498
582
  }
499
583
 
500
584
  .tecof-lang-loading-dot {
501
585
  width: 6px;
502
586
  height: 6px;
503
587
  border-radius: 50%;
504
- background: #a1a1aa;
588
+ background: var(--tecof-text-subtle);
505
589
  margin: 0 2px;
506
590
  display: inline-block;
507
591
  }
@@ -509,9 +593,9 @@
509
593
  .tecof-lang-error {
510
594
  padding: 8px 12px;
511
595
  font-size: 12px;
512
- color: #ef4444;
513
- background: #fef2f2;
514
- border-radius: 6px;
596
+ color: var(--tecof-danger);
597
+ background: var(--tecof-danger-bg);
598
+ border-radius: var(--tecof-radius-sm);
515
599
  text-align: center;
516
600
  }
517
601
 
@@ -528,18 +612,18 @@
528
612
  padding: 4px 8px;
529
613
  font-size: 11px;
530
614
  font-weight: 500;
531
- color: #71717a;
532
- background: #f4f4f5;
533
- border: 1px solid #e4e4e7;
534
- border-radius: 6px;
615
+ color: var(--tecof-text-muted);
616
+ background: var(--tecof-bg);
617
+ border: var(--tecof-line);
618
+ border-radius: var(--tecof-radius-sm);
535
619
  cursor: pointer;
536
620
  transition: all 0.15s ease;
537
621
  white-space: nowrap;
538
622
  }
539
623
 
540
624
  .tecof-lang-action-btn:hover:not(:disabled) {
541
- background: #e4e4e7;
542
- color: #3f3f46;
625
+ background: var(--tecof-border);
626
+ color: var(--tecof-text-soft);
543
627
  }
544
628
 
545
629
  .tecof-lang-action-btn:disabled {
@@ -550,20 +634,20 @@
550
634
  .tecof-lang-status-msg {
551
635
  font-size: 11px;
552
636
  padding: 4px 8px;
553
- border-radius: 6px;
637
+ border-radius: var(--tecof-radius-sm);
554
638
  display: flex;
555
639
  align-items: center;
556
640
  gap: 4px;
557
641
  }
558
642
 
559
643
  .tecof-lang-status-msg.success {
560
- color: #16a34a;
561
- background: #f0fdf4;
644
+ color: var(--tecof-success-text);
645
+ background: var(--tecof-success-bg);
562
646
  }
563
647
 
564
648
  .tecof-lang-status-msg.error {
565
- color: #dc2626;
566
- background: #fef2f2;
649
+ color: var(--tecof-danger-hover);
650
+ background: var(--tecof-danger-bg);
567
651
  }
568
652
 
569
653
  @keyframes tecof-pulse {
@@ -593,8 +677,8 @@
593
677
  align-items: center;
594
678
  gap: 10px;
595
679
  padding: 10px 12px;
596
- background: #fafafa;
597
- border: 1px solid #e4e4e7;
680
+ background: var(--tecof-surface-2);
681
+ border: var(--tecof-line);
598
682
  border-radius: 10px;
599
683
  transition: all 0.15s ease;
600
684
  }
@@ -602,12 +686,12 @@
602
686
  .tecof-link-value-icon {
603
687
  width: 36px;
604
688
  height: 36px;
605
- border-radius: 8px;
606
- background: #eff6ff;
689
+ border-radius: var(--tecof-radius);
690
+ background: var(--tecof-accent-subtle);
607
691
  display: flex;
608
692
  align-items: center;
609
693
  justify-content: center;
610
- color: var(--tecof-primary-500, #3b82f6);
694
+ color: var(--tecof-accent);
611
695
  flex-shrink: 0;
612
696
  }
613
697
 
@@ -619,7 +703,7 @@
619
703
  .tecof-link-value-label {
620
704
  font-size: 13px;
621
705
  font-weight: 500;
622
- color: #18181b;
706
+ color: var(--tecof-text);
623
707
  margin: 0;
624
708
  white-space: nowrap;
625
709
  overflow: hidden;
@@ -628,7 +712,7 @@
628
712
 
629
713
  .tecof-link-value-url {
630
714
  font-size: 11px;
631
- color: #a1a1aa;
715
+ color: var(--tecof-text-subtle);
632
716
  margin: 2px 0 0;
633
717
  white-space: nowrap;
634
718
  overflow: hidden;
@@ -639,19 +723,19 @@
639
723
  font-size: 10px;
640
724
  font-weight: 600;
641
725
  padding: 2px 6px;
642
- border-radius: 4px;
726
+ border-radius: var(--tecof-radius-xs);
643
727
  line-height: 14px;
644
728
  flex-shrink: 0;
645
729
  }
646
730
 
647
731
  .tecof-link-badge-page {
648
- background: #dbeafe;
649
- color: #2563eb;
732
+ background: var(--tecof-accent-subtle-hover);
733
+ color: var(--tecof-accent-text);
650
734
  }
651
735
 
652
736
  .tecof-link-badge-custom {
653
- background: #fef3c7;
654
- color: #d97706;
737
+ background: var(--tecof-warning-bg);
738
+ color: var(--tecof-warning-text);
655
739
  }
656
740
 
657
741
  .tecof-link-action-btn-small {
@@ -660,18 +744,18 @@
660
744
  justify-content: center;
661
745
  width: 28px;
662
746
  height: 28px;
663
- color: #a1a1aa;
747
+ color: var(--tecof-text-subtle);
664
748
  background: none;
665
749
  border: none;
666
- border-radius: 6px;
750
+ border-radius: var(--tecof-radius-sm);
667
751
  cursor: pointer;
668
752
  flex-shrink: 0;
669
753
  transition: background-color 0.15s ease, color 0.15s ease;
670
754
  }
671
755
 
672
756
  .tecof-link-action-btn-small:hover {
673
- background: #f4f4f5;
674
- color: #18181b;
757
+ background: var(--tecof-bg);
758
+ color: var(--tecof-text);
675
759
  }
676
760
 
677
761
  .tecof-link-main-actions {
@@ -688,16 +772,16 @@
688
772
  padding: 10px;
689
773
  font-size: 13px;
690
774
  font-weight: 500;
691
- color: #3f3f46;
692
- background: #f4f4f5;
693
- border: 1px solid #e4e4e7;
694
- border-radius: 8px;
775
+ color: var(--tecof-text-soft);
776
+ background: var(--tecof-bg);
777
+ border: var(--tecof-line);
778
+ border-radius: var(--tecof-radius);
695
779
  cursor: pointer;
696
780
  transition: all 0.15s ease;
697
781
  }
698
782
 
699
783
  .tecof-link-btn-secondary:hover {
700
- background: #e4e4e7;
784
+ background: var(--tecof-border);
701
785
  }
702
786
 
703
787
  .tecof-link-input-group {
@@ -705,15 +789,15 @@
705
789
  flex-direction: column;
706
790
  gap: 8px;
707
791
  padding: 12px;
708
- background: #fafafa;
709
- border: 1px solid #e4e4e7;
792
+ background: var(--tecof-surface-2);
793
+ border: var(--tecof-line);
710
794
  border-radius: 10px;
711
795
  }
712
796
 
713
797
  .tecof-link-input-label {
714
798
  font-size: 11px;
715
799
  font-weight: 600;
716
- color: #71717a;
800
+ color: var(--tecof-text-muted);
717
801
  margin: 0;
718
802
  text-transform: uppercase;
719
803
  letter-spacing: 0.5px;
@@ -724,18 +808,18 @@
724
808
  box-sizing: border-box;
725
809
  padding: 8px 10px;
726
810
  font-size: 13px;
727
- border: 1px solid #e4e4e7;
728
- border-radius: 6px;
811
+ border: var(--tecof-line);
812
+ border-radius: var(--tecof-radius-sm);
729
813
  outline: none;
730
- background: #fff;
731
- color: #18181b;
814
+ background: var(--tecof-surface);
815
+ color: var(--tecof-text);
732
816
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
733
817
  }
734
818
 
735
819
  .tecof-link-input:focus,
736
820
  .tecof-link-select-small:focus {
737
- border-color: var(--tecof-primary-500, #3b82f6);
738
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
821
+ border-color: var(--tecof-accent);
822
+ box-shadow: var(--tecof-focus-ring);
739
823
  }
740
824
 
741
825
  .tecof-link-input-row {
@@ -746,11 +830,11 @@
746
830
  .tecof-link-select-small {
747
831
  padding: 8px 10px;
748
832
  font-size: 13px;
749
- border: 1px solid #e4e4e7;
750
- border-radius: 6px;
833
+ border: var(--tecof-line);
834
+ border-radius: var(--tecof-radius-sm);
751
835
  outline: none;
752
- background: #fff;
753
- color: #18181b;
836
+ background: var(--tecof-surface);
837
+ color: var(--tecof-text);
754
838
  cursor: pointer;
755
839
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
756
840
  }
@@ -763,16 +847,16 @@
763
847
  padding: 8px 16px;
764
848
  font-size: 13px;
765
849
  font-weight: 500;
766
- color: #fff;
767
- background: var(--tecof-primary-500, #3b82f6);
850
+ color: var(--tecof-surface);
851
+ background: var(--tecof-accent);
768
852
  border: none;
769
- border-radius: 6px;
853
+ border-radius: var(--tecof-radius-sm);
770
854
  cursor: pointer;
771
855
  transition: background-color 0.15s ease;
772
856
  }
773
857
 
774
858
  .tecof-link-btn-confirm:hover {
775
- background: var(--tecof-primary-600, #2563eb);
859
+ background: var(--tecof-accent-hover);
776
860
  }
777
861
 
778
862
  .tecof-link-drawer-overlay {
@@ -790,7 +874,7 @@
790
874
  height: 70vh;
791
875
  display: flex;
792
876
  flex-direction: column;
793
- background: #ffffff;
877
+ background: var(--tecof-surface);
794
878
  border-top-left-radius: 16px;
795
879
  border-top-right-radius: 16px;
796
880
  z-index: 10000;
@@ -811,7 +895,7 @@
811
895
  }
812
896
 
813
897
  .tecof-link-drawer-close-btn {
814
- background: #f4f4f5;
898
+ background: var(--tecof-bg);
815
899
  border: none;
816
900
  border-radius: 50%;
817
901
  width: 32px;
@@ -824,7 +908,7 @@
824
908
  }
825
909
 
826
910
  .tecof-link-drawer-close-btn:hover {
827
- background: #e4e4e7;
911
+ background: var(--tecof-border);
828
912
  }
829
913
 
830
914
  .tecof-link-search-box {
@@ -832,8 +916,8 @@
832
916
  align-items: center;
833
917
  gap: 8px;
834
918
  padding: 8px 12px;
835
- background: #f4f4f5;
836
- border-radius: 8px;
919
+ background: var(--tecof-bg);
920
+ border-radius: var(--tecof-radius);
837
921
  margin-bottom: 12px;
838
922
  }
839
923
 
@@ -843,7 +927,7 @@
843
927
  background: transparent;
844
928
  outline: none;
845
929
  font-size: 13px;
846
- color: #18181b;
930
+ color: var(--tecof-text);
847
931
  }
848
932
 
849
933
  .tecof-link-page-list {
@@ -859,33 +943,33 @@
859
943
  align-items: center;
860
944
  gap: 10px;
861
945
  padding: 10px 12px;
862
- background: #fff;
863
- border: 1px solid #f4f4f5;
864
- border-radius: 8px;
946
+ background: var(--tecof-surface);
947
+ border: 1px solid var(--tecof-bg);
948
+ border-radius: var(--tecof-radius);
865
949
  cursor: pointer;
866
950
  transition: all 0.15s ease;
867
951
  }
868
952
 
869
953
  .tecof-link-page-item:hover {
870
- background: #fafafa;
954
+ background: var(--tecof-surface-2);
871
955
  }
872
956
 
873
957
  .tecof-link-page-item.selected {
874
- background: #eff6ff;
875
- border-color: var(--tecof-primary-500, #3b82f6);
958
+ background: var(--tecof-accent-subtle);
959
+ border-color: var(--tecof-accent);
876
960
  }
877
961
 
878
962
  .tecof-link-page-slug {
879
963
  font-size: 13px;
880
964
  font-weight: 500;
881
- color: #18181b;
965
+ color: var(--tecof-text);
882
966
  margin: 0;
883
967
  flex: 1;
884
968
  }
885
969
 
886
970
  .tecof-link-page-title {
887
971
  font-size: 11px;
888
- color: #a1a1aa;
972
+ color: var(--tecof-text-subtle);
889
973
  margin: 2px 0 0;
890
974
  }
891
975
 
@@ -897,15 +981,15 @@
897
981
  }
898
982
 
899
983
  .tecof-link-status-dot.published {
900
- background: #22c55e;
984
+ background: var(--tecof-success-bright);
901
985
  }
902
986
 
903
987
  .tecof-link-status-dot.changed {
904
- background: #f59e0b;
988
+ background: var(--tecof-warning);
905
989
  }
906
990
 
907
991
  .tecof-link-status-dot.draft {
908
- background: #a1a1aa;
992
+ background: var(--tecof-text-subtle);
909
993
  }
910
994
 
911
995
  /* ─── UploadField ─── */
@@ -925,40 +1009,40 @@
925
1009
  align-items: center;
926
1010
  justify-content: center;
927
1011
  padding: 16px 12px;
928
- background: #fafafa;
929
- border: 1px dashed #e4e4e7;
930
- border-radius: 8px;
1012
+ background: var(--tecof-surface-2);
1013
+ border: 1px dashed var(--tecof-border);
1014
+ border-radius: var(--tecof-radius);
931
1015
  cursor: pointer;
932
1016
  transition: all 0.2s ease;
933
1017
  }
934
1018
 
935
1019
  .tecof-upload-empty-state:hover {
936
- border-color: #18181b;
937
- background: #fafafa;
1020
+ border-color: var(--tecof-text);
1021
+ background: var(--tecof-surface-2);
938
1022
  }
939
1023
 
940
1024
  .tecof-upload-empty-icon {
941
1025
  width: 32px;
942
1026
  height: 32px;
943
- border-radius: 8px;
944
- background: #f4f4f5;
1027
+ border-radius: var(--tecof-radius);
1028
+ background: var(--tecof-bg);
945
1029
  display: flex;
946
1030
  align-items: center;
947
1031
  justify-content: center;
948
- color: #71717a;
1032
+ color: var(--tecof-text-muted);
949
1033
  margin-bottom: 8px;
950
1034
  }
951
1035
 
952
1036
  .tecof-upload-empty-title {
953
1037
  font-size: 12px;
954
1038
  font-weight: 500;
955
- color: #18181b;
1039
+ color: var(--tecof-text);
956
1040
  margin: 0 0 2px 0;
957
1041
  }
958
1042
 
959
1043
  .tecof-upload-empty-desc {
960
1044
  font-size: 11px;
961
- color: #71717a;
1045
+ color: var(--tecof-text-muted);
962
1046
  margin: 0;
963
1047
  text-align: center;
964
1048
  }
@@ -968,25 +1052,25 @@
968
1052
  align-items: center;
969
1053
  gap: 8px;
970
1054
  padding: 6px 8px;
971
- background: #ffffff;
972
- border: 1px solid #e4e4e7;
973
- border-radius: 8px;
1055
+ background: var(--tecof-surface);
1056
+ border: var(--tecof-line);
1057
+ border-radius: var(--tecof-radius);
974
1058
  transition: all 0.2s ease;
975
1059
  max-width: 100%;
976
1060
  overflow: hidden;
977
1061
  }
978
1062
 
979
1063
  .tecof-upload-file-item:hover {
980
- border-color: #d4d4d8;
1064
+ border-color: var(--tecof-border-strong);
981
1065
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
982
1066
  }
983
1067
 
984
1068
  .tecof-upload-file-thumb {
985
1069
  width: 32px;
986
1070
  height: 32px;
987
- border-radius: 6px;
1071
+ border-radius: var(--tecof-radius-sm);
988
1072
  overflow: hidden;
989
- background: #f4f4f5;
1073
+ background: var(--tecof-bg);
990
1074
  flex-shrink: 0;
991
1075
  }
992
1076
 
@@ -1005,15 +1089,19 @@
1005
1089
  .tecof-upload-file-icon {
1006
1090
  width: 32px;
1007
1091
  height: 32px;
1008
- border-radius: 6px;
1009
- background: #f4f4f5;
1092
+ border-radius: var(--tecof-radius-sm);
1093
+ background: var(--tecof-bg);
1010
1094
  display: flex;
1011
1095
  align-items: center;
1012
1096
  justify-content: center;
1013
- color: #71717a;
1097
+ color: var(--tecof-text-muted);
1014
1098
  flex-shrink: 0;
1015
1099
  }
1016
1100
 
1101
+ .tecof-upload-file-icon.is-reference {
1102
+ color: var(--tecof-text);
1103
+ }
1104
+
1017
1105
  .tecof-upload-file-info {
1018
1106
  flex: 1;
1019
1107
  min-width: 0;
@@ -1022,7 +1110,7 @@
1022
1110
  .tecof-upload-file-name {
1023
1111
  font-size: 12px;
1024
1112
  font-weight: 500;
1025
- color: #18181b;
1113
+ color: var(--tecof-text);
1026
1114
  white-space: nowrap;
1027
1115
  overflow: hidden;
1028
1116
  text-overflow: ellipsis;
@@ -1041,15 +1129,15 @@
1041
1129
  font-size: 9px;
1042
1130
  font-weight: 600;
1043
1131
  padding: 1px 4px;
1044
- background: #f4f4f5;
1045
- color: #71717a;
1132
+ background: var(--tecof-bg);
1133
+ color: var(--tecof-text-muted);
1046
1134
  border-radius: 3px;
1047
1135
  line-height: 12px;
1048
1136
  }
1049
1137
 
1050
1138
  .tecof-upload-file-size {
1051
1139
  font-size: 10px;
1052
- color: #a1a1aa;
1140
+ color: var(--tecof-text-subtle);
1053
1141
  margin: 0;
1054
1142
  }
1055
1143
 
@@ -1066,26 +1154,26 @@
1066
1154
  justify-content: center;
1067
1155
  width: 24px;
1068
1156
  height: 24px;
1069
- color: #71717a;
1157
+ color: var(--tecof-text-muted);
1070
1158
  background: none;
1071
1159
  border: none;
1072
- border-radius: 4px;
1160
+ border-radius: var(--tecof-radius-xs);
1073
1161
  cursor: pointer;
1074
1162
  transition: all 0.1s ease;
1075
1163
  }
1076
1164
 
1077
1165
  .tecof-upload-action-btn:hover {
1078
- background: #f4f4f5;
1079
- color: #18181b;
1166
+ background: var(--tecof-bg);
1167
+ color: var(--tecof-text);
1080
1168
  }
1081
1169
 
1082
1170
  .tecof-upload-action-btn-danger {
1083
- color: #71717a;
1171
+ color: var(--tecof-text-muted);
1084
1172
  }
1085
1173
 
1086
1174
  .tecof-upload-action-btn-danger:hover {
1087
- background: #fef2f2;
1088
- color: #ef4444;
1175
+ background: var(--tecof-danger-bg);
1176
+ color: var(--tecof-danger);
1089
1177
  }
1090
1178
 
1091
1179
  .tecof-upload-main-actions {
@@ -1102,16 +1190,16 @@
1102
1190
  padding: 8px 10px;
1103
1191
  font-size: 12px;
1104
1192
  font-weight: 500;
1105
- color: #ffffff;
1106
- background: #18181b;
1193
+ color: var(--tecof-surface);
1194
+ background: var(--tecof-text);
1107
1195
  border: none;
1108
- border-radius: 6px;
1196
+ border-radius: var(--tecof-radius-sm);
1109
1197
  cursor: pointer;
1110
1198
  transition: all 0.15s ease;
1111
1199
  }
1112
1200
 
1113
1201
  .tecof-upload-btn-primary:hover {
1114
- background: #27272a;
1202
+ background: var(--tecof-text-soft);
1115
1203
  }
1116
1204
 
1117
1205
  .tecof-upload-btn-secondary {
@@ -1123,24 +1211,24 @@
1123
1211
  padding: 8px 10px;
1124
1212
  font-size: 12px;
1125
1213
  font-weight: 500;
1126
- color: #27272a;
1127
- background: #ffffff;
1128
- border: 1px solid #e4e4e7;
1129
- border-radius: 6px;
1214
+ color: var(--tecof-text-soft);
1215
+ background: var(--tecof-surface);
1216
+ border: var(--tecof-line);
1217
+ border-radius: var(--tecof-radius-sm);
1130
1218
  cursor: pointer;
1131
1219
  transition: all 0.15s ease;
1132
1220
  }
1133
1221
 
1134
1222
  .tecof-upload-btn-secondary:hover {
1135
- background: #fafafa;
1136
- border-color: #d4d4d8;
1223
+ background: var(--tecof-surface-2);
1224
+ border-color: var(--tecof-border-strong);
1137
1225
  }
1138
1226
 
1139
1227
  .tecof-upload-pond-section {
1140
- border: 1px solid #e4e4e7;
1141
- border-radius: 12px;
1228
+ border: var(--tecof-line);
1229
+ border-radius: var(--tecof-radius-lg);
1142
1230
  overflow: hidden;
1143
- background: #ffffff;
1231
+ background: var(--tecof-surface);
1144
1232
  }
1145
1233
 
1146
1234
  .tecof-upload-pond-header {
@@ -1148,14 +1236,14 @@
1148
1236
  justify-content: space-between;
1149
1237
  align-items: center;
1150
1238
  padding: 10px 14px;
1151
- background: #fafafa;
1152
- border-bottom: 1px solid #f4f4f5;
1239
+ background: var(--tecof-surface-2);
1240
+ border-bottom: 1px solid var(--tecof-bg);
1153
1241
  }
1154
1242
 
1155
1243
  .tecof-upload-pond-header-title {
1156
1244
  font-size: 12px;
1157
1245
  font-weight: 600;
1158
- color: #52525b;
1246
+ color: var(--tecof-text-muted);
1159
1247
  margin: 0;
1160
1248
  display: flex;
1161
1249
  align-items: center;
@@ -1168,17 +1256,17 @@
1168
1256
  justify-content: center;
1169
1257
  width: 24px;
1170
1258
  height: 24px;
1171
- background: #e4e4e7;
1259
+ background: var(--tecof-border);
1172
1260
  border: none;
1173
- border-radius: 6px;
1261
+ border-radius: var(--tecof-radius-sm);
1174
1262
  cursor: pointer;
1175
- color: #71717a;
1263
+ color: var(--tecof-text-muted);
1176
1264
  transition: all 0.15s ease;
1177
1265
  }
1178
1266
 
1179
1267
  .tecof-upload-pond-close-btn:hover {
1180
- background: #d4d4d8;
1181
- color: #3f3f46;
1268
+ background: var(--tecof-border-strong);
1269
+ color: var(--tecof-text-soft);
1182
1270
  }
1183
1271
 
1184
1272
  .tecof-upload-pond-body {
@@ -1188,7 +1276,7 @@
1188
1276
  .tecof-upload-drawer-overlay {
1189
1277
  position: fixed;
1190
1278
  inset: 0;
1191
- background: rgba(9, 9, 11, 0.6);
1279
+ background: var(--tecof-overlay-scrim);
1192
1280
  backdrop-filter: blur(8px);
1193
1281
  -webkit-backdrop-filter: blur(8px);
1194
1282
  z-index: 999999 !important;
@@ -1205,12 +1293,12 @@
1205
1293
  height: 82vh;
1206
1294
  display: flex;
1207
1295
  flex-direction: column;
1208
- background: #ffffff;
1296
+ background: var(--tecof-surface);
1209
1297
  border-top-left-radius: 24px;
1210
1298
  border-top-right-radius: 24px;
1211
1299
  z-index: 1000000 !important;
1212
1300
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.15);
1213
- border: 1px solid rgba(228, 228, 231, 0.8);
1301
+ border: var(--tecof-line-subtle);
1214
1302
  border-bottom: none;
1215
1303
  }
1216
1304
 
@@ -1218,14 +1306,14 @@
1218
1306
  width: 48px;
1219
1307
  height: 5px;
1220
1308
  border-radius: 9999px;
1221
- background: #e4e4e7;
1309
+ background: var(--tecof-border);
1222
1310
  margin: 12px auto 6px;
1223
1311
  flex-shrink: 0;
1224
1312
  transition: background-color 0.2s ease;
1225
1313
  }
1226
1314
 
1227
1315
  .tecof-upload-drawer-handle:hover {
1228
- background: #d4d4d8;
1316
+ background: var(--tecof-border-strong);
1229
1317
  }
1230
1318
 
1231
1319
  .tecof-upload-drawer-inner {
@@ -1247,7 +1335,7 @@
1247
1335
  .tecof-upload-drawer-title {
1248
1336
  font-size: 18px;
1249
1337
  font-weight: 700;
1250
- color: #09090b;
1338
+ color: var(--tecof-text);
1251
1339
  margin: 0;
1252
1340
  letter-spacing: -0.02em;
1253
1341
  }
@@ -1259,8 +1347,8 @@
1259
1347
  }
1260
1348
 
1261
1349
  .tecof-upload-drawer-action-btn {
1262
- background: #f4f4f5;
1263
- border: 1px solid #e4e4e7;
1350
+ background: var(--tecof-bg);
1351
+ border: var(--tecof-line);
1264
1352
  border-radius: 10px;
1265
1353
  width: 36px;
1266
1354
  height: 36px;
@@ -1269,12 +1357,12 @@
1269
1357
  justify-content: center;
1270
1358
  cursor: pointer;
1271
1359
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
1272
- color: #3f3f46;
1360
+ color: var(--tecof-text-soft);
1273
1361
  }
1274
1362
 
1275
1363
  .tecof-upload-drawer-action-btn:hover {
1276
- background: #e4e4e7;
1277
- color: #09090b;
1364
+ background: var(--tecof-border);
1365
+ color: var(--tecof-text);
1278
1366
  transform: scale(1.05);
1279
1367
  }
1280
1368
 
@@ -1287,18 +1375,18 @@
1287
1375
  align-items: center;
1288
1376
  gap: 10px;
1289
1377
  padding: 10px 14px;
1290
- background: #f4f4f5;
1291
- border-radius: 12px;
1378
+ background: var(--tecof-bg);
1379
+ border-radius: var(--tecof-radius-lg);
1292
1380
  margin-bottom: 16px;
1293
1381
  flex-shrink: 0;
1294
- border: 1px solid #e4e4e7;
1382
+ border: var(--tecof-line);
1295
1383
  transition: all 0.2s ease;
1296
1384
  }
1297
1385
 
1298
1386
  .tecof-upload-search-box:focus-within {
1299
- background: #ffffff;
1300
- border-color: var(--tecof-primary-500, #3b82f6);
1301
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
1387
+ background: var(--tecof-surface);
1388
+ border-color: var(--tecof-accent);
1389
+ box-shadow: var(--tecof-focus-ring-strong);
1302
1390
  }
1303
1391
 
1304
1392
  .tecof-upload-search-input {
@@ -1307,13 +1395,13 @@
1307
1395
  background: transparent;
1308
1396
  outline: none;
1309
1397
  font-size: 13px;
1310
- color: #09090b;
1398
+ color: var(--tecof-text);
1311
1399
  font-family: 'Inter', system-ui, sans-serif;
1312
1400
  font-weight: 450;
1313
1401
  }
1314
1402
 
1315
1403
  .tecof-upload-search-input::placeholder {
1316
- color: #71717a;
1404
+ color: var(--tecof-text-muted);
1317
1405
  }
1318
1406
 
1319
1407
  .tecof-upload-gallery-grid {
@@ -1333,11 +1421,11 @@
1333
1421
  background: transparent;
1334
1422
  }
1335
1423
  .tecof-upload-gallery-grid::-webkit-scrollbar-thumb {
1336
- background: #d4d4d8;
1424
+ background: var(--tecof-border-strong);
1337
1425
  border-radius: 9999px;
1338
1426
  }
1339
1427
  .tecof-upload-gallery-grid::-webkit-scrollbar-thumb:hover {
1340
- background: #a1a1aa;
1428
+ background: var(--tecof-text-subtle);
1341
1429
  }
1342
1430
 
1343
1431
  .tecof-upload-gallery-item {
@@ -1346,24 +1434,24 @@
1346
1434
  flex-direction: column;
1347
1435
  align-items: center;
1348
1436
  padding: 6px;
1349
- background: #ffffff;
1350
- border: 1px solid rgba(228, 228, 231, 0.8);
1351
- border-radius: 12px;
1437
+ background: var(--tecof-surface);
1438
+ border: var(--tecof-line-subtle);
1439
+ border-radius: var(--tecof-radius-lg);
1352
1440
  cursor: pointer;
1353
1441
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1354
1442
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
1355
1443
  }
1356
1444
 
1357
1445
  .tecof-upload-gallery-item:hover {
1358
- border-color: var(--tecof-primary-300, #93c5fd);
1446
+ border-color: var(--tecof-accent-border);
1359
1447
  transform: translateY(-2px);
1360
1448
  box-shadow: 0 4px 12px rgba(9, 9, 11, 0.06);
1361
1449
  }
1362
1450
 
1363
1451
  .tecof-upload-gallery-item.selected {
1364
- background: var(--tecof-primary-50, #eff6ff);
1365
- border-color: var(--tecof-primary-500, #3b82f6);
1366
- box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
1452
+ background: var(--tecof-accent-subtle);
1453
+ border-color: var(--tecof-accent);
1454
+ box-shadow: 0 4px 12px rgba(116, 181, 0, 0.12);
1367
1455
  }
1368
1456
 
1369
1457
  .tecof-upload-gallery-check {
@@ -1373,14 +1461,14 @@
1373
1461
  width: 22px;
1374
1462
  height: 22px;
1375
1463
  border-radius: 50%;
1376
- background: var(--tecof-primary-500, #3b82f6);
1377
- border: 2px solid #ffffff;
1464
+ background: var(--tecof-accent);
1465
+ border: 2px solid var(--tecof-surface);
1378
1466
  display: flex;
1379
1467
  align-items: center;
1380
1468
  justify-content: center;
1381
- color: #ffffff;
1469
+ color: var(--tecof-accent-fg);
1382
1470
  z-index: 2;
1383
- box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
1471
+ box-shadow: 0 2px 8px rgba(116, 181, 0, 0.4);
1384
1472
  animation: tecof-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
1385
1473
  }
1386
1474
 
@@ -1392,14 +1480,14 @@
1392
1480
  .tecof-upload-gallery-thumb {
1393
1481
  width: 100%;
1394
1482
  aspect-ratio: 1;
1395
- border-radius: 8px;
1483
+ border-radius: var(--tecof-radius);
1396
1484
  margin-bottom: 8px;
1397
1485
  overflow: hidden;
1398
1486
  position: relative;
1399
1487
  }
1400
1488
 
1401
1489
  .tecof-upload-gallery-file-icon-wrap {
1402
- background: #f4f4f5;
1490
+ background: var(--tecof-bg);
1403
1491
  display: flex;
1404
1492
  align-items: center;
1405
1493
  justify-content: center;
@@ -1407,7 +1495,7 @@
1407
1495
  }
1408
1496
 
1409
1497
  .tecof-upload-gallery-item:hover .tecof-upload-gallery-file-icon-wrap {
1410
- background: #e4e4e7;
1498
+ background: var(--tecof-border);
1411
1499
  }
1412
1500
 
1413
1501
  .tecof-upload-gallery-thumb .tecof-picture-wrapper {
@@ -1430,7 +1518,7 @@
1430
1518
  .tecof-upload-gallery-file-name {
1431
1519
  font-size: 11px;
1432
1520
  font-weight: 500;
1433
- color: #27272a;
1521
+ color: var(--tecof-text-soft);
1434
1522
  width: 100%;
1435
1523
  padding: 0 4px;
1436
1524
  text-align: center;
@@ -1447,7 +1535,7 @@
1447
1535
  align-items: center;
1448
1536
  justify-content: center;
1449
1537
  padding: 64px 24px;
1450
- color: #71717a;
1538
+ color: var(--tecof-text-muted);
1451
1539
  text-align: center;
1452
1540
  }
1453
1541
 
@@ -1455,7 +1543,7 @@
1455
1543
  width: 64px;
1456
1544
  height: 64px;
1457
1545
  border-radius: 18px;
1458
- background: #f4f4f5;
1546
+ background: var(--tecof-bg);
1459
1547
  display: flex;
1460
1548
  align-items: center;
1461
1549
  justify-content: center;
@@ -1473,7 +1561,7 @@
1473
1561
  .tecof-upload-uploaded-label {
1474
1562
  font-size: 11px;
1475
1563
  font-weight: 600;
1476
- color: #a1a1aa;
1564
+ color: var(--tecof-text-subtle);
1477
1565
  text-transform: uppercase;
1478
1566
  letter-spacing: 0.5px;
1479
1567
  margin: 0;
@@ -1482,8 +1570,8 @@
1482
1570
  .tecof-upload-count-badge {
1483
1571
  font-size: 10px;
1484
1572
  font-weight: 700;
1485
- color: var(--tecof-primary-500, #3b82f6);
1486
- background: #eff6ff;
1573
+ color: var(--tecof-accent);
1574
+ background: var(--tecof-accent-subtle);
1487
1575
  border-radius: 10px;
1488
1576
  padding: 2px 8px;
1489
1577
  line-height: 14px;
@@ -1501,7 +1589,7 @@
1501
1589
  align-items: center;
1502
1590
  justify-content: center;
1503
1591
  min-height: 100vh;
1504
- background: #fafafa;
1592
+ background: var(--tecof-surface-2);
1505
1593
  }
1506
1594
 
1507
1595
  .tecof-editor-loading-inner {
@@ -1510,7 +1598,7 @@
1510
1598
 
1511
1599
  .tecof-editor-loading-text {
1512
1600
  font-size: 14px;
1513
- color: #71717a;
1601
+ color: var(--tecof-text-muted);
1514
1602
  font-family: 'Inter', system-ui, sans-serif;
1515
1603
  }
1516
1604
 
@@ -1521,7 +1609,7 @@
1521
1609
  min-height: 200px;
1522
1610
  padding: 24px;
1523
1611
  font-size: 14px;
1524
- color: #ef4444;
1612
+ color: var(--tecof-danger);
1525
1613
  font-family: 'Inter', system-ui, sans-serif;
1526
1614
  }
1527
1615
 
@@ -1530,11 +1618,11 @@
1530
1618
  bottom: 20px;
1531
1619
  right: 20px;
1532
1620
  padding: 8px 16px;
1533
- background: #18181b;
1534
- color: #ffffff;
1621
+ background: var(--tecof-text);
1622
+ color: var(--tecof-surface);
1535
1623
  font-size: 13px;
1536
1624
  font-weight: 500;
1537
- border-radius: 8px;
1625
+ border-radius: var(--tecof-radius);
1538
1626
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
1539
1627
  z-index: 9999;
1540
1628
  font-family: 'Inter', system-ui, sans-serif;
@@ -1543,8 +1631,8 @@
1543
1631
  .tecof-editor-spinner {
1544
1632
  width: 40px;
1545
1633
  height: 40px;
1546
- border: 3px solid #e4e4e7;
1547
- border-top-color: #18181b;
1634
+ border: 3px solid var(--tecof-border);
1635
+ border-top-color: var(--tecof-text);
1548
1636
  border-radius: 50%;
1549
1637
  margin: 0 auto 12px;
1550
1638
  animation: tecof-spin 0.7s linear infinite;
@@ -1557,6 +1645,11 @@
1557
1645
  }
1558
1646
 
1559
1647
  /* ─── TecofPicture ─── */
1648
+ .tecof-picture-link {
1649
+ display: block;
1650
+ text-decoration: none;
1651
+ }
1652
+
1560
1653
  .tecof-picture-wrapper {
1561
1654
  position: relative;
1562
1655
  display: block;
@@ -1598,6 +1691,81 @@
1598
1691
  gap: 6px;
1599
1692
  }
1600
1693
 
1694
+ .tecof-upload-ref-section {
1695
+ display: flex;
1696
+ flex-direction: column;
1697
+ gap: 8px;
1698
+ margin-top: 4px;
1699
+ padding: 10px;
1700
+ border: var(--tecof-line);
1701
+ border-radius: var(--tecof-radius);
1702
+ background: var(--tecof-surface);
1703
+ }
1704
+
1705
+ .tecof-upload-ref-header {
1706
+ display: flex;
1707
+ align-items: center;
1708
+ justify-content: space-between;
1709
+ gap: 8px;
1710
+ }
1711
+
1712
+ .tecof-upload-ref-title {
1713
+ font-size: 11px;
1714
+ font-weight: 500;
1715
+ color: var(--tecof-text-muted);
1716
+ }
1717
+
1718
+ .tecof-upload-ref-close {
1719
+ display: flex;
1720
+ align-items: center;
1721
+ justify-content: center;
1722
+ padding: 0;
1723
+ border: none;
1724
+ background: none;
1725
+ color: var(--tecof-text-subtle);
1726
+ cursor: pointer;
1727
+ transition: color 0.15s ease;
1728
+ }
1729
+
1730
+ .tecof-upload-ref-close:hover { color: var(--tecof-text); }
1731
+
1732
+ .tecof-upload-ref-row {
1733
+ display: flex;
1734
+ gap: 6px;
1735
+ }
1736
+
1737
+ .tecof-upload-ref-input {
1738
+ flex: 1;
1739
+ min-width: 0;
1740
+ padding: 6px 8px;
1741
+ border: var(--tecof-line-strong);
1742
+ border-radius: var(--tecof-radius-sm);
1743
+ outline: none;
1744
+ font-size: 12px;
1745
+ color: var(--tecof-text);
1746
+ background: var(--tecof-surface);
1747
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
1748
+ }
1749
+
1750
+ .tecof-upload-ref-input:focus {
1751
+ border-color: var(--tecof-accent);
1752
+ box-shadow: 0 0 0 3px var(--tecof-accent-ring);
1753
+ }
1754
+
1755
+ .tecof-upload-ref-add {
1756
+ padding: 0 10px;
1757
+ border: none;
1758
+ border-radius: var(--tecof-radius-sm);
1759
+ background: var(--tecof-text);
1760
+ color: var(--tecof-surface);
1761
+ font-size: 11px;
1762
+ font-weight: 500;
1763
+ cursor: pointer;
1764
+ transition: transform 0.05s ease, opacity 0.15s ease;
1765
+ }
1766
+
1767
+ .tecof-upload-ref-add:active { transform: translateY(1px); }
1768
+
1601
1769
  .tecof-upload-spin {
1602
1770
  animation: tecof-spin 1s linear infinite;
1603
1771
  }
@@ -1610,20 +1778,20 @@
1610
1778
  .tecof-upload-loading-text {
1611
1779
  font-size: 13px;
1612
1780
  font-weight: 500;
1613
- color: #71717a;
1781
+ color: var(--tecof-text-muted);
1614
1782
  margin: 0;
1615
1783
  }
1616
1784
 
1617
1785
  .tecof-upload-empty-heading {
1618
1786
  font-size: 13px;
1619
1787
  font-weight: 500;
1620
- color: #71717a;
1788
+ color: var(--tecof-text-muted);
1621
1789
  margin: 0 0 4px 0;
1622
1790
  }
1623
1791
 
1624
1792
  .tecof-upload-empty-subheading {
1625
1793
  font-size: 12px;
1626
- color: #a1a1aa;
1794
+ color: var(--tecof-text-subtle);
1627
1795
  margin: 0;
1628
1796
  }
1629
1797
 
@@ -1631,8 +1799,8 @@
1631
1799
  display: flex;
1632
1800
  align-items: center;
1633
1801
  justify-content: center;
1634
- background: #f4f4f5;
1635
- border-radius: 6px;
1802
+ background: var(--tecof-bg);
1803
+ border-radius: var(--tecof-radius-sm);
1636
1804
  }
1637
1805
 
1638
1806
  /* ─── Extra Helpers ─── */
@@ -1657,7 +1825,15 @@
1657
1825
  }
1658
1826
 
1659
1827
  .tecof-text-muted {
1660
- color: #a1a1aa;
1828
+ color: var(--tecof-text-muted);
1829
+ }
1830
+
1831
+ .tecof-icon-muted {
1832
+ color: var(--tecof-text-subtle);
1833
+ }
1834
+
1835
+ .tecof-icon-faint {
1836
+ color: var(--tecof-text-faint);
1661
1837
  }
1662
1838
 
1663
1839
  .tecof-min-w-0 {
@@ -1707,8 +1883,8 @@
1707
1883
  /* ─── Puck Drawer Component Search ─── */
1708
1884
  .tecof-drawer-search-wrapper {
1709
1885
  padding: 10px 12px;
1710
- background: #ffffff;
1711
- border-bottom: 1px solid #e4e4e7;
1886
+ background: var(--tecof-surface);
1887
+ border-bottom: 1px solid var(--tecof-border);
1712
1888
  position: sticky;
1713
1889
  top: 0;
1714
1890
  z-index: 10;
@@ -1719,16 +1895,16 @@
1719
1895
  align-items: center;
1720
1896
  gap: 8px;
1721
1897
  padding: 8px 12px;
1722
- background: #f4f4f5;
1723
- border-radius: 8px;
1724
- border: 1px solid #e4e4e7;
1898
+ background: var(--tecof-bg);
1899
+ border-radius: var(--tecof-radius);
1900
+ border: var(--tecof-line);
1725
1901
  transition: all 0.2s ease;
1726
1902
  }
1727
1903
 
1728
1904
  .tecof-drawer-search-box:focus-within {
1729
- background: #ffffff;
1730
- border-color: var(--tecof-primary-500, #3b82f6);
1731
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
1905
+ background: var(--tecof-surface);
1906
+ border-color: var(--tecof-accent);
1907
+ box-shadow: var(--tecof-focus-ring-strong);
1732
1908
  }
1733
1909
 
1734
1910
  .tecof-drawer-search-input {
@@ -1737,13 +1913,13 @@
1737
1913
  background: transparent;
1738
1914
  outline: none;
1739
1915
  font-size: 13px;
1740
- color: #09090b;
1916
+ color: var(--tecof-text);
1741
1917
  font-family: 'Inter', system-ui, sans-serif;
1742
1918
  font-weight: 500;
1743
1919
  }
1744
1920
 
1745
1921
  .tecof-drawer-search-input::placeholder {
1746
- color: #71717a;
1922
+ color: var(--tecof-text-muted);
1747
1923
  }
1748
1924
 
1749
1925
  .tecof-drawer-clear-btn {
@@ -1754,12 +1930,12 @@
1754
1930
  display: flex;
1755
1931
  align-items: center;
1756
1932
  justify-content: center;
1757
- color: #71717a;
1933
+ color: var(--tecof-text-muted);
1758
1934
  transition: color 0.15s ease;
1759
1935
  }
1760
1936
 
1761
1937
  .tecof-drawer-clear-btn:hover {
1762
- color: #18181b;
1938
+ color: var(--tecof-text);
1763
1939
  }
1764
1940
 
1765
1941
  .tecof-drawer-wrapper-layout {
@@ -1789,10 +1965,10 @@
1789
1965
  z-index: 1000;
1790
1966
  width: 320px;
1791
1967
  flex-direction: column;
1792
- background-color: #ffffff;
1793
- border-radius: 8px;
1968
+ background-color: var(--tecof-surface);
1969
+ border-radius: var(--tecof-radius);
1794
1970
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
1795
- border: 1px solid #e4e4e7;
1971
+ border: var(--tecof-line);
1796
1972
  overflow: hidden;
1797
1973
  user-select: none;
1798
1974
  pointer-events: none;
@@ -1805,13 +1981,13 @@
1805
1981
  }
1806
1982
 
1807
1983
  .tecof-drawer-popover-header {
1808
- background-color: #f4f4f5;
1809
- border-bottom: 1px solid #e4e4e7;
1984
+ background-color: var(--tecof-bg);
1985
+ border-bottom: 1px solid var(--tecof-border);
1810
1986
  padding: 8px 12px;
1811
1987
  font-size: 11px;
1812
1988
  font-family: 'Inter', system-ui, sans-serif;
1813
1989
  font-weight: 600;
1814
- color: #3f3f46;
1990
+ color: var(--tecof-text-soft);
1815
1991
  text-transform: uppercase;
1816
1992
  letter-spacing: 0.5px;
1817
1993
  }
@@ -1820,7 +1996,7 @@
1820
1996
  position: relative;
1821
1997
  width: 100%;
1822
1998
  min-height: 120px;
1823
- background-color: #fafafa;
1999
+ background-color: var(--tecof-surface-2);
1824
2000
  display: flex;
1825
2001
  align-items: center;
1826
2002
  justify-content: center;
@@ -1831,8 +2007,8 @@
1831
2007
  .tecof-drawer-skeleton {
1832
2008
  position: absolute;
1833
2009
  inset: 8px;
1834
- background-color: #e4e4e7;
1835
- border-radius: 6px;
2010
+ background-color: var(--tecof-border);
2011
+ border-radius: var(--tecof-radius-sm);
1836
2012
  animation: tecof-pulse-loader 1.5s infinite ease-in-out;
1837
2013
  }
1838
2014
 
@@ -1841,9 +2017,9 @@
1841
2017
  z-index: 10;
1842
2018
  width: 100%;
1843
2019
  height: auto;
1844
- border-radius: 4px;
2020
+ border-radius: var(--tecof-radius-xs);
1845
2021
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
1846
- border: 1px solid #f4f4f5;
2022
+ border: 1px solid var(--tecof-bg);
1847
2023
  background: white;
1848
2024
  }
1849
2025
 
@@ -1862,7 +2038,7 @@
1862
2038
  .tecof-drawer-preview-error {
1863
2039
  font-size: 11px;
1864
2040
  font-weight: 500;
1865
- color: #a1a1aa;
2041
+ color: var(--tecof-text-subtle);
1866
2042
  font-family: 'Inter', system-ui, sans-serif;
1867
2043
  text-align: center;
1868
2044
  padding: 20px 12px;
@@ -1883,8 +2059,8 @@
1883
2059
  align-items: flex-start;
1884
2060
  gap: 10px;
1885
2061
  padding: 12px 14px;
1886
- background: #fef2f2;
1887
- border: 1px solid #fecaca;
2062
+ background: var(--tecof-danger-bg);
2063
+ border: 1px solid var(--tecof-danger-border);
1888
2064
  border-radius: 10px;
1889
2065
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
1890
2066
  }
@@ -1904,13 +2080,13 @@
1904
2080
  .tecof-field-error-title {
1905
2081
  font-size: 13px;
1906
2082
  font-weight: 600;
1907
- color: #991b1b;
2083
+ color: var(--tecof-danger-text);
1908
2084
  margin: 0;
1909
2085
  }
1910
2086
 
1911
2087
  .tecof-field-error-detail {
1912
2088
  font-size: 11px;
1913
- color: #b91c1c;
2089
+ color: var(--tecof-danger-text);
1914
2090
  margin: 4px 0 0;
1915
2091
  word-break: break-word;
1916
2092
  }
@@ -1920,18 +2096,18 @@
1920
2096
  padding: 6px 12px;
1921
2097
  font-size: 12px;
1922
2098
  font-weight: 500;
1923
- color: #991b1b;
1924
- background: #ffffff;
1925
- border: 1px solid #fca5a5;
1926
- border-radius: 6px;
2099
+ color: var(--tecof-danger-text);
2100
+ background: var(--tecof-surface);
2101
+ border: 1px solid var(--tecof-danger-border-strong);
2102
+ border-radius: var(--tecof-radius-sm);
1927
2103
  cursor: pointer;
1928
2104
  transition: all 0.15s ease;
1929
2105
  align-self: center;
1930
2106
  }
1931
2107
 
1932
2108
  .tecof-field-error-retry:hover {
1933
- background: #fef2f2;
1934
- border-color: #f87171;
2109
+ background: var(--tecof-danger-bg);
2110
+ border-color: var(--tecof-danger);
1935
2111
  }
1936
2112
 
1937
2113
  /* ─── RepeaterField ─── */
@@ -1951,7 +2127,7 @@
1951
2127
  .tecof-repeater-count {
1952
2128
  font-size: 11px;
1953
2129
  font-weight: 500;
1954
- color: #a1a1aa;
2130
+ color: var(--tecof-text-subtle);
1955
2131
  letter-spacing: 0.02em;
1956
2132
  }
1957
2133
 
@@ -1963,15 +2139,15 @@
1963
2139
  align-items: center;
1964
2140
  gap: 10px;
1965
2141
  padding: 24px 16px;
1966
- background: #fafafa;
1967
- border: 1px dashed #e4e4e7;
2142
+ background: var(--tecof-surface-2);
2143
+ border: 1px dashed var(--tecof-border);
1968
2144
  border-radius: 10px;
1969
2145
  text-align: center;
1970
2146
  }
1971
2147
 
1972
2148
  .tecof-repeater-empty-text {
1973
2149
  font-size: 12px;
1974
- color: #a1a1aa;
2150
+ color: var(--tecof-text-subtle);
1975
2151
  margin: 0;
1976
2152
  }
1977
2153
 
@@ -1984,20 +2160,20 @@
1984
2160
  }
1985
2161
 
1986
2162
  .tecof-repeater-row {
1987
- border: 1px solid #e4e4e7;
2163
+ border: var(--tecof-line);
1988
2164
  border-radius: 10px;
1989
- background: #ffffff;
2165
+ background: var(--tecof-surface);
1990
2166
  overflow: hidden;
1991
2167
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
1992
2168
  }
1993
2169
 
1994
2170
  .tecof-repeater-row:hover {
1995
- border-color: #d4d4d8;
2171
+ border-color: var(--tecof-border-strong);
1996
2172
  }
1997
2173
 
1998
2174
  .tecof-repeater-row.expanded {
1999
- border-color: var(--tecof-primary-500, #3b82f6);
2000
- box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.08);
2175
+ border-color: var(--tecof-accent);
2176
+ box-shadow: 0 0 0 2px rgba(116, 181, 0, 0.08);
2001
2177
  }
2002
2178
 
2003
2179
  /* ── Row Header ── */
@@ -2014,7 +2190,7 @@
2014
2190
  }
2015
2191
 
2016
2192
  .tecof-repeater-row-header:hover {
2017
- background-color: #fafafa;
2193
+ background-color: var(--tecof-surface-2);
2018
2194
  }
2019
2195
 
2020
2196
  .tecof-repeater-row-left {
@@ -2026,7 +2202,7 @@
2026
2202
  }
2027
2203
 
2028
2204
  .tecof-repeater-grip {
2029
- color: #d4d4d8;
2205
+ color: var(--tecof-border-strong);
2030
2206
  flex-shrink: 0;
2031
2207
  cursor: grab;
2032
2208
  }
@@ -2039,16 +2215,16 @@
2039
2215
  height: 20px;
2040
2216
  font-size: 10px;
2041
2217
  font-weight: 700;
2042
- color: var(--tecof-primary-600, #2563eb);
2043
- background: var(--tecof-primary-50, #eff6ff);
2044
- border-radius: 6px;
2218
+ color: var(--tecof-accent-hover);
2219
+ background: var(--tecof-accent-subtle);
2220
+ border-radius: var(--tecof-radius-sm);
2045
2221
  flex-shrink: 0;
2046
2222
  }
2047
2223
 
2048
2224
  .tecof-repeater-row-preview {
2049
2225
  font-size: 13px;
2050
2226
  font-weight: 500;
2051
- color: #3f3f46;
2227
+ color: var(--tecof-text-soft);
2052
2228
  white-space: nowrap;
2053
2229
  overflow: hidden;
2054
2230
  text-overflow: ellipsis;
@@ -2073,28 +2249,28 @@
2073
2249
  height: 26px;
2074
2250
  background: none;
2075
2251
  border: none;
2076
- border-radius: 6px;
2252
+ border-radius: var(--tecof-radius-sm);
2077
2253
  cursor: pointer;
2078
- color: #a1a1aa;
2254
+ color: var(--tecof-text-subtle);
2079
2255
  font-size: 10px;
2080
2256
  transition: all 0.15s ease;
2081
2257
  padding: 0;
2082
2258
  }
2083
2259
 
2084
2260
  .tecof-repeater-action-btn:hover {
2085
- background-color: #f4f4f5;
2086
- color: #52525b;
2261
+ background-color: var(--tecof-bg);
2262
+ color: var(--tecof-text-muted);
2087
2263
  }
2088
2264
 
2089
2265
  .tecof-repeater-action-btn-danger:hover {
2090
- background-color: #fef2f2;
2091
- color: #ef4444;
2266
+ background-color: var(--tecof-danger-bg);
2267
+ color: var(--tecof-danger);
2092
2268
  }
2093
2269
 
2094
2270
  /* ── Chevron ── */
2095
2271
 
2096
2272
  .tecof-repeater-chevron {
2097
- color: #a1a1aa;
2273
+ color: var(--tecof-text-subtle);
2098
2274
  transition: transform 0.2s ease;
2099
2275
  flex-shrink: 0;
2100
2276
  }
@@ -2107,11 +2283,11 @@
2107
2283
 
2108
2284
  .tecof-repeater-row-content {
2109
2285
  padding: 12px 14px 16px;
2110
- border-top: 1px solid #f4f4f5;
2286
+ border-top: 1px solid var(--tecof-bg);
2111
2287
  display: flex;
2112
2288
  flex-direction: column;
2113
2289
  gap: 12px;
2114
- background: #fafbfc;
2290
+ background: var(--tecof-surface-2);
2115
2291
  }
2116
2292
 
2117
2293
  .tecof-repeater-subfield {
@@ -2127,17 +2303,17 @@
2127
2303
  padding: 8px 16px;
2128
2304
  font-size: 12px;
2129
2305
  font-weight: 600;
2130
- color: var(--tecof-primary-600, #2563eb);
2131
- background: var(--tecof-primary-50, #eff6ff);
2132
- border: 1px solid var(--tecof-primary-200, #bfdbfe);
2133
- border-radius: 8px;
2306
+ color: var(--tecof-accent-hover);
2307
+ background: var(--tecof-accent-subtle);
2308
+ border: 1px solid var(--tecof-primary-200);
2309
+ border-radius: var(--tecof-radius);
2134
2310
  cursor: pointer;
2135
2311
  transition: all 0.15s ease;
2136
2312
  }
2137
2313
 
2138
2314
  .tecof-repeater-add-btn:hover {
2139
- background: var(--tecof-primary-100, #dbeafe);
2140
- border-color: var(--tecof-primary-300, #93c5fd);
2315
+ background: var(--tecof-accent-subtle-hover);
2316
+ border-color: var(--tecof-accent-border);
2141
2317
  }
2142
2318
 
2143
2319
  .tecof-repeater-add-btn-bottom {
@@ -2150,18 +2326,18 @@
2150
2326
  margin-top: 6px;
2151
2327
  font-size: 12px;
2152
2328
  font-weight: 500;
2153
- color: #a1a1aa;
2329
+ color: var(--tecof-text-subtle);
2154
2330
  background: none;
2155
- border: 1px dashed #e4e4e7;
2156
- border-radius: 8px;
2331
+ border: 1px dashed var(--tecof-border);
2332
+ border-radius: var(--tecof-radius);
2157
2333
  cursor: pointer;
2158
2334
  transition: all 0.15s ease;
2159
2335
  }
2160
2336
 
2161
2337
  .tecof-repeater-add-btn-bottom:hover {
2162
- color: var(--tecof-primary-600, #2563eb);
2163
- border-color: var(--tecof-primary-400, #60a5fa);
2164
- background: var(--tecof-primary-50, #eff6ff);
2338
+ color: var(--tecof-accent-hover);
2339
+ border-color: var(--tecof-primary-400);
2340
+ background: var(--tecof-accent-subtle);
2165
2341
  }
2166
2342
 
2167
2343
  /* ─── CmsCollectionField ─── */
@@ -2183,8 +2359,8 @@
2183
2359
  gap: 10px;
2184
2360
  padding: 12px 14px;
2185
2361
  font-size: 13px;
2186
- color: #71717a;
2187
- background: #f4f4f5;
2362
+ color: var(--tecof-text-muted);
2363
+ background: var(--tecof-bg);
2188
2364
  border-radius: 10px;
2189
2365
  }
2190
2366
 
@@ -2194,9 +2370,9 @@
2194
2370
  gap: 10px;
2195
2371
  padding: 12px 14px;
2196
2372
  font-size: 13px;
2197
- color: #ef4444;
2198
- background: #fef2f2;
2199
- border: 1px solid #fee2e2;
2373
+ color: var(--tecof-danger);
2374
+ background: var(--tecof-danger-bg);
2375
+ border: 1px solid var(--tecof-danger-border);
2200
2376
  border-radius: 10px;
2201
2377
  }
2202
2378
 
@@ -2207,17 +2383,17 @@
2207
2383
  padding: 6px 12px;
2208
2384
  font-size: 11px;
2209
2385
  font-weight: 500;
2210
- background: #ffffff;
2211
- border: 1px solid #fca5a5;
2212
- border-radius: 6px;
2386
+ background: var(--tecof-surface);
2387
+ border: 1px solid var(--tecof-danger-border-strong);
2388
+ border-radius: var(--tecof-radius-sm);
2213
2389
  cursor: pointer;
2214
- color: #ef4444;
2390
+ color: var(--tecof-danger);
2215
2391
  margin-left: auto;
2216
2392
  transition: all 0.2s;
2217
2393
  }
2218
2394
 
2219
2395
  .tecof-cms-col-retry:hover {
2220
- background: #fef2f2;
2396
+ background: var(--tecof-danger-bg);
2221
2397
  transform: scale(1.02);
2222
2398
  }
2223
2399
 
@@ -2233,25 +2409,25 @@
2233
2409
  justify-content: space-between;
2234
2410
  width: 100%;
2235
2411
  padding: 10px 14px;
2236
- background: #ffffff;
2237
- border: 1px solid rgba(228, 228, 231, 0.8);
2412
+ background: var(--tecof-surface);
2413
+ border: var(--tecof-line-subtle);
2238
2414
  border-radius: 10px;
2239
2415
  cursor: pointer;
2240
2416
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2241
2417
  font-size: 13px;
2242
- color: #18181b;
2418
+ color: var(--tecof-text);
2243
2419
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
2244
2420
  }
2245
2421
 
2246
2422
  .tecof-cms-col-trigger:hover {
2247
- border-color: #d4d4d8;
2248
- background: #fafafa;
2423
+ border-color: var(--tecof-border-strong);
2424
+ background: var(--tecof-surface-2);
2249
2425
  }
2250
2426
 
2251
2427
  .tecof-cms-col-trigger.open {
2252
- border-color: var(--tecof-primary-500, #3b82f6);
2253
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
2254
- background: #ffffff;
2428
+ border-color: var(--tecof-accent);
2429
+ box-shadow: var(--tecof-focus-ring-strong);
2430
+ background: var(--tecof-surface);
2255
2431
  }
2256
2432
 
2257
2433
  .tecof-cms-col-trigger-left {
@@ -2260,11 +2436,11 @@
2260
2436
  gap: 10px;
2261
2437
  min-width: 0;
2262
2438
  flex: 1;
2263
- color: #52525b;
2439
+ color: var(--tecof-text-muted);
2264
2440
  }
2265
2441
 
2266
2442
  .tecof-cms-col-trigger-left svg {
2267
- color: #71717a;
2443
+ color: var(--tecof-text-muted);
2268
2444
  }
2269
2445
 
2270
2446
  .tecof-cms-col-trigger-left span {
@@ -2289,20 +2465,20 @@
2289
2465
  height: 22px;
2290
2466
  background: transparent;
2291
2467
  border: none;
2292
- border-radius: 6px;
2468
+ border-radius: var(--tecof-radius-sm);
2293
2469
  cursor: pointer;
2294
- color: #71717a;
2470
+ color: var(--tecof-text-muted);
2295
2471
  padding: 0;
2296
2472
  transition: all 0.2s;
2297
2473
  }
2298
2474
 
2299
2475
  .tecof-cms-col-clear:hover {
2300
- background: #f4f4f5;
2301
- color: #ef4444;
2476
+ background: var(--tecof-bg);
2477
+ color: var(--tecof-danger);
2302
2478
  }
2303
2479
 
2304
2480
  .tecof-cms-col-chevron {
2305
- color: #71717a;
2481
+ color: var(--tecof-text-muted);
2306
2482
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2307
2483
  }
2308
2484
 
@@ -2317,9 +2493,9 @@
2317
2493
  top: calc(100% + 6px);
2318
2494
  left: 0;
2319
2495
  right: 0;
2320
- background: #ffffff;
2321
- border: 1px solid rgba(228, 228, 231, 0.9);
2322
- border-radius: 12px;
2496
+ background: var(--tecof-surface);
2497
+ border: var(--tecof-line-subtle);
2498
+ border-radius: var(--tecof-radius-lg);
2323
2499
  box-shadow: 0 10px 30px rgba(9, 9, 11, 0.08);
2324
2500
  z-index: 100;
2325
2501
  overflow: hidden;
@@ -2331,9 +2507,9 @@
2331
2507
  align-items: center;
2332
2508
  gap: 8px;
2333
2509
  padding: 10px 14px;
2334
- border-bottom: 1px solid #f4f4f5;
2335
- color: #71717a;
2336
- background: #fafafa;
2510
+ border-bottom: 1px solid var(--tecof-bg);
2511
+ color: var(--tecof-text-muted);
2512
+ background: var(--tecof-surface-2);
2337
2513
  }
2338
2514
 
2339
2515
  .tecof-cms-col-search-input {
@@ -2342,13 +2518,13 @@
2342
2518
  outline: none;
2343
2519
  font-size: 13px;
2344
2520
  background: transparent;
2345
- color: #09090b;
2521
+ color: var(--tecof-text);
2346
2522
  font-family: 'Inter', system-ui, sans-serif;
2347
2523
  font-weight: 500;
2348
2524
  }
2349
2525
 
2350
2526
  .tecof-cms-col-search-input::placeholder {
2351
- color: #a1a1aa;
2527
+ color: var(--tecof-text-subtle);
2352
2528
  }
2353
2529
 
2354
2530
  .tecof-cms-col-options {
@@ -2365,18 +2541,18 @@
2365
2541
  background: transparent;
2366
2542
  }
2367
2543
  .tecof-cms-col-options::-webkit-scrollbar-thumb {
2368
- background: #e4e4e7;
2544
+ background: var(--tecof-border);
2369
2545
  border-radius: 9999px;
2370
2546
  }
2371
2547
  .tecof-cms-col-options::-webkit-scrollbar-thumb:hover {
2372
- background: #d4d4d8;
2548
+ background: var(--tecof-border-strong);
2373
2549
  }
2374
2550
 
2375
2551
  .tecof-cms-col-empty {
2376
2552
  padding: 24px;
2377
2553
  text-align: center;
2378
2554
  font-size: 13px;
2379
- color: #71717a;
2555
+ color: var(--tecof-text-muted);
2380
2556
  }
2381
2557
 
2382
2558
  .tecof-cms-col-option {
@@ -2387,21 +2563,21 @@
2387
2563
  padding: 8px 12px;
2388
2564
  background: transparent;
2389
2565
  border: none;
2390
- border-radius: 8px;
2566
+ border-radius: var(--tecof-radius);
2391
2567
  cursor: pointer;
2392
2568
  transition: all 0.2s;
2393
2569
  text-align: left;
2394
- color: #52525b;
2570
+ color: var(--tecof-text-muted);
2395
2571
  }
2396
2572
 
2397
2573
  .tecof-cms-col-option:hover {
2398
- background: #f4f4f5;
2399
- color: #09090b;
2574
+ background: var(--tecof-bg);
2575
+ color: var(--tecof-text);
2400
2576
  }
2401
2577
 
2402
2578
  .tecof-cms-col-option.selected {
2403
- background: var(--tecof-primary-50, #eff6ff);
2404
- color: var(--tecof-primary-600, #2563eb);
2579
+ background: var(--tecof-accent-subtle);
2580
+ color: var(--tecof-accent-hover);
2405
2581
  }
2406
2582
 
2407
2583
  .tecof-cms-col-option-info {
@@ -2414,20 +2590,20 @@
2414
2590
  .tecof-cms-col-option-name {
2415
2591
  font-size: 13px;
2416
2592
  font-weight: 600;
2417
- color: #27272a;
2593
+ color: var(--tecof-text-soft);
2418
2594
  }
2419
2595
 
2420
2596
  .tecof-cms-col-option.selected .tecof-cms-col-option-name {
2421
- color: var(--tecof-primary-700, #1d4ed8);
2597
+ color: var(--tecof-accent-active);
2422
2598
  }
2423
2599
 
2424
2600
  .tecof-cms-col-option-slug {
2425
2601
  font-size: 11px;
2426
- color: #71717a;
2602
+ color: var(--tecof-text-muted);
2427
2603
  }
2428
2604
 
2429
2605
  .tecof-cms-col-option.selected .tecof-cms-col-option-slug {
2430
- color: var(--tecof-primary-400, #60a5fa);
2606
+ color: var(--tecof-primary-400);
2431
2607
  }
2432
2608
 
2433
2609
  /* ── Settings ── */
@@ -2448,7 +2624,7 @@
2448
2624
  .tecof-cms-col-setting-label {
2449
2625
  font-size: 10px;
2450
2626
  font-weight: 700;
2451
- color: #71717a;
2627
+ color: var(--tecof-text-muted);
2452
2628
  text-transform: uppercase;
2453
2629
  letter-spacing: 0.05em;
2454
2630
  margin-left: 2px;
@@ -2457,24 +2633,24 @@
2457
2633
  .tecof-cms-col-setting-input {
2458
2634
  padding: 8px 12px;
2459
2635
  font-size: 13px;
2460
- border: 1px solid rgba(228, 228, 231, 0.8);
2461
- border-radius: 8px;
2636
+ border: var(--tecof-line-subtle);
2637
+ border-radius: var(--tecof-radius);
2462
2638
  outline: none;
2463
2639
  width: 100%;
2464
2640
  transition: all 0.2s ease;
2465
- color: #09090b;
2641
+ color: var(--tecof-text);
2466
2642
  font-weight: 500;
2467
2643
  }
2468
2644
 
2469
2645
  .tecof-cms-col-setting-input:focus {
2470
- border-color: var(--tecof-primary-500, #3b82f6);
2471
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
2646
+ border-color: var(--tecof-accent);
2647
+ box-shadow: var(--tecof-focus-ring);
2472
2648
  }
2473
2649
 
2474
2650
  .tecof-cms-col-sort-btns {
2475
2651
  display: flex;
2476
2652
  gap: 2px;
2477
- background: #f4f4f5;
2653
+ background: var(--tecof-bg);
2478
2654
  border: none;
2479
2655
  padding: 3px;
2480
2656
  border-radius: 10px;
@@ -2487,21 +2663,21 @@
2487
2663
  font-weight: 500;
2488
2664
  background: transparent;
2489
2665
  border: none;
2490
- border-radius: 8px;
2666
+ border-radius: var(--tecof-radius);
2491
2667
  cursor: pointer;
2492
- color: #71717a;
2668
+ color: var(--tecof-text-muted);
2493
2669
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2494
2670
  }
2495
2671
 
2496
2672
  .tecof-cms-col-sort-btn.active {
2497
- background: #ffffff;
2498
- color: var(--tecof-primary-600, #2563eb);
2673
+ background: var(--tecof-surface);
2674
+ color: var(--tecof-accent-hover);
2499
2675
  box-shadow: 0 2px 6px rgba(9, 9, 11, 0.06);
2500
2676
  font-weight: 600;
2501
2677
  }
2502
2678
 
2503
2679
  .tecof-cms-col-sort-btn:hover:not(.active) {
2504
- color: #09090b;
2680
+ color: var(--tecof-text);
2505
2681
  background: rgba(0, 0, 0, 0.03);
2506
2682
  }
2507
2683
 
@@ -2514,20 +2690,20 @@
2514
2690
  padding: 6px 12px;
2515
2691
  font-size: 11px;
2516
2692
  font-weight: 600;
2517
- color: var(--tecof-primary-600, #2563eb);
2518
- background: var(--tecof-primary-50, #eff6ff);
2519
- border-radius: 8px;
2693
+ color: var(--tecof-accent-hover);
2694
+ background: var(--tecof-accent-subtle);
2695
+ border-radius: var(--tecof-radius);
2520
2696
  align-self: flex-start;
2521
- box-shadow: 0 1px 2px rgba(59, 130, 246, 0.04);
2697
+ box-shadow: 0 1px 2px rgba(116, 181, 0, 0.04);
2522
2698
  }
2523
2699
 
2524
2700
  .tecof-cms-col-badge svg {
2525
- color: var(--tecof-primary-500, #3b82f6);
2701
+ color: var(--tecof-accent);
2526
2702
  }
2527
2703
 
2528
2704
  .tecof-cms-col-badge-count {
2529
2705
  font-size: 10px;
2530
- color: var(--tecof-primary-400, #60a5fa);
2706
+ color: var(--tecof-primary-400);
2531
2707
  font-weight: 500;
2532
2708
  margin-left: 2px;
2533
2709
  }
@@ -2535,10 +2711,10 @@
2535
2711
  /* ── Field Mapping ── */
2536
2712
 
2537
2713
  .tecof-cms-col-mapping {
2538
- border: 1px solid rgba(228, 228, 231, 0.8);
2539
- border-radius: 12px;
2714
+ border: var(--tecof-line-subtle);
2715
+ border-radius: var(--tecof-radius-lg);
2540
2716
  overflow: hidden;
2541
- background: #ffffff;
2717
+ background: var(--tecof-surface);
2542
2718
  margin-top: 4px;
2543
2719
  }
2544
2720
 
@@ -2549,15 +2725,15 @@
2549
2725
  padding: 10px 14px;
2550
2726
  font-size: 10px;
2551
2727
  font-weight: 700;
2552
- color: #52525b;
2553
- background: #fafafa;
2554
- border-bottom: 1px solid #f4f4f5;
2728
+ color: var(--tecof-text-muted);
2729
+ background: var(--tecof-surface-2);
2730
+ border-bottom: 1px solid var(--tecof-bg);
2555
2731
  text-transform: uppercase;
2556
2732
  letter-spacing: 0.05em;
2557
2733
  }
2558
2734
 
2559
2735
  .tecof-cms-col-mapping-header svg {
2560
- color: #71717a;
2736
+ color: var(--tecof-text-muted);
2561
2737
  }
2562
2738
 
2563
2739
  .tecof-cms-col-mapping-rows {
@@ -2571,7 +2747,7 @@
2571
2747
  align-items: center;
2572
2748
  gap: 12px;
2573
2749
  padding: 10px 14px;
2574
- border-bottom: 1px solid #f4f4f5;
2750
+ border-bottom: 1px solid var(--tecof-bg);
2575
2751
  }
2576
2752
 
2577
2753
  .tecof-cms-col-mapping-row:last-child {
@@ -2583,17 +2759,17 @@
2583
2759
  width: 90px;
2584
2760
  font-size: 13px;
2585
2761
  font-weight: 600;
2586
- color: #27272a;
2762
+ color: var(--tecof-text-soft);
2587
2763
  }
2588
2764
 
2589
2765
  .tecof-cms-col-mapping-select {
2590
2766
  flex: 1;
2591
2767
  padding: 6px 10px;
2592
2768
  font-size: 13px;
2593
- border: 1px solid rgba(228, 228, 231, 0.8);
2594
- border-radius: 8px;
2595
- background: #ffffff;
2596
- color: #18181b;
2769
+ border: var(--tecof-line-subtle);
2770
+ border-radius: var(--tecof-radius);
2771
+ background: var(--tecof-surface);
2772
+ color: var(--tecof-text);
2597
2773
  outline: none;
2598
2774
  cursor: pointer;
2599
2775
  transition: all 0.2s;
@@ -2602,11 +2778,1152 @@
2602
2778
  }
2603
2779
 
2604
2780
  .tecof-cms-col-mapping-select:focus {
2605
- border-color: var(--tecof-primary-500, #3b82f6);
2606
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
2781
+ border-color: var(--tecof-accent);
2782
+ box-shadow: var(--tecof-focus-ring);
2607
2783
  }
2608
2784
 
2609
2785
  .tecof-cms-col-mapping-select:disabled {
2610
2786
  opacity: 0.5;
2611
2787
  cursor: not-allowed;
2612
- }
2788
+ }
2789
+
2790
+ /* ═══════════════════════════════════════════════════════════════════
2791
+ Skeleton Loader Primitives (loaderların hepsi skeleton)
2792
+ ═══════════════════════════════════════════════════════════════════ */
2793
+ .tecof-skeleton {
2794
+ background: linear-gradient(90deg,
2795
+ var(--tecof-border) 25%,
2796
+ var(--tecof-bg) 37%,
2797
+ var(--tecof-border) 63%);
2798
+ background-size: 400% 100%;
2799
+ animation: tecof-shimmer 1.4s ease infinite;
2800
+ border-radius: var(--tecof-radius-sm);
2801
+ display: block;
2802
+ }
2803
+
2804
+ @keyframes tecof-shimmer {
2805
+ 0% { background-position: 100% 0; }
2806
+ 100% { background-position: 0 0; }
2807
+ }
2808
+
2809
+ .tecof-skeleton-text { height: 12px; width: 100%; }
2810
+ .tecof-skeleton-text.sm { height: 9px; }
2811
+ .tecof-skeleton-text.w-40 { width: 40%; }
2812
+ .tecof-skeleton-text.w-60 { width: 60%; }
2813
+ .tecof-skeleton-text.w-80 { width: 80%; }
2814
+ .tecof-skeleton-circle { border-radius: 50%; flex-shrink: 0; }
2815
+ .tecof-skeleton-block { width: 100%; border-radius: var(--tecof-radius); }
2816
+
2817
+ .tecof-skeleton-row {
2818
+ display: flex;
2819
+ align-items: center;
2820
+ gap: 12px;
2821
+ padding: 10px 0;
2822
+ }
2823
+
2824
+ .tecof-skeleton-list {
2825
+ display: flex;
2826
+ flex-direction: column;
2827
+ gap: 6px;
2828
+ }
2829
+
2830
+ .tecof-field-loading {
2831
+ display: flex;
2832
+ flex-direction: column;
2833
+ gap: 8px;
2834
+ width: 100%;
2835
+ padding: 10px;
2836
+ border: var(--tecof-line);
2837
+ border-radius: var(--tecof-radius);
2838
+ background: var(--tecof-surface-2);
2839
+ box-sizing: border-box;
2840
+ }
2841
+
2842
+ .tecof-field-loading-row {
2843
+ display: grid;
2844
+ grid-template-columns: 36px 1fr;
2845
+ gap: 10px;
2846
+ align-items: center;
2847
+ }
2848
+
2849
+ .tecof-field-loading-thumb {
2850
+ width: 36px;
2851
+ height: 36px;
2852
+ }
2853
+
2854
+ .tecof-field-loading-lines {
2855
+ display: flex;
2856
+ flex-direction: column;
2857
+ gap: 7px;
2858
+ min-width: 0;
2859
+ }
2860
+
2861
+ .tecof-field-loading-compact {
2862
+ display: flex;
2863
+ align-items: center;
2864
+ gap: 10px;
2865
+ padding: 12px 14px;
2866
+ border-radius: var(--tecof-radius);
2867
+ background: var(--tecof-surface-2);
2868
+ border: var(--tecof-line);
2869
+ }
2870
+
2871
+ .tecof-field-loading-compact .tecof-skeleton-circle {
2872
+ width: 18px;
2873
+ height: 18px;
2874
+ }
2875
+
2876
+ .tecof-media-skeleton-grid {
2877
+ display: grid;
2878
+ grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
2879
+ gap: 12px;
2880
+ padding-top: 4px;
2881
+ }
2882
+
2883
+ .tecof-media-skeleton-card {
2884
+ display: flex;
2885
+ flex-direction: column;
2886
+ gap: 8px;
2887
+ }
2888
+
2889
+ .tecof-media-skeleton-thumb {
2890
+ aspect-ratio: 1;
2891
+ }
2892
+
2893
+ /* ═══════════════════════════════════════════════════════════════════
2894
+ Tecof Studio — Shell
2895
+ ═══════════════════════════════════════════════════════════════════ */
2896
+ .tecof-studio-root {
2897
+ display: flex;
2898
+ flex-direction: column;
2899
+ height: 100vh;
2900
+ width: 100vw;
2901
+ overflow: hidden;
2902
+ position: relative;
2903
+ background: var(--tecof-bg);
2904
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
2905
+ color: var(--tecof-text);
2906
+ }
2907
+
2908
+ .tecof-studio-workspace-container {
2909
+ display: flex;
2910
+ flex: 1;
2911
+ height: calc(100% - 56px);
2912
+ width: 100%;
2913
+ overflow: hidden;
2914
+ }
2915
+
2916
+ .tecof-studio-workspace {
2917
+ display: flex;
2918
+ flex: 1;
2919
+ height: 100%;
2920
+ position: relative;
2921
+ overflow: hidden;
2922
+ }
2923
+
2924
+ .tecof-studio-save-indicator {
2925
+ position: absolute;
2926
+ bottom: 24px;
2927
+ right: 24px;
2928
+ background: var(--tecof-text);
2929
+ color: var(--tecof-surface);
2930
+ padding: 8px 16px;
2931
+ border-radius: 24px;
2932
+ font-size: 12px;
2933
+ font-weight: 500;
2934
+ box-shadow: var(--tecof-shadow-md);
2935
+ z-index: 9999;
2936
+ display: flex;
2937
+ align-items: center;
2938
+ gap: 8px;
2939
+ }
2940
+
2941
+ .tecof-studio-save-indicator.is-error { background: var(--tecof-danger); }
2942
+
2943
+ /* ─── Studio Loading Skeleton (full editor) ─── */
2944
+ .tecof-studio-skeleton {
2945
+ display: flex;
2946
+ flex-direction: column;
2947
+ height: 100vh;
2948
+ width: 100vw;
2949
+ overflow: hidden;
2950
+ background: var(--tecof-bg);
2951
+ }
2952
+
2953
+ .tecof-studio-skeleton-topbar {
2954
+ height: 56px;
2955
+ flex-shrink: 0;
2956
+ background: var(--tecof-surface);
2957
+ border-bottom: 1px solid var(--tecof-border);
2958
+ display: flex;
2959
+ align-items: center;
2960
+ justify-content: space-between;
2961
+ padding: 0 20px;
2962
+ }
2963
+
2964
+ .tecof-studio-skeleton-body {
2965
+ flex: 1;
2966
+ display: flex;
2967
+ overflow: hidden;
2968
+ }
2969
+
2970
+ .tecof-studio-skeleton-side {
2971
+ width: 280px;
2972
+ flex-shrink: 0;
2973
+ background: var(--tecof-surface);
2974
+ border-right: 1px solid var(--tecof-border);
2975
+ padding: 16px;
2976
+ display: flex;
2977
+ flex-direction: column;
2978
+ gap: 14px;
2979
+ }
2980
+
2981
+ .tecof-studio-skeleton-side.right {
2982
+ width: 320px;
2983
+ border-right: none;
2984
+ border-left: 1px solid var(--tecof-border);
2985
+ }
2986
+
2987
+ .tecof-studio-skeleton-canvas {
2988
+ flex: 1;
2989
+ padding: 32px;
2990
+ display: flex;
2991
+ flex-direction: column;
2992
+ gap: 18px;
2993
+ overflow: hidden;
2994
+ }
2995
+
2996
+ .tecof-studio-skeleton-toolgroup {
2997
+ display: flex;
2998
+ gap: 8px;
2999
+ align-items: center;
3000
+ }
3001
+
3002
+ /* Skeleton element sizes (static layout — class-based, no inline) */
3003
+ .tecof-studio-skeleton-title { width: 140px; height: 14px; }
3004
+ .tecof-studio-skeleton-vp { width: 120px; height: 30px; border-radius: var(--tecof-radius); }
3005
+ .tecof-studio-skeleton-dot { width: 30px; height: 30px; border-radius: 50%; }
3006
+ .tecof-studio-skeleton-cta { width: 110px; height: 32px; border-radius: var(--tecof-radius); }
3007
+ .tecof-studio-skeleton-search { height: 34px; border-radius: var(--tecof-radius); }
3008
+ .tecof-studio-skeleton-blockrow { height: 38px; border-radius: var(--tecof-radius); }
3009
+ .tecof-studio-skeleton-canvas .tecof-skeleton:nth-child(1) { height: 180px; }
3010
+ .tecof-studio-skeleton-canvas .tecof-skeleton:nth-child(2) { height: 120px; }
3011
+ .tecof-studio-skeleton-canvas .tecof-skeleton:nth-child(3) { height: 220px; }
3012
+ .tecof-studio-skeleton-field { height: 40px; border-radius: var(--tecof-radius); }
3013
+
3014
+ /* ═══════════════════════════════════════════════════════════════════
3015
+ Studio — TopBar
3016
+ ═══════════════════════════════════════════════════════════════════ */
3017
+ .tecof-topbar {
3018
+ height: 56px;
3019
+ flex-shrink: 0;
3020
+ border-bottom: 1px solid var(--tecof-border);
3021
+ background: var(--tecof-surface);
3022
+ display: flex;
3023
+ align-items: center;
3024
+ justify-content: space-between;
3025
+ padding: 0 20px;
3026
+ box-sizing: border-box;
3027
+ z-index: 100;
3028
+ }
3029
+
3030
+ .tecof-topbar-title {
3031
+ font-size: 14px;
3032
+ font-weight: 600;
3033
+ color: var(--tecof-text);
3034
+ display: flex;
3035
+ align-items: center;
3036
+ gap: 8px;
3037
+ }
3038
+
3039
+ .tecof-topbar-saved {
3040
+ font-size: 11px;
3041
+ color: var(--tecof-success);
3042
+ display: inline-flex;
3043
+ align-items: center;
3044
+ gap: 4px;
3045
+ font-weight: 500;
3046
+ }
3047
+
3048
+ .tecof-topbar-viewports {
3049
+ display: flex;
3050
+ align-items: center;
3051
+ background: var(--tecof-bg);
3052
+ padding: 3px;
3053
+ border-radius: var(--tecof-radius);
3054
+ gap: 2px;
3055
+ }
3056
+
3057
+ .tecof-vp-btn {
3058
+ background: transparent;
3059
+ border: none;
3060
+ outline: none;
3061
+ cursor: pointer;
3062
+ padding: 6px 12px;
3063
+ border-radius: var(--tecof-radius-sm);
3064
+ color: var(--tecof-text-muted);
3065
+ display: flex;
3066
+ align-items: center;
3067
+ justify-content: center;
3068
+ transition: var(--tecof-transition);
3069
+ }
3070
+
3071
+ .tecof-vp-btn:hover { color: var(--tecof-text); }
3072
+
3073
+ .tecof-vp-btn.is-active {
3074
+ background: var(--tecof-surface);
3075
+ color: var(--tecof-text);
3076
+ box-shadow: var(--tecof-shadow-sm);
3077
+ }
3078
+
3079
+ .tecof-topbar-actions {
3080
+ display: flex;
3081
+ align-items: center;
3082
+ gap: 12px;
3083
+ }
3084
+
3085
+ .tecof-topbar-undoredo { display: flex; gap: 4px; }
3086
+
3087
+ .tecof-icon-btn {
3088
+ background: transparent;
3089
+ border: none;
3090
+ cursor: pointer;
3091
+ padding: 8px;
3092
+ border-radius: var(--tecof-radius-sm);
3093
+ color: var(--tecof-text-muted);
3094
+ display: flex;
3095
+ align-items: center;
3096
+ justify-content: center;
3097
+ transition: background 0.15s ease, color 0.15s ease;
3098
+ }
3099
+
3100
+ .tecof-icon-btn:hover:not(:disabled) {
3101
+ background: var(--tecof-bg);
3102
+ color: var(--tecof-text);
3103
+ }
3104
+
3105
+ .tecof-icon-btn:disabled {
3106
+ color: var(--tecof-text-faint);
3107
+ cursor: not-allowed;
3108
+ }
3109
+
3110
+ .tecof-topbar-divider {
3111
+ width: 1px;
3112
+ height: 20px;
3113
+ background: var(--tecof-border);
3114
+ }
3115
+
3116
+ .tecof-btn-primary {
3117
+ background: var(--tecof-accent);
3118
+ color: var(--tecof-accent-fg);
3119
+ border: none;
3120
+ cursor: pointer;
3121
+ padding: 8px 16px;
3122
+ border-radius: var(--tecof-radius);
3123
+ font-size: 13px;
3124
+ font-weight: 600;
3125
+ display: flex;
3126
+ align-items: center;
3127
+ gap: 8px;
3128
+ transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
3129
+ }
3130
+
3131
+ .tecof-btn-primary:hover:not(:disabled) {
3132
+ background: var(--tecof-accent-hover);
3133
+ box-shadow: 0 2px 8px var(--tecof-accent-ring);
3134
+ }
3135
+
3136
+ .tecof-btn-primary:active:not(:disabled) {
3137
+ background: var(--tecof-accent-active);
3138
+ transform: translateY(1px);
3139
+ }
3140
+
3141
+ .tecof-btn-primary:disabled { opacity: 0.6; cursor: wait; }
3142
+
3143
+ /* ═══════════════════════════════════════════════════════════════════
3144
+ Studio — Left Panel (Blocks + Layers)
3145
+ ═══════════════════════════════════════════════════════════════════ */
3146
+ .tecof-left-panel {
3147
+ width: 280px;
3148
+ flex-shrink: 0;
3149
+ border-right: 1px solid var(--tecof-border);
3150
+ background: var(--tecof-surface);
3151
+ display: flex;
3152
+ flex-direction: column;
3153
+ height: 100%;
3154
+ box-sizing: border-box;
3155
+ }
3156
+
3157
+ .tecof-panel-tabs {
3158
+ display: flex;
3159
+ border-bottom: 1px solid var(--tecof-border);
3160
+ padding: 8px 12px;
3161
+ gap: 4px;
3162
+ }
3163
+
3164
+ .tecof-tab {
3165
+ flex: 1;
3166
+ display: flex;
3167
+ align-items: center;
3168
+ justify-content: center;
3169
+ gap: 6px;
3170
+ border: none;
3171
+ outline: none;
3172
+ padding: 8px;
3173
+ border-radius: var(--tecof-radius-sm);
3174
+ font-size: 12px;
3175
+ font-weight: 600;
3176
+ cursor: pointer;
3177
+ background: transparent;
3178
+ color: var(--tecof-text-muted);
3179
+ transition: var(--tecof-transition);
3180
+ }
3181
+
3182
+ .tecof-tab:hover { color: var(--tecof-text); background: var(--tecof-bg); }
3183
+
3184
+ .tecof-tab.is-active {
3185
+ background: var(--tecof-accent-subtle);
3186
+ color: var(--tecof-accent-text);
3187
+ }
3188
+
3189
+ .tecof-panel-body {
3190
+ flex: 1;
3191
+ overflow-y: auto;
3192
+ padding: 12px;
3193
+ }
3194
+
3195
+ .tecof-blocks {
3196
+ display: flex;
3197
+ flex-direction: column;
3198
+ gap: 16px;
3199
+ }
3200
+
3201
+ .tecof-search {
3202
+ display: flex;
3203
+ align-items: center;
3204
+ background: var(--tecof-bg);
3205
+ padding: 6px 10px;
3206
+ border-radius: var(--tecof-radius);
3207
+ gap: 8px;
3208
+ transition: box-shadow 0.15s ease;
3209
+ }
3210
+
3211
+ .tecof-search:focus-within { box-shadow: 0 0 0 2px var(--tecof-accent-ring); }
3212
+
3213
+ .tecof-search-input {
3214
+ border: none;
3215
+ outline: none;
3216
+ background: transparent;
3217
+ font-size: 12px;
3218
+ color: var(--tecof-text);
3219
+ width: 100%;
3220
+ }
3221
+
3222
+ .tecof-block-cat {
3223
+ display: flex;
3224
+ flex-direction: column;
3225
+ gap: 8px;
3226
+ }
3227
+
3228
+ .tecof-block-cat-title {
3229
+ font-size: 11px;
3230
+ font-weight: 700;
3231
+ color: var(--tecof-text-muted);
3232
+ text-transform: uppercase;
3233
+ letter-spacing: 0.05em;
3234
+ }
3235
+
3236
+ .tecof-block-grid {
3237
+ display: grid;
3238
+ grid-template-columns: 1fr;
3239
+ gap: 6px;
3240
+ }
3241
+
3242
+ .tecof-block-btn {
3243
+ background: var(--tecof-surface);
3244
+ border: var(--tecof-line);
3245
+ padding: 10px 12px;
3246
+ border-radius: var(--tecof-radius);
3247
+ font-size: 13px;
3248
+ font-weight: 500;
3249
+ color: var(--tecof-text-soft);
3250
+ cursor: grab;
3251
+ display: flex;
3252
+ align-items: center;
3253
+ justify-content: space-between;
3254
+ text-align: left;
3255
+ transition: var(--tecof-transition);
3256
+ box-shadow: var(--tecof-shadow-sm);
3257
+ }
3258
+
3259
+ .tecof-block-btn:hover {
3260
+ border-color: var(--tecof-accent);
3261
+ color: var(--tecof-accent-text);
3262
+ background: var(--tecof-accent-subtle);
3263
+ }
3264
+
3265
+ .tecof-block-btn:active { cursor: grabbing; transform: scale(0.98); }
3266
+
3267
+ .tecof-block-btn-icon { color: var(--tecof-text-subtle); flex-shrink: 0; }
3268
+ .tecof-block-btn:hover .tecof-block-btn-icon { color: var(--tecof-accent); }
3269
+
3270
+ /* ═══════════════════════════════════════════════════════════════════
3271
+ Studio — Layers Tree
3272
+ ═══════════════════════════════════════════════════════════════════ */
3273
+ .tecof-layers {
3274
+ display: flex;
3275
+ flex-direction: column;
3276
+ gap: 2px;
3277
+ height: 100%;
3278
+ }
3279
+
3280
+ .tecof-layers-empty {
3281
+ text-align: center;
3282
+ color: var(--tecof-text-subtle);
3283
+ font-size: 13px;
3284
+ padding: 24px 12px;
3285
+ }
3286
+
3287
+ .tecof-layer-node {
3288
+ display: flex;
3289
+ flex-direction: column;
3290
+ }
3291
+
3292
+ .tecof-layer-row {
3293
+ display: flex;
3294
+ align-items: center;
3295
+ justify-content: space-between;
3296
+ padding: 6px 8px 6px var(--tecof-layer-indent, 8px);
3297
+ background: transparent;
3298
+ color: var(--tecof-text-soft);
3299
+ cursor: grab;
3300
+ border-radius: var(--tecof-radius-sm);
3301
+ font-size: 13px;
3302
+ transition: background 0.15s ease, color 0.15s ease;
3303
+ }
3304
+
3305
+ .tecof-layer-row:hover { background: var(--tecof-bg); }
3306
+
3307
+ .tecof-layer-row:focus-visible {
3308
+ outline: 2px solid var(--tecof-accent);
3309
+ outline-offset: 2px;
3310
+ }
3311
+
3312
+ .tecof-layer-row.is-selected {
3313
+ background: var(--tecof-accent-subtle);
3314
+ color: var(--tecof-accent-text);
3315
+ font-weight: 500;
3316
+ }
3317
+
3318
+ .tecof-layer-row-main {
3319
+ display: flex;
3320
+ align-items: center;
3321
+ gap: 6px;
3322
+ min-width: 0;
3323
+ }
3324
+
3325
+ .tecof-layer-caret {
3326
+ background: transparent;
3327
+ border: none;
3328
+ cursor: pointer;
3329
+ padding: 0;
3330
+ display: flex;
3331
+ align-items: center;
3332
+ color: var(--tecof-text-subtle);
3333
+ }
3334
+
3335
+ .tecof-layer-caret-spacer { width: 14px; flex-shrink: 0; }
3336
+
3337
+ .tecof-layer-icon { color: var(--tecof-text-muted); flex-shrink: 0; }
3338
+ .tecof-layer-row.is-selected .tecof-layer-icon { color: var(--tecof-accent); }
3339
+
3340
+ .tecof-layer-label {
3341
+ white-space: nowrap;
3342
+ overflow: hidden;
3343
+ text-overflow: ellipsis;
3344
+ max-width: 120px;
3345
+ }
3346
+
3347
+ .tecof-layer-delete {
3348
+ background: transparent;
3349
+ border: none;
3350
+ cursor: pointer;
3351
+ padding: 2px;
3352
+ color: var(--tecof-text-subtle);
3353
+ display: flex;
3354
+ align-items: center;
3355
+ opacity: 0;
3356
+ transition: opacity 0.2s ease, color 0.15s ease;
3357
+ }
3358
+
3359
+ .tecof-layer-row:hover .tecof-layer-delete { opacity: 1; }
3360
+ .tecof-layer-delete:hover { color: var(--tecof-danger); }
3361
+
3362
+ .tecof-layer-zone-label {
3363
+ font-size: 10px;
3364
+ text-transform: uppercase;
3365
+ letter-spacing: 0.05em;
3366
+ color: var(--tecof-text-subtle);
3367
+ padding: 4px 8px 4px var(--tecof-layer-zone-indent, 8px);
3368
+ font-weight: 600;
3369
+ }
3370
+
3371
+ /* Shared insertion line (canvas + layers) */
3372
+ .tecof-drop-line {
3373
+ height: 3px;
3374
+ background: var(--tecof-accent);
3375
+ margin: 4px 0;
3376
+ border-radius: 2px;
3377
+ box-shadow: 0 0 0 1px var(--tecof-surface), 0 1px 4px var(--tecof-accent-ring);
3378
+ }
3379
+
3380
+ .tecof-drop-line.sm { height: 2px; margin: 2px 0; }
3381
+
3382
+ /* ═══════════════════════════════════════════════════════════════════
3383
+ Studio — Inspector
3384
+ ═══════════════════════════════════════════════════════════════════ */
3385
+ .tecof-inspector {
3386
+ width: 320px;
3387
+ flex-shrink: 0;
3388
+ height: 100%;
3389
+ border-left: 1px solid var(--tecof-border);
3390
+ background: var(--tecof-surface);
3391
+ display: flex;
3392
+ flex-direction: column;
3393
+ box-sizing: border-box;
3394
+ }
3395
+
3396
+ .tecof-inspector-header {
3397
+ padding: 16px 20px;
3398
+ border-bottom: 1px solid var(--tecof-bg);
3399
+ display: flex;
3400
+ align-items: center;
3401
+ justify-content: space-between;
3402
+ gap: 8px;
3403
+ }
3404
+
3405
+ .tecof-inspector-title {
3406
+ margin: 0;
3407
+ font-size: 14px;
3408
+ font-weight: 700;
3409
+ color: var(--tecof-text);
3410
+ }
3411
+
3412
+ .tecof-inspector-id {
3413
+ font-size: 11px;
3414
+ color: var(--tecof-text-subtle);
3415
+ font-family: monospace;
3416
+ }
3417
+
3418
+ .tecof-inspector-deselect {
3419
+ background: transparent;
3420
+ border: none;
3421
+ color: var(--tecof-text-muted);
3422
+ cursor: pointer;
3423
+ font-size: 11px;
3424
+ font-weight: 500;
3425
+ padding: 4px 8px;
3426
+ border-radius: var(--tecof-radius-sm);
3427
+ white-space: nowrap;
3428
+ transition: var(--tecof-transition);
3429
+ }
3430
+
3431
+ .tecof-inspector-deselect:hover { background: var(--tecof-bg); color: var(--tecof-text); }
3432
+
3433
+ .tecof-inspector-fields {
3434
+ flex: 1;
3435
+ overflow-y: auto;
3436
+ padding: 20px;
3437
+ display: flex;
3438
+ flex-direction: column;
3439
+ gap: 16px;
3440
+ }
3441
+
3442
+ .tecof-inspector-empty {
3443
+ display: flex;
3444
+ flex-direction: column;
3445
+ align-items: center;
3446
+ justify-content: center;
3447
+ height: 100%;
3448
+ color: var(--tecof-text-subtle);
3449
+ font-size: 12px;
3450
+ text-align: center;
3451
+ padding: 20px;
3452
+ }
3453
+
3454
+ .tecof-inspector-empty-icon { margin-bottom: 8px; opacity: 0.6; }
3455
+ .tecof-inspector-empty-fields { color: var(--tecof-text-subtle); font-size: 12px; text-align: center; margin-top: 16px; }
3456
+
3457
+ /* ═══════════════════════════════════════════════════════════════════
3458
+ Studio — Canvas
3459
+ ═══════════════════════════════════════════════════════════════════ */
3460
+ .tecof-canvas-container {
3461
+ flex: 1;
3462
+ display: flex;
3463
+ align-items: center;
3464
+ justify-content: center;
3465
+ background: var(--tecof-bg);
3466
+ padding: 24px;
3467
+ overflow: auto;
3468
+ height: 100%;
3469
+ box-sizing: border-box;
3470
+ }
3471
+
3472
+ .tecof-canvas-viewport {
3473
+ width: 100%;
3474
+ height: 100%;
3475
+ max-width: 100%;
3476
+ transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
3477
+ box-shadow: var(--tecof-shadow-lg);
3478
+ border-radius: 0;
3479
+ overflow: hidden;
3480
+ background: var(--tecof-surface);
3481
+ }
3482
+
3483
+ .tecof-canvas-viewport.is-tablet { width: 768px; border-radius: var(--tecof-radius-lg); }
3484
+ .tecof-canvas-viewport.is-mobile { width: 375px; border-radius: var(--tecof-radius-lg); }
3485
+
3486
+ .tecof-canvas-frame { width: 100%; height: 100%; border: none; background: var(--tecof-surface); }
3487
+
3488
+ .tecof-canvas-root {
3489
+ min-height: 100%;
3490
+ box-sizing: border-box;
3491
+ }
3492
+
3493
+ .tecof-canvas-root.is-empty {
3494
+ display: flex;
3495
+ min-height: 100vh;
3496
+ align-items: center;
3497
+ justify-content: center;
3498
+ }
3499
+
3500
+ .tecof-canvas-root.is-dragover .tecof-canvas-empty {
3501
+ border-color: var(--tecof-accent);
3502
+ background: var(--tecof-accent-subtle);
3503
+ color: var(--tecof-accent-text);
3504
+ transform: translateY(-1px);
3505
+ }
3506
+
3507
+ .tecof-canvas-empty {
3508
+ display: flex;
3509
+ flex-direction: column;
3510
+ align-items: center;
3511
+ justify-content: center;
3512
+ gap: 12px;
3513
+ min-height: 320px;
3514
+ margin: 16px;
3515
+ padding: 48px 24px;
3516
+ border: 2px dashed var(--tecof-border-strong);
3517
+ border-radius: var(--tecof-radius-lg);
3518
+ color: var(--tecof-text-subtle);
3519
+ text-align: center;
3520
+ transition: var(--tecof-transition);
3521
+ }
3522
+
3523
+ .tecof-canvas-empty.is-dragover {
3524
+ border-color: var(--tecof-accent);
3525
+ background: var(--tecof-accent-subtle);
3526
+ color: var(--tecof-accent-text);
3527
+ }
3528
+
3529
+ .tecof-canvas-empty-kicker {
3530
+ display: inline-flex;
3531
+ align-items: center;
3532
+ justify-content: center;
3533
+ min-width: 42px;
3534
+ height: 22px;
3535
+ padding: 0 10px;
3536
+ border-radius: var(--tecof-radius-pill);
3537
+ background: var(--tecof-surface);
3538
+ border: var(--tecof-line);
3539
+ color: var(--tecof-text-muted);
3540
+ font-size: 10px;
3541
+ font-weight: 700;
3542
+ text-transform: uppercase;
3543
+ letter-spacing: 0.05em;
3544
+ box-shadow: var(--tecof-shadow-sm);
3545
+ }
3546
+
3547
+ .tecof-canvas-empty-title { font-size: 15px; font-weight: 600; color: var(--tecof-text-soft); margin: 0; }
3548
+ .tecof-canvas-empty-sub { font-size: 13px; margin: 0; }
3549
+
3550
+ .tecof-canvas-root-tail {
3551
+ min-height: 44px;
3552
+ margin-top: 8px;
3553
+ border: 1px dashed transparent;
3554
+ border-radius: var(--tecof-radius);
3555
+ transition: var(--tecof-transition);
3556
+ }
3557
+
3558
+ .tecof-canvas-root.is-dragover .tecof-canvas-root-tail {
3559
+ border-color: var(--tecof-accent-border);
3560
+ background: var(--tecof-accent-subtle);
3561
+ }
3562
+
3563
+ /* ═══════════════════════════════════════════════════════════════════
3564
+ Studio — DropZone + Node (rendered INSIDE iframe)
3565
+ ═══════════════════════════════════════════════════════════════════ */
3566
+ .tecof-dropzone {
3567
+ border-radius: var(--tecof-radius);
3568
+ transition: var(--tecof-transition);
3569
+ display: flex;
3570
+ flex-direction: column;
3571
+ gap: 8px;
3572
+ align-items: stretch;
3573
+ }
3574
+
3575
+ .tecof-dropzone.is-empty {
3576
+ min-height: 70px;
3577
+ border: var(--tecof-line-dashed);
3578
+ background: var(--tecof-surface-2);
3579
+ padding: 16px;
3580
+ justify-content: center;
3581
+ align-items: center;
3582
+ }
3583
+
3584
+ .tecof-dropzone.is-drag-active:not(.is-empty) {
3585
+ min-height: 28px;
3586
+ }
3587
+
3588
+ .tecof-dropzone.is-dragover {
3589
+ border: 2px dashed var(--tecof-accent);
3590
+ background: var(--tecof-accent-subtle);
3591
+ box-shadow: inset 0 0 0 1px var(--tecof-accent-ring);
3592
+ }
3593
+
3594
+ .tecof-dropzone-hint {
3595
+ font-size: 11px;
3596
+ color: var(--tecof-text-subtle);
3597
+ pointer-events: none;
3598
+ font-weight: 500;
3599
+ }
3600
+
3601
+ .tecof-dropzone.is-dragover .tecof-dropzone-hint { color: var(--tecof-accent-text); }
3602
+
3603
+ .tecof-node {
3604
+ display: flex;
3605
+ flex-direction: column;
3606
+ width: 100%;
3607
+ }
3608
+
3609
+ .tecof-node-wrapper {
3610
+ position: relative;
3611
+ transition: outline 0.15s ease-in-out;
3612
+ cursor: grab;
3613
+ }
3614
+
3615
+ .tecof-node-wrapper.is-readonly { cursor: default; }
3616
+ .tecof-node-wrapper.is-dragging { opacity: 0.4; }
3617
+
3618
+ .tecof-node-missing {
3619
+ padding: 12px;
3620
+ background: var(--tecof-danger-border);
3621
+ color: var(--tecof-danger-text);
3622
+ font-size: 12px;
3623
+ border-radius: var(--tecof-radius-sm);
3624
+ }
3625
+
3626
+ /* Drag ghost preview (follows cursor during DnD) */
3627
+ .tecof-drag-ghost {
3628
+ position: fixed;
3629
+ top: -1000px;
3630
+ left: -1000px;
3631
+ background: var(--tecof-accent);
3632
+ color: var(--tecof-accent-fg);
3633
+ font-family: 'Inter', system-ui, sans-serif;
3634
+ font-size: 13px;
3635
+ font-weight: 600;
3636
+ padding: 8px 14px;
3637
+ border-radius: var(--tecof-radius);
3638
+ box-shadow: var(--tecof-shadow-md);
3639
+ pointer-events: none;
3640
+ white-space: nowrap;
3641
+ z-index: 99999;
3642
+ }
3643
+
3644
+ /* ═══════════════════════════════════════════════════════════════════
3645
+ Studio — Selection Overlay (HOST DOM, above iframe)
3646
+ ═══════════════════════════════════════════════════════════════════ */
3647
+ .tecof-overlay {
3648
+ position: absolute;
3649
+ inset: 0;
3650
+ pointer-events: none;
3651
+ z-index: 1000;
3652
+ }
3653
+
3654
+ .tecof-outline {
3655
+ position: absolute;
3656
+ top: var(--tecof-outline-top, 0);
3657
+ left: var(--tecof-outline-left, 0);
3658
+ width: var(--tecof-outline-width, 0);
3659
+ height: var(--tecof-outline-height, 0);
3660
+ border-radius: var(--tecof-radius-xs);
3661
+ box-sizing: border-box;
3662
+ pointer-events: none;
3663
+ transition: top 0.1s ease-out, left 0.1s ease-out, width 0.1s ease-out, height 0.1s ease-out;
3664
+ }
3665
+
3666
+ .tecof-outline.is-hover { border: 1.5px dashed var(--tecof-accent); }
3667
+ .tecof-outline.is-selected { border: 2px solid var(--tecof-accent); }
3668
+
3669
+ .tecof-toolbar {
3670
+ position: absolute;
3671
+ top: -36px;
3672
+ right: -2px;
3673
+ display: flex;
3674
+ align-items: center;
3675
+ gap: 4px;
3676
+ background: var(--tecof-accent);
3677
+ border-radius: var(--tecof-radius-sm);
3678
+ padding: 4px;
3679
+ pointer-events: auto;
3680
+ box-shadow: 0 4px 6px -1px var(--tecof-accent-ring);
3681
+ }
3682
+
3683
+ .tecof-toolbar-btn {
3684
+ background: transparent;
3685
+ border: none;
3686
+ color: var(--tecof-accent-fg);
3687
+ cursor: pointer;
3688
+ padding: 4px;
3689
+ border-radius: var(--tecof-radius-xs);
3690
+ display: flex;
3691
+ transition: background 0.12s ease;
3692
+ }
3693
+
3694
+ .tecof-toolbar-btn:hover:not(:disabled) { background: var(--tecof-toolbar-hover); }
3695
+ .tecof-toolbar-btn:disabled { opacity: 0.45; cursor: not-allowed; }
3696
+
3697
+ .tecof-toolbar-sep {
3698
+ width: 1px;
3699
+ height: 14px;
3700
+ background: var(--tecof-toolbar-separator);
3701
+ margin: 0 2px;
3702
+ }
3703
+
3704
+ .tecof-outline-label {
3705
+ position: absolute;
3706
+ top: -26px;
3707
+ left: -2px;
3708
+ background: var(--tecof-accent);
3709
+ color: var(--tecof-accent-fg);
3710
+ font-size: 11px;
3711
+ font-weight: 600;
3712
+ padding: 2px 8px;
3713
+ border-radius: var(--tecof-radius-xs) var(--tecof-radius-xs) 0 0;
3714
+ user-select: none;
3715
+ }
3716
+
3717
+ .tecof-breadcrumbs {
3718
+ position: absolute;
3719
+ bottom: -28px;
3720
+ left: -2px;
3721
+ display: flex;
3722
+ align-items: center;
3723
+ gap: 4px;
3724
+ background: var(--tecof-text);
3725
+ color: var(--tecof-text-subtle);
3726
+ font-size: 10px;
3727
+ padding: 4px 8px;
3728
+ border-radius: 0 0 6px 6px;
3729
+ pointer-events: auto;
3730
+ box-shadow: var(--tecof-shadow-sm);
3731
+ }
3732
+
3733
+ .tecof-breadcrumb {
3734
+ cursor: pointer;
3735
+ transition: color 0.12s ease;
3736
+ }
3737
+
3738
+ .tecof-breadcrumb:hover { color: var(--tecof-surface); }
3739
+ .tecof-breadcrumb.is-active { color: var(--tecof-surface); font-weight: 600; }
3740
+ .tecof-breadcrumb-sep { color: var(--tecof-text-muted); }
3741
+
3742
+ /* ═══════════════════════════════════════════════════════════════════
3743
+ Studio — Field Renderer (Inspector inputs)
3744
+ ═══════════════════════════════════════════════════════════════════ */
3745
+ .tecof-field-label-container {
3746
+ display: flex;
3747
+ flex-direction: column;
3748
+ gap: 6px;
3749
+ width: 100%;
3750
+ margin-bottom: 16px;
3751
+ box-sizing: border-box;
3752
+ user-select: none;
3753
+ }
3754
+
3755
+ .tecof-field-label-header {
3756
+ display: flex;
3757
+ align-items: center;
3758
+ gap: 6px;
3759
+ font-size: 12px;
3760
+ font-weight: 600;
3761
+ color: var(--tecof-text-soft);
3762
+ }
3763
+
3764
+ .tecof-field-label-icon {
3765
+ display: inline-flex;
3766
+ align-items: center;
3767
+ color: var(--tecof-text-muted);
3768
+ }
3769
+
3770
+ .tecof-field-label-readonly {
3771
+ margin-left: auto;
3772
+ font-size: 10px;
3773
+ font-weight: 500;
3774
+ color: var(--tecof-text-subtle);
3775
+ }
3776
+
3777
+ .tecof-field-label-content { width: 100%; }
3778
+
3779
+ .tecof-field-custom { width: 100%; }
3780
+
3781
+ .tecof-input-text,
3782
+ .tecof-input-textarea,
3783
+ .tecof-input-select,
3784
+ .tecof-input-number {
3785
+ width: 100%;
3786
+ padding: 10px 12px;
3787
+ border-radius: var(--tecof-radius);
3788
+ border: var(--tecof-line);
3789
+ font-size: 13px;
3790
+ color: var(--tecof-text);
3791
+ background-color: var(--tecof-surface);
3792
+ outline: none;
3793
+ box-sizing: border-box;
3794
+ font-family: inherit;
3795
+ transition: border-color 0.15s ease, box-shadow 0.15s ease;
3796
+ }
3797
+
3798
+ .tecof-input-textarea { resize: vertical; }
3799
+ .tecof-input-select { padding-right: 32px; appearance: none; cursor: pointer; }
3800
+
3801
+ .tecof-input-text:focus,
3802
+ .tecof-input-textarea:focus,
3803
+ .tecof-input-select:focus,
3804
+ .tecof-input-number:focus {
3805
+ border-color: var(--tecof-accent);
3806
+ box-shadow: 0 0 0 3px var(--tecof-accent-ring);
3807
+ }
3808
+
3809
+ .tecof-input-text:disabled,
3810
+ .tecof-input-textarea:disabled,
3811
+ .tecof-input-select:disabled,
3812
+ .tecof-input-number:disabled {
3813
+ background-color: var(--tecof-bg);
3814
+ cursor: not-allowed;
3815
+ }
3816
+
3817
+ .tecof-field-select-wrap { position: relative; width: 100%; }
3818
+
3819
+ .tecof-field-select-caret {
3820
+ position: absolute;
3821
+ top: 50%;
3822
+ right: 12px;
3823
+ transform: translateY(-50%);
3824
+ pointer-events: none;
3825
+ display: flex;
3826
+ align-items: center;
3827
+ color: var(--tecof-text-muted);
3828
+ }
3829
+
3830
+ .tecof-field-radio-group { display: flex; flex-direction: column; gap: 8px; }
3831
+
3832
+ .tecof-field-radio {
3833
+ display: flex;
3834
+ align-items: center;
3835
+ gap: 8px;
3836
+ font-size: 13px;
3837
+ color: var(--tecof-text-soft);
3838
+ cursor: pointer;
3839
+ }
3840
+
3841
+ .tecof-field-radio.is-readonly { cursor: not-allowed; }
3842
+ .tecof-field-radio input { accent-color: var(--tecof-accent); cursor: pointer; }
3843
+ .tecof-field-radio.is-readonly input { cursor: not-allowed; }
3844
+
3845
+ .tecof-field-unsupported {
3846
+ padding: 8px;
3847
+ font-size: 11px;
3848
+ color: var(--tecof-text-muted);
3849
+ background: var(--tecof-surface-2);
3850
+ border-radius: var(--tecof-radius-xs);
3851
+ }
3852
+
3853
+ /* Array field */
3854
+ .tecof-array { display: flex; flex-direction: column; gap: 8px; width: 100%; }
3855
+
3856
+ .tecof-array-item {
3857
+ border: var(--tecof-line);
3858
+ border-radius: var(--tecof-radius);
3859
+ overflow: hidden;
3860
+ background: var(--tecof-surface);
3861
+ display: flex;
3862
+ flex-direction: column;
3863
+ }
3864
+
3865
+ .tecof-array-item-header {
3866
+ padding: 8px 12px;
3867
+ display: flex;
3868
+ align-items: center;
3869
+ justify-content: space-between;
3870
+ cursor: pointer;
3871
+ background: var(--tecof-surface);
3872
+ user-select: none;
3873
+ }
3874
+
3875
+ .tecof-array-item-header:focus-visible {
3876
+ outline: 2px solid var(--tecof-accent);
3877
+ outline-offset: -2px;
3878
+ }
3879
+
3880
+ .tecof-array-item-title-wrap { display: flex; align-items: center; gap: 6px; min-width: 0; }
3881
+ .tecof-array-item-title { font-size: 13px; font-weight: 500; color: var(--tecof-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
3882
+ .tecof-array-item-actions { display: flex; align-items: center; gap: 4px; }
3883
+
3884
+ .tecof-array-btn {
3885
+ background: transparent;
3886
+ border: none;
3887
+ cursor: pointer;
3888
+ padding: 2px;
3889
+ color: var(--tecof-text-muted);
3890
+ display: flex;
3891
+ align-items: center;
3892
+ border-radius: var(--tecof-radius-xs);
3893
+ }
3894
+
3895
+ .tecof-array-btn:hover:not(:disabled) { background: var(--tecof-bg); }
3896
+ .tecof-array-btn:disabled { color: var(--tecof-text-faint); cursor: not-allowed; }
3897
+ .tecof-array-btn.danger:hover:not(:disabled) { color: var(--tecof-danger); }
3898
+
3899
+ .tecof-array-item-body {
3900
+ padding: 12px;
3901
+ border-top: 1px solid var(--tecof-border);
3902
+ display: flex;
3903
+ flex-direction: column;
3904
+ gap: 12px;
3905
+ background: var(--tecof-surface-2);
3906
+ }
3907
+
3908
+ .tecof-add-array-item-btn {
3909
+ display: flex;
3910
+ align-items: center;
3911
+ justify-content: center;
3912
+ gap: 6px;
3913
+ width: 100%;
3914
+ padding: 10px;
3915
+ border-radius: var(--tecof-radius);
3916
+ border: var(--tecof-line-dashed);
3917
+ background: var(--tecof-surface);
3918
+ color: var(--tecof-text-muted);
3919
+ font-size: 13px;
3920
+ font-weight: 500;
3921
+ cursor: pointer;
3922
+ transition: var(--tecof-transition);
3923
+ }
3924
+
3925
+ .tecof-add-array-item-btn:hover {
3926
+ border-color: var(--tecof-accent);
3927
+ color: var(--tecof-accent-text);
3928
+ background: var(--tecof-accent-subtle);
3929
+ }