@hypermedia-components/core 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/hc-code.css CHANGED
@@ -1,11 +1,14 @@
1
- /* hc-code — code surface (issues #253, #256, #255).
1
+ /* hc-code — code surface (issues #253, #256, #255, #261).
2
2
  *
3
3
  * A monospace surface styled from the kit's tokens. The read-only modes
4
4
  * need no script (CSP `default-src 'self'` safe); the editable mode is a
5
5
  * real <textarea> that `installCodeEditor()` upgrades with a synced
6
- * line-number gutter. Syntax highlighting is out of scope — the lines are
7
- * plain text (a server-tokenized or behavior-driven follow-up may add it
8
- * additively later).
6
+ * line-number gutter.
7
+ *
8
+ * Read-only syntax highlighting is server-tokenized (#261): the server emits
9
+ * `<span class="hc-code__tok" data-tok="…">` spans, coloured from the
10
+ * `--hc-code-tok-*` palette — no client tokenizer (an editable highlight
11
+ * overlay is a possible follow-up). See "Syntax tokens" below.
9
12
  *
10
13
  * 1. Plain block — apply to a <pre>:
11
14
  *
@@ -272,4 +275,41 @@
272
275
  .hc-code__input:focus {
273
276
  outline: none;
274
277
  }
278
+
279
+ /* --- Syntax tokens (#261) ---------------------------------------------- */
280
+
281
+ /* Server-emitted token spans, inside <pre><code> or an hc-code__line.
282
+ * `data-tok` is a generic, language-agnostic vocabulary; `meta` is the
283
+ * catch-all for language-specific constructs (e.g. 2-way SQL directives).
284
+ * An unknown or absent `data-tok` inherits the plain code colour. Token
285
+ * colour wins over a context-line's muted text; line tints (data-state)
286
+ * and the diff gutter are unaffected. */
287
+ .hc-code__tok[data-tok="keyword"] {
288
+ color: var(--hc-code-tok-keyword);
289
+ }
290
+
291
+ .hc-code__tok[data-tok="string"] {
292
+ color: var(--hc-code-tok-string);
293
+ }
294
+
295
+ .hc-code__tok[data-tok="number"] {
296
+ color: var(--hc-code-tok-number);
297
+ }
298
+
299
+ .hc-code__tok[data-tok="comment"] {
300
+ color: var(--hc-code-tok-comment);
301
+ font-style: italic;
302
+ }
303
+
304
+ .hc-code__tok[data-tok="operator"] {
305
+ color: var(--hc-code-tok-operator);
306
+ }
307
+
308
+ .hc-code__tok[data-tok="identifier"] {
309
+ color: var(--hc-code-tok-identifier);
310
+ }
311
+
312
+ .hc-code__tok[data-tok="meta"] {
313
+ color: var(--hc-code-tok-meta);
314
+ }
275
315
  }
package/dist/hc.core.css CHANGED
@@ -53,6 +53,13 @@
53
53
  --hc-color-status-error-bg: #fef2f2;
54
54
  --hc-color-status-error-fg: #991b1b;
55
55
  --hc-color-status-error-border: #fee2e2;
56
+ --hc-color-syntax-keyword: #6d28d9;
57
+ --hc-color-syntax-string: #047857;
58
+ --hc-color-syntax-number: #b45309;
59
+ --hc-color-syntax-comment: #4b5563;
60
+ --hc-color-syntax-operator: #475569;
61
+ --hc-color-syntax-identifier: #111827;
62
+ --hc-color-syntax-meta: #be123c;
56
63
  --hc-control-height: 40px;
57
64
  --hc-control-padding-x: 1rem;
58
65
  --hc-control-radius: 6px;
@@ -434,6 +441,13 @@
434
441
  --hc-code-removed-bg: #fef2f2;
435
442
  --hc-code-removed-marker: #991b1b;
436
443
  --hc-code-input-min-height: 8rem;
444
+ --hc-code-tok-keyword: #6d28d9;
445
+ --hc-code-tok-string: #047857;
446
+ --hc-code-tok-number: #b45309;
447
+ --hc-code-tok-comment: #4b5563;
448
+ --hc-code-tok-operator: #475569;
449
+ --hc-code-tok-identifier: #111827;
450
+ --hc-code-tok-meta: #be123c;
437
451
  --hc-sparkline-width: 5rem;
438
452
  --hc-sparkline-height: 1.25rem;
439
453
  --hc-sparkline-stroke-width: 1.5px;
@@ -791,6 +805,13 @@
791
805
  --hc-color-status-error-bg: #450a0a;
792
806
  --hc-color-status-error-fg: #fecaca;
793
807
  --hc-color-status-error-border: #7f1d1d;
808
+ --hc-color-syntax-keyword: #c4b5fd;
809
+ --hc-color-syntax-string: #6ee7b7;
810
+ --hc-color-syntax-number: #fcd34d;
811
+ --hc-color-syntax-comment: #9ca3af;
812
+ --hc-color-syntax-operator: #cbd5e1;
813
+ --hc-color-syntax-identifier: #f3f4f6;
814
+ --hc-color-syntax-meta: #fda4af;
794
815
  --hc-shadow-sm: 0 1px 2px rgb(0, 0, 0, 0.55);
795
816
  --hc-shadow-md: 0 4px 12px rgb(0, 0, 0, 0.45);
796
817
  --hc-shadow-lg: 0 8px 24px rgb(0, 0, 0, 0.5);
@@ -926,6 +947,13 @@
926
947
  --hc-code-added-marker: #a7f3d0;
927
948
  --hc-code-removed-bg: #450a0a;
928
949
  --hc-code-removed-marker: #fecaca;
950
+ --hc-code-tok-keyword: #c4b5fd;
951
+ --hc-code-tok-string: #6ee7b7;
952
+ --hc-code-tok-number: #fcd34d;
953
+ --hc-code-tok-comment: #9ca3af;
954
+ --hc-code-tok-operator: #cbd5e1;
955
+ --hc-code-tok-identifier: #f3f4f6;
956
+ --hc-code-tok-meta: #fda4af;
929
957
  --hc-sparkline-error: #f87171;
930
958
  --hc-badge-default-bg: #1f2937;
931
959
  --hc-badge-default-fg: #f3f4f6;
@@ -1 +1 @@
1
- @layer hc.tokens,hc.base,hc.components,hc.recipes,hc.utilities;@layer hc.tokens{:root,[data-theme=light]{--hc-color-bg: #f9fafb;--hc-color-surface: #ffffff;--hc-color-text: #111827;--hc-color-text-muted: #4b5563;--hc-color-border: #d0d5dd;--hc-color-focus-ring: #3b82f6;--hc-color-error: #dc2626;--hc-color-success: #059669;--hc-color-warning: #d97706;--hc-color-info: #2563eb;--hc-color-overlay: rgba(17, 24, 39, .5);--hc-color-muted-bg: #f3f4f6;--hc-color-action-primary-bg: #2563eb;--hc-color-action-primary-fg: #ffffff;--hc-color-action-primary-border: #2563eb;--hc-color-action-primary-hover-bg: #1d4ed8;--hc-color-action-primary-hover-border: #1d4ed8;--hc-color-action-secondary-bg: #f3f4f6;--hc-color-action-secondary-fg: #111827;--hc-color-action-secondary-border: #f3f4f6;--hc-color-action-secondary-hover-bg: #e5e7eb;--hc-color-action-secondary-hover-border: #e5e7eb;--hc-color-action-primary-soft-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-color-action-error-bg: #dc2626;--hc-color-action-error-fg: #ffffff;--hc-color-action-error-border: #dc2626;--hc-color-action-error-hover-bg: #b91c1c;--hc-color-action-error-hover-border: #b91c1c;--hc-color-status-neutral-bg: #f3f4f6;--hc-color-status-neutral-fg: #1f2937;--hc-color-status-neutral-border: #e5e7eb;--hc-color-status-info-bg: #eff6ff;--hc-color-status-info-fg: #1e40af;--hc-color-status-info-border: #dbeafe;--hc-color-status-success-bg: #ecfdf5;--hc-color-status-success-fg: #065f46;--hc-color-status-success-border: #d1fae5;--hc-color-status-warning-bg: #fffbeb;--hc-color-status-warning-fg: #92400e;--hc-color-status-warning-border: #fef3c7;--hc-color-status-error-bg: #fef2f2;--hc-color-status-error-fg: #991b1b;--hc-color-status-error-border: #fee2e2;--hc-control-height: 40px;--hc-control-padding-x: 1rem;--hc-control-radius: 6px;--hc-space-1: .25rem;--hc-space-2: .5rem;--hc-space-3: .75rem;--hc-space-4: 1rem;--hc-space-5: 1.25rem;--hc-space-6: 1.5rem;--hc-space-8: 2rem;--hc-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--hc-font-family-heading: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--hc-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--hc-font-size-sm: .875rem;--hc-font-size-md: .9375rem;--hc-font-size-lg: 1.0625rem;--hc-font-weight-medium: 500;--hc-font-weight-semibold: 600;--hc-icon-size: 1em;--hc-opacity-disabled: .5;--hc-shadow-sm: 0 1px 2px rgb(0, 0, 0, .15);--hc-shadow-md: 0 4px 12px rgb(0, 0, 0, .1);--hc-shadow-lg: 0 8px 24px rgb(0, 0, 0, .12);--hc-shadow-overlay: 0 10px 30px rgb(0, 0, 0, .15);--hc-shadow-edge: rgb(0, 0, 0, .2)}:root{--hc-button-radius: 6px;--hc-button-font-size: .9375rem;--hc-button-font-weight: 500;--hc-button-default-bg: #ffffff;--hc-button-default-fg: #111827;--hc-button-default-border: #d0d5dd;--hc-button-default-hover-bg: #f3f4f6;--hc-button-secondary-bg: #f3f4f6;--hc-button-secondary-fg: #111827;--hc-button-secondary-border: #f3f4f6;--hc-button-secondary-hover-bg: #e5e7eb;--hc-button-secondary-hover-border: #e5e7eb;--hc-button-error-bg: #dc2626;--hc-button-error-fg: #ffffff;--hc-button-error-border: #dc2626;--hc-button-error-hover-bg: #b91c1c;--hc-button-error-hover-border: #b91c1c;--hc-button-ghost-bg: transparent;--hc-button-ghost-fg: #111827;--hc-button-ghost-border: transparent;--hc-button-sm-height: 32px;--hc-button-sm-padding-x: .75rem;--hc-button-sm-font-size: .875rem;--hc-button-lg-height: 48px;--hc-button-lg-padding-x: 1.25rem;--hc-button-lg-font-size: 1.0625rem;--hc-toggle-radius: 6px;--hc-toggle-font-size: .9375rem;--hc-toggle-font-weight: 500;--hc-toggle-fg: #111827;--hc-toggle-bg: #ffffff;--hc-toggle-border: #d0d5dd;--hc-toggle-hover-bg: #f3f4f6;--hc-toggle-hover-fg: #111827;--hc-toggle-on-fg: #111827;--hc-toggle-disabled-fg: #4b5563;--hc-toggle-disabled-bg: #f3f4f6;--hc-toggle-sm-height: 32px;--hc-toggle-sm-padding-x: .75rem;--hc-toggle-sm-font-size: .875rem;--hc-toggle-lg-height: 48px;--hc-toggle-lg-padding-x: 1.25rem;--hc-toggle-lg-font-size: 1.0625rem;--hc-input-radius: 6px;--hc-input-font-size: .9375rem;--hc-input-bg: #ffffff;--hc-input-fg: #111827;--hc-input-border: #d0d5dd;--hc-input-placeholder: #4b5563;--hc-input-error-border: #dc2626;--hc-input-success-border: #059669;--hc-input-warning-border: #d97706;--hc-input-disabled-bg: #f3f4f6;--hc-input-sm-height: 32px;--hc-input-sm-padding-x: .75rem;--hc-input-sm-font-size: .875rem;--hc-input-lg-height: 48px;--hc-input-lg-padding-x: 1.25rem;--hc-input-lg-font-size: 1.0625rem;--hc-datagrid-bg: #ffffff;--hc-datagrid-fg: #111827;--hc-datagrid-border: #d0d5dd;--hc-datagrid-head-bg: #f3f4f6;--hc-datagrid-head-fg: #111827;--hc-datagrid-frozen-bg: #ffffff;--hc-datagrid-subrow-border: color-mix(in srgb, #d0d5dd 55%, #ffffff);--hc-datagrid-cell-padding-x: .75rem;--hc-datagrid-cell-padding-y: .5rem;--hc-datagrid-head-1-h: 2rem;--hc-datagrid-head-2-h: 1.75rem;--hc-datepicker-radius: 6px;--hc-datepicker-font-size: .9375rem;--hc-datepicker-bg: #ffffff;--hc-datepicker-fg: #111827;--hc-datepicker-border: #d0d5dd;--hc-datepicker-error-border: #dc2626;--hc-datepicker-success-border: #059669;--hc-datepicker-warning-border: #d97706;--hc-datepicker-disabled-bg: #f3f4f6;--hc-datepicker-icon-size: 1rem;--hc-datepicker-sm-height: 32px;--hc-datepicker-sm-padding-x: .75rem;--hc-datepicker-sm-font-size: .875rem;--hc-datepicker-lg-height: 48px;--hc-datepicker-lg-padding-x: 1.25rem;--hc-datepicker-lg-font-size: 1.0625rem;--hc-select-radius: 6px;--hc-select-font-size: .9375rem;--hc-select-bg: #ffffff;--hc-select-fg: #111827;--hc-select-border: #d0d5dd;--hc-select-error-border: #dc2626;--hc-select-success-border: #059669;--hc-select-warning-border: #d97706;--hc-select-disabled-bg: #f3f4f6;--hc-select-chevron-size: 1rem;--hc-select-sm-height: 32px;--hc-select-sm-padding-x: .75rem;--hc-select-sm-font-size: .875rem;--hc-select-lg-height: 48px;--hc-select-lg-padding-x: 1.25rem;--hc-select-lg-font-size: 1.0625rem;--hc-checkbox-size: 1.125rem;--hc-checkbox-border-width: 1px;--hc-checkbox-border: #d0d5dd;--hc-checkbox-radius: 4px;--hc-checkbox-bg: #ffffff;--hc-checkbox-success-checked-bg: #059669;--hc-checkbox-success-checked-border: #059669;--hc-checkbox-warning-checked-bg: #d97706;--hc-checkbox-warning-checked-border: #d97706;--hc-checkbox-error-checked-bg: #dc2626;--hc-checkbox-error-checked-border: #dc2626;--hc-checkbox-error-border: #dc2626;--hc-checkbox-disabled-bg: #f3f4f6;--hc-checkbox-label-gap: .5rem;--hc-checkbox-sm-size: .875rem;--hc-checkbox-lg-size: 1.375rem;--hc-hovercard-bg: #ffffff;--hc-hovercard-fg: #111827;--hc-hovercard-border: #d0d5dd;--hc-hovercard-radius: 6px;--hc-hovercard-max-width: 20rem;--hc-hovercard-padding: .75rem;--hc-hovercard-gap: .5rem;--hc-hovercard-offset: .5rem;--hc-hovercard-title-weight: 600;--hc-hovercard-subtitle-fg: #4b5563;--hc-hovercard-subtitle-size: .875rem;--hc-drawer-bg: #ffffff;--hc-drawer-fg: #111827;--hc-drawer-border: #d0d5dd;--hc-drawer-side-max-width: 24rem;--hc-drawer-vert-max-height: 60vh;--hc-drawer-padding: 1rem;--hc-drawer-gap: .75rem;--hc-drawer-backdrop: rgba(17, 24, 39, .5);--hc-drawer-duration: .2s;--hc-multicombobox-control-padding-x: .5rem;--hc-multicombobox-control-padding-y: .25rem;--hc-multicombobox-control-gap: .25rem;--hc-multicombobox-input-min-width: 6rem;--hc-multicombobox-input-fg: #111827;--hc-multicombobox-tag-bg: #f3f4f6;--hc-multicombobox-tag-fg: #111827;--hc-multicombobox-tag-border: #d0d5dd;--hc-multicombobox-tag-padding-x: .5rem;--hc-multicombobox-tag-padding-y: .25rem;--hc-multicombobox-tag-radius: 4px;--hc-multicombobox-tag-gap: .25rem;--hc-multicombobox-tag-font-size: .875rem;--hc-multicombobox-tag-remove-fg: #4b5563;--hc-multicombobox-tag-remove-hover-fg: #dc2626;--hc-multicombobox-listbox-bg: #ffffff;--hc-multicombobox-listbox-fg: #111827;--hc-multicombobox-listbox-border: #d0d5dd;--hc-multicombobox-listbox-radius: 6px;--hc-multicombobox-listbox-max-height: 20rem;--hc-multicombobox-listbox-padding-block: .25rem;--hc-multicombobox-listbox-min-width: 10rem;--hc-multicombobox-listbox-offset: .25rem;--hc-multicombobox-option-padding-x: .75rem;--hc-multicombobox-option-padding-y: .5rem;--hc-multicombobox-option-font-size: .875rem;--hc-multicombobox-option-fg: #111827;--hc-multicombobox-option-hover-bg: #f3f4f6;--hc-multicombobox-option-active-bg: #f3f4f6;--hc-multicombobox-option-disabled-fg: #4b5563;--hc-multicombobox-option-indicator-size: 1rem;--hc-multicombobox-empty-fg: #4b5563;--hc-combobox-listbox-bg: #ffffff;--hc-combobox-listbox-fg: #111827;--hc-combobox-listbox-border: #d0d5dd;--hc-combobox-listbox-radius: 6px;--hc-combobox-listbox-max-height: 20rem;--hc-combobox-listbox-padding-block: .25rem;--hc-combobox-listbox-min-width: 10rem;--hc-combobox-listbox-offset: .25rem;--hc-combobox-option-padding-x: .75rem;--hc-combobox-option-padding-y: .5rem;--hc-combobox-option-font-size: .875rem;--hc-combobox-option-fg: #111827;--hc-combobox-option-hover-bg: #f3f4f6;--hc-combobox-option-active-bg: #f3f4f6;--hc-combobox-option-disabled-fg: #4b5563;--hc-combobox-empty-fg: #4b5563;--hc-slider-track-height: .375rem;--hc-slider-track-bg: #d0d5dd;--hc-slider-thumb-size: 1rem;--hc-slider-thumb-bg: #ffffff;--hc-slider-success-fill: #059669;--hc-slider-warning-fill: #d97706;--hc-slider-error-fill: #dc2626;--hc-slider-success-thumb-border: #059669;--hc-slider-warning-thumb-border: #d97706;--hc-slider-error-thumb-border: #dc2626;--hc-slider-disabled-fill: #9ca3af;--hc-slider-radius: 9999px;--hc-slider-sm-track-height: .25rem;--hc-slider-sm-thumb-size: .875rem;--hc-slider-lg-track-height: .5rem;--hc-slider-lg-thumb-size: 1.25rem;--hc-progress-height: .5rem;--hc-progress-radius: 9999px;--hc-progress-bg: #d0d5dd;--hc-progress-success-fill: #059669;--hc-progress-warning-fill: #d97706;--hc-progress-error-fill: #dc2626;--hc-progress-transition-duration: .2s;--hc-progress-indeterminate-duration: 1.4s;--hc-progress-sm-height: .25rem;--hc-progress-lg-height: .75rem;--hc-skeleton-bg: #f3f4f6;--hc-skeleton-highlight: color-mix(in srgb, #f3f4f6, white 35%);--hc-skeleton-radius: 6px;--hc-skeleton-text-radius: 4px;--hc-skeleton-text-height: 1em;--hc-skeleton-pulse-duration: 1.5s;--hc-skeleton-wave-duration: 1.6s;--hc-separator-color: #d0d5dd;--hc-separator-size: 1px;--hc-separator-spacing: 1rem;--hc-avatar-size: 2.5rem;--hc-avatar-radius: 9999px;--hc-avatar-square-radius: 6px;--hc-avatar-bg: #f3f4f6;--hc-avatar-fg: #111827;--hc-avatar-border: #d0d5dd;--hc-avatar-font-size: .875rem;--hc-avatar-font-weight: 500;--hc-avatar-xs-size: 1.5rem;--hc-avatar-xs-font-size: .625rem;--hc-avatar-sm-size: 2rem;--hc-avatar-sm-font-size: .75rem;--hc-avatar-lg-size: 3rem;--hc-avatar-lg-font-size: .9375rem;--hc-avatar-xl-size: 4rem;--hc-avatar-xl-font-size: 1.0625rem;--hc-switch-width: 2.25rem;--hc-switch-height: 1.25rem;--hc-switch-thumb-size: .875rem;--hc-switch-padding: .1875rem;--hc-switch-border-width: 1px;--hc-switch-border: #d0d5dd;--hc-switch-bg: #d0d5dd;--hc-switch-thumb-bg: #ffffff;--hc-switch-success-checked-bg: #059669;--hc-switch-warning-checked-bg: #d97706;--hc-switch-error-checked-bg: #dc2626;--hc-switch-disabled-bg: #f3f4f6;--hc-switch-label-gap: .5rem;--hc-switch-sm-width: 1.75rem;--hc-switch-sm-height: 1rem;--hc-switch-sm-thumb-size: .625rem;--hc-switch-lg-width: 2.75rem;--hc-switch-lg-height: 1.5rem;--hc-switch-lg-thumb-size: 1.125rem;--hc-radio-size: 1.125rem;--hc-radio-border-width: 1px;--hc-radio-border: #d0d5dd;--hc-radio-bg: #ffffff;--hc-radio-success-checked-bg: #059669;--hc-radio-success-checked-border: #059669;--hc-radio-warning-checked-bg: #d97706;--hc-radio-warning-checked-border: #d97706;--hc-radio-error-checked-bg: #dc2626;--hc-radio-error-checked-border: #dc2626;--hc-radio-error-border: #dc2626;--hc-radio-disabled-bg: #f3f4f6;--hc-radio-label-gap: .5rem;--hc-radio-sm-size: .875rem;--hc-radio-lg-size: 1.375rem;--hc-field-gap: .5rem;--hc-field-label-color: #111827;--hc-field-label-weight: 500;--hc-field-label-font-size: .875rem;--hc-field-message-color: #4b5563;--hc-field-message-font-size: .875rem;--hc-field-invalid-message-color: #dc2626;--hc-spinner-size: 1rem;--hc-spinner-sm-size: .875rem;--hc-spinner-lg-size: 1.5rem;--hc-spinner-border-width: 2px;--hc-spinner-track-color: #d0d5dd;--hc-spinner-indicator-color: currentColor;--hc-spinner-duration: .72s;--hc-spinner-reduced-duration: 2.4s;--hc-spinner-success-color: #059669;--hc-spinner-warning-color: #d97706;--hc-spinner-error-color: #dc2626;--hc-dialog-bg: #ffffff;--hc-dialog-fg: #111827;--hc-dialog-border: #d0d5dd;--hc-dialog-radius: 8px;--hc-dialog-padding: 1rem;--hc-dialog-gap: .75rem;--hc-dialog-max-width: 32rem;--hc-dialog-backdrop: rgba(17, 24, 39, .5);--hc-card-bg: #ffffff;--hc-card-fg: #111827;--hc-card-border: #d0d5dd;--hc-card-radius: 8px;--hc-card-padding: 1rem;--hc-card-header-border: #d0d5dd;--hc-table-border: #d0d5dd;--hc-table-fg: #111827;--hc-table-font-size: .9375rem;--hc-table-header-bg: #f3f4f6;--hc-table-header-fg: #111827;--hc-table-header-weight: 600;--hc-table-row-hover-bg: #f3f4f6;--hc-table-cell-padding-x: .75rem;--hc-table-cell-padding-y: .5rem;--hc-table-kv-key-width: 10rem;--hc-table-kv-key-fg: #4b5563;--hc-chip-bg: #ffffff;--hc-chip-fg: #111827;--hc-chip-border: #d0d5dd;--hc-chip-radius: 999px;--hc-chip-padding-x: .75rem;--hc-chip-padding-y: .25rem;--hc-chip-font-size: .875rem;--hc-chip-gap: .5rem;--hc-chart-height: 20rem;--hc-chart-font-size: .875rem;--hc-chart-axis: #4b5563;--hc-chart-grid: #d0d5dd;--hc-chart-label: #111827;--hc-chart-series-1: #3b82f6;--hc-chart-series-2: #f59e0b;--hc-chart-series-3: #10b981;--hc-chart-series-4: #8b5cf6;--hc-chart-series-5: #f43f5e;--hc-chart-series-6: #4f46e5;--hc-code-bg: #ffffff;--hc-code-fg: #111827;--hc-code-border: #d0d5dd;--hc-code-radius: 6px;--hc-code-padding-block: .75rem;--hc-code-padding-inline: 1rem;--hc-code-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--hc-code-font-size: .875rem;--hc-code-line-height: 1.6;--hc-code-gutter-fg: #4b5563;--hc-code-gutter-width: 3.25rem;--hc-code-num-width: 2.25rem;--hc-code-gutter-gap: .75rem;--hc-code-context-fg: #4b5563;--hc-code-added-bg: #ecfdf5;--hc-code-added-marker: #065f46;--hc-code-removed-bg: #fef2f2;--hc-code-removed-marker: #991b1b;--hc-code-input-min-height: 8rem;--hc-sparkline-width: 5rem;--hc-sparkline-height: 1.25rem;--hc-sparkline-stroke-width: 1.5px;--hc-sparkline-area-opacity: .15;--hc-sparkline-success: #059669;--hc-sparkline-warning: #d97706;--hc-sparkline-error: #dc2626;--hc-badge-padding-x: .5rem;--hc-badge-padding-y: .25rem;--hc-badge-radius: 4px;--hc-badge-font-size: .875rem;--hc-badge-font-weight: 500;--hc-badge-default-bg: #f3f4f6;--hc-badge-default-fg: #1f2937;--hc-badge-default-border: #e5e7eb;--hc-badge-info-bg: #eff6ff;--hc-badge-info-fg: #1e40af;--hc-badge-info-border: #dbeafe;--hc-badge-success-bg: #ecfdf5;--hc-badge-success-fg: #065f46;--hc-badge-success-border: #d1fae5;--hc-badge-warning-bg: #fffbeb;--hc-badge-warning-fg: #92400e;--hc-badge-warning-border: #fef3c7;--hc-badge-error-bg: #fef2f2;--hc-badge-error-fg: #991b1b;--hc-badge-error-border: #fee2e2;--hc-navmenu-gap: .25rem;--hc-navmenu-trigger-padding-x: .75rem;--hc-navmenu-trigger-padding-y: .5rem;--hc-navmenu-trigger-radius: 4px;--hc-navmenu-trigger-fg: #111827;--hc-navmenu-trigger-hover-bg: #f3f4f6;--hc-navmenu-panel-bg: #ffffff;--hc-navmenu-panel-fg: #111827;--hc-navmenu-panel-border: #d0d5dd;--hc-navmenu-panel-radius: 6px;--hc-navmenu-panel-padding: .75rem;--hc-navmenu-panel-min-width: 16rem;--hc-navmenu-panel-offset: .25rem;--hc-navmenu-link-padding-x: .5rem;--hc-navmenu-link-padding-y: .5rem;--hc-navmenu-link-radius: 4px;--hc-navmenu-link-fg: #111827;--hc-navmenu-link-hover-bg: #f3f4f6;--hc-menubar-gap: .25rem;--hc-menubar-padding-x: .25rem;--hc-menubar-padding-y: .25rem;--hc-menubar-bg: #ffffff;--hc-menubar-border: #d0d5dd;--hc-menubar-radius: 6px;--hc-menubar-item-padding-x: .75rem;--hc-menubar-item-padding-y: .25rem;--hc-menubar-item-radius: 4px;--hc-menubar-item-fg: #111827;--hc-menubar-item-hover-bg: #f3f4f6;--hc-carousel-gap: .75rem;--hc-carousel-slide-size: 100%;--hc-carousel-control-size: 32px;--hc-carousel-control-bg: #ffffff;--hc-carousel-control-fg: #111827;--hc-carousel-control-border: #d0d5dd;--hc-carousel-control-offset: .5rem;--hc-carousel-dot-size: .5rem;--hc-carousel-dot-gap: .5rem;--hc-carousel-dot-color: #d0d5dd;--hc-carousel-dots-margin: .75rem;--hc-input-group-bg: #ffffff;--hc-input-group-fg: #111827;--hc-input-group-border: #d0d5dd;--hc-input-group-radius: 6px;--hc-input-group-addon-bg: #f3f4f6;--hc-input-group-addon-fg: #4b5563;--hc-input-group-addon-padding-x: .75rem;--hc-input-group-divider: #d0d5dd;--hc-empty-padding: 1.5rem;--hc-empty-media-size: 3rem;--hc-empty-media-fg: #4b5563;--hc-empty-media-margin: 1rem;--hc-empty-title-font-size: 1.0625rem;--hc-empty-title-font-weight: 600;--hc-empty-title-fg: #111827;--hc-empty-description-font-size: .875rem;--hc-empty-description-fg: #4b5563;--hc-empty-description-max-width: 40ch;--hc-empty-description-margin: .25rem;--hc-empty-actions-margin: 1rem;--hc-item-gap: .75rem;--hc-item-padding-x: .75rem;--hc-item-padding-y: .5rem;--hc-item-radius: 4px;--hc-item-fg: #111827;--hc-item-hover-bg: #f3f4f6;--hc-item-selected-fg: #111827;--hc-item-media-size: 1.5rem;--hc-item-media-fg: #4b5563;--hc-item-title-fg: #111827;--hc-item-title-font-weight: 500;--hc-item-description-fg: #4b5563;--hc-item-description-font-size: .875rem;--hc-kbd-bg: #f3f4f6;--hc-kbd-fg: #111827;--hc-kbd-border: #d0d5dd;--hc-kbd-radius: 4px;--hc-kbd-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--hc-kbd-font-size: .875rem;--hc-kbd-font-weight: 500;--hc-kbd-padding-x: .4em;--hc-kbd-padding-y: .15em;--hc-kbd-min-width: 1.6em;--hc-kbd-sm-font-size: .75rem;--hc-kbd-lg-font-size: .9375rem;--hc-popover-bg: #ffffff;--hc-popover-fg: #111827;--hc-popover-border: #d0d5dd;--hc-popover-radius: 6px;--hc-popover-padding: .75rem;--hc-popover-min-width: 12rem;--hc-popover-max-width: 24rem;--hc-toolbar-gap: .5rem;--hc-toolbar-padding-y: .5rem;--hc-toolbar-padding-x: .75rem;--hc-toolbar-bg: #ffffff;--hc-toolbar-border: #d0d5dd;--hc-toolbar-radius: 6px;--hc-toolbar-separator: #d0d5dd;--hc-pagination-gap: .25rem;--hc-pagination-item-size: 32px;--hc-pagination-padding-x: .5rem;--hc-pagination-radius: 6px;--hc-pagination-font-size: .875rem;--hc-pagination-font-weight: 500;--hc-pagination-bg: transparent;--hc-pagination-fg: #111827;--hc-pagination-border: transparent;--hc-pagination-hover-bg: #f3f4f6;--hc-pagination-disabled-fg: #4b5563;--hc-toast-min-width: 16rem;--hc-toast-max-width: 24rem;--hc-toast-padding-y: .75rem;--hc-toast-padding-x: 1rem;--hc-toast-radius: 6px;--hc-toast-gap: .5rem;--hc-toast-region-gap: .5rem;--hc-toast-region-inset: 1rem;--hc-toast-info-bg: #eff6ff;--hc-toast-info-fg: #1e40af;--hc-toast-info-border: #dbeafe;--hc-toast-success-bg: #ecfdf5;--hc-toast-success-fg: #065f46;--hc-toast-success-border: #d1fae5;--hc-toast-warning-bg: #fffbeb;--hc-toast-warning-fg: #92400e;--hc-toast-warning-border: #fef3c7;--hc-toast-error-bg: #fef2f2;--hc-toast-error-fg: #991b1b;--hc-toast-error-border: #fee2e2;--hc-breadcrumb-gap: .5rem;--hc-breadcrumb-font-size: .875rem;--hc-breadcrumb-separator-fg: #4b5563;--hc-breadcrumb-link-fg: #4b5563;--hc-breadcrumb-link-hover-fg: #111827;--hc-breadcrumb-current-fg: #111827;--hc-breadcrumb-current-font-weight: 500;--hc-accordion-item-border-color: #d0d5dd;--hc-accordion-trigger-padding-x: 0;--hc-accordion-trigger-padding-y: .75rem;--hc-accordion-trigger-gap: .5rem;--hc-accordion-trigger-font-weight: 500;--hc-accordion-trigger-fg: #111827;--hc-accordion-trigger-hover-fg: #111827;--hc-accordion-icon-size: 1rem;--hc-accordion-icon-transition-duration: .15s;--hc-accordion-content-padding-block-end: .75rem;--hc-accordion-content-fg: #4b5563;--hc-accordion-content-transition-duration: .2s;--hc-collapsible-trigger-gap: .25rem;--hc-collapsible-trigger-padding-x: 0;--hc-collapsible-trigger-padding-y: .25rem;--hc-collapsible-trigger-font-weight: 500;--hc-collapsible-icon-size: 1rem;--hc-collapsible-icon-transition-duration: .15s;--hc-collapsible-content-padding-block-start: .5rem;--hc-collapsible-content-fg: #111827;--hc-collapsible-content-transition-duration: .2s;--hc-tooltip-bg: #111827;--hc-tooltip-fg: #ffffff;--hc-tooltip-radius: 4px;--hc-tooltip-padding-x: .5rem;--hc-tooltip-padding-y: .25rem;--hc-tooltip-font-size: .875rem;--hc-tooltip-max-width: 20rem;--hc-tooltip-offset: .25rem;--hc-scroll-area-thumb: #d0d5dd;--hc-scroll-area-thumb-hover: #4b5563;--hc-scroll-area-track: transparent;--hc-scroll-area-shadow: color-mix(in srgb, #111827 15%, transparent);--hc-splitter-handle-size: .625rem;--hc-splitter-handle-bg: transparent;--hc-splitter-grip-color: #d0d5dd;--hc-splitter-grip-length: 1.5rem;--hc-splitter-grip-thickness: 3px;--hc-inputotp-gap: .5rem;--hc-inputotp-slot-size: 2.75rem;--hc-inputotp-radius: 6px;--hc-inputotp-border: #d0d5dd;--hc-inputotp-bg: #ffffff;--hc-inputotp-fg: #111827;--hc-inputotp-font-size: 1.0625rem;--hc-inputotp-font-weight: 500;--hc-inputotp-error-border: #dc2626;--hc-inputotp-success-border: #059669;--hc-inputotp-warning-border: #d97706;--hc-inputotp-disabled-bg: #f3f4f6;--hc-inputotp-disabled-fg: #4b5563;--hc-calendar-bg: #ffffff;--hc-calendar-fg: #111827;--hc-calendar-border: #d0d5dd;--hc-calendar-radius: 8px;--hc-calendar-padding: .75rem;--hc-calendar-title-font-size: .9375rem;--hc-calendar-title-font-weight: 500;--hc-calendar-nav-size: 2rem;--hc-calendar-nav-fg: #111827;--hc-calendar-nav-hover-bg: #f3f4f6;--hc-calendar-nav-radius: 6px;--hc-calendar-weekday-fg: #4b5563;--hc-calendar-weekday-font-size: .875rem;--hc-calendar-weekday-font-weight: 500;--hc-calendar-day-size: 2.25rem;--hc-calendar-day-radius: 6px;--hc-calendar-day-font-size: .875rem;--hc-calendar-day-fg: #111827;--hc-calendar-day-hover-bg: #f3f4f6;--hc-calendar-day-outside-fg: #4b5563;--hc-calendar-day-disabled-fg: #4b5563;--hc-command-bg: #ffffff;--hc-command-fg: #111827;--hc-command-border: #d0d5dd;--hc-command-radius: 8px;--hc-command-input-padding-x: 1rem;--hc-command-input-font-size: .9375rem;--hc-command-placeholder-fg: #4b5563;--hc-command-list-padding-block: .25rem;--hc-command-list-max-height: 20rem;--hc-command-heading-fg: #4b5563;--hc-command-heading-font-size: .875rem;--hc-command-heading-font-weight: 500;--hc-command-heading-padding-y: .25rem;--hc-command-item-padding-x: .75rem;--hc-command-item-padding-y: .5rem;--hc-command-item-gap: .5rem;--hc-command-item-font-size: .9375rem;--hc-command-item-fg: #111827;--hc-command-item-hover-bg: #f3f4f6;--hc-command-item-active-fg: #111827;--hc-command-item-disabled-fg: #4b5563;--hc-command-shortcut-fg: #4b5563;--hc-command-shortcut-font-size: .875rem;--hc-command-shortcut-padding-x: .25rem;--hc-command-empty-fg: #4b5563;--hc-command-empty-padding-y: 1rem;--hc-command-dialog-width: 32rem;--hc-command-dialog-offset: 10vh;--hc-command-backdrop: rgb(0, 0, 0, .4);--hc-menu-bg: #ffffff;--hc-menu-fg: #111827;--hc-menu-border: #d0d5dd;--hc-menu-radius: 6px;--hc-menu-padding-block: .25rem;--hc-menu-min-width: 10rem;--hc-menu-max-width: 20rem;--hc-menu-offset: .25rem;--hc-menu-item-padding-x: .75rem;--hc-menu-item-padding-y: .5rem;--hc-menu-item-font-size: .875rem;--hc-menu-item-gap: .5rem;--hc-menu-item-fg: #111827;--hc-menu-item-hover-bg: #f3f4f6;--hc-menu-item-focus-bg: #f3f4f6;--hc-menu-item-disabled-fg: #4b5563;--hc-menu-item-error-fg: #dc2626;--hc-menu-item-indicator-size: 1rem;--hc-menu-label-padding-x: .75rem;--hc-menu-label-padding-y: .25rem;--hc-menu-label-font-size: .875rem;--hc-menu-label-font-weight: 500;--hc-menu-label-fg: #4b5563;--hc-menu-separator-color: #d0d5dd;--hc-menu-separator-margin-y: .25rem;--hc-tabs-list-gap: .25rem;--hc-tabs-list-border: #d0d5dd;--hc-tabs-tab-padding-x: 1rem;--hc-tabs-tab-font-size: .9375rem;--hc-tabs-tab-font-weight: 500;--hc-tabs-tab-radius: 6px;--hc-tabs-tab-fg: #4b5563;--hc-tabs-tab-hover-fg: #111827;--hc-tabs-tab-hover-bg: #f3f4f6;--hc-tabs-tab-active-fg: #111827;--hc-tabs-tab-indicator-size: 2px;--hc-tabs-tab-disabled-fg: #4b5563;--hc-tabs-panel-padding-y: 1rem;--hc-tabs-sm-tab-height: 32px;--hc-tabs-sm-tab-padding-x: .75rem;--hc-tabs-sm-tab-font-size: .875rem;--hc-tabs-lg-tab-height: 48px;--hc-tabs-lg-tab-padding-x: 1.25rem;--hc-tabs-lg-tab-font-size: 1.0625rem;--hc-alert-padding-block: .75rem;--hc-alert-padding-inline: 1rem;--hc-alert-radius: 6px;--hc-alert-gap: .5rem;--hc-alert-border-width: 1px;--hc-alert-title-weight: 600;--hc-alert-info-bg: #eff6ff;--hc-alert-info-fg: #1e40af;--hc-alert-info-border: #dbeafe;--hc-alert-success-bg: #ecfdf5;--hc-alert-success-fg: #065f46;--hc-alert-success-border: #d1fae5;--hc-alert-warning-bg: #fffbeb;--hc-alert-warning-fg: #92400e;--hc-alert-warning-border: #fef3c7;--hc-alert-error-bg: #fef2f2;--hc-alert-error-fg: #991b1b;--hc-alert-error-border: #fee2e2}[data-theme=dark]{--hc-color-bg: #111827;--hc-color-surface: #1f2937;--hc-color-text: #f3f4f6;--hc-color-text-muted: #9ca3af;--hc-color-border: #374151;--hc-color-muted-bg: #374151;--hc-color-error: #f87171;--hc-color-action-secondary-bg: #374151;--hc-color-action-secondary-fg: #f3f4f6;--hc-color-action-secondary-border: #374151;--hc-color-action-secondary-hover-bg: #4b5563;--hc-color-action-secondary-hover-border: #4b5563;--hc-color-status-neutral-bg: #1f2937;--hc-color-status-neutral-fg: #f3f4f6;--hc-color-status-neutral-border: #374151;--hc-color-status-info-bg: #172554;--hc-color-status-info-fg: #bfdbfe;--hc-color-status-info-border: #1e3a8a;--hc-color-status-success-bg: #022c22;--hc-color-status-success-fg: #a7f3d0;--hc-color-status-success-border: #064e3b;--hc-color-status-warning-bg: #451a03;--hc-color-status-warning-fg: #fde68a;--hc-color-status-warning-border: #78350f;--hc-color-status-error-bg: #450a0a;--hc-color-status-error-fg: #fecaca;--hc-color-status-error-border: #7f1d1d;--hc-shadow-sm: 0 1px 2px rgb(0, 0, 0, .55);--hc-shadow-md: 0 4px 12px rgb(0, 0, 0, .45);--hc-shadow-lg: 0 8px 24px rgb(0, 0, 0, .5);--hc-shadow-overlay: 0 10px 30px rgb(0, 0, 0, .6);--hc-shadow-edge: rgb(0, 0, 0, .5);--hc-button-default-bg: #1f2937;--hc-button-default-fg: #f3f4f6;--hc-button-default-border: #374151;--hc-button-default-hover-bg: #374151;--hc-button-secondary-bg: #374151;--hc-button-secondary-fg: #f3f4f6;--hc-button-secondary-border: #374151;--hc-button-secondary-hover-bg: #4b5563;--hc-button-secondary-hover-border: #4b5563;--hc-button-ghost-fg: #f3f4f6;--hc-toggle-fg: #f3f4f6;--hc-toggle-bg: #1f2937;--hc-toggle-border: #374151;--hc-toggle-hover-bg: #374151;--hc-toggle-hover-fg: #f3f4f6;--hc-toggle-on-fg: #f3f4f6;--hc-toggle-disabled-fg: #9ca3af;--hc-toggle-disabled-bg: #374151;--hc-input-bg: #1f2937;--hc-input-fg: #f3f4f6;--hc-input-border: #374151;--hc-input-placeholder: #9ca3af;--hc-input-error-border: #f87171;--hc-input-disabled-bg: #374151;--hc-datagrid-bg: #1f2937;--hc-datagrid-fg: #f3f4f6;--hc-datagrid-border: #374151;--hc-datagrid-head-bg: #374151;--hc-datagrid-head-fg: #f3f4f6;--hc-datagrid-frozen-bg: #1f2937;--hc-datagrid-subrow-border: color-mix(in srgb, #374151 55%, #1f2937);--hc-datepicker-bg: #1f2937;--hc-datepicker-fg: #f3f4f6;--hc-datepicker-border: #374151;--hc-datepicker-error-border: #f87171;--hc-datepicker-disabled-bg: #374151;--hc-select-bg: #1f2937;--hc-select-fg: #f3f4f6;--hc-select-border: #374151;--hc-select-error-border: #f87171;--hc-select-disabled-bg: #374151;--hc-checkbox-border: #374151;--hc-checkbox-bg: #1f2937;--hc-checkbox-error-checked-bg: #f87171;--hc-checkbox-error-checked-border: #f87171;--hc-checkbox-error-border: #f87171;--hc-checkbox-disabled-bg: #374151;--hc-hovercard-bg: #1f2937;--hc-hovercard-fg: #f3f4f6;--hc-hovercard-border: #374151;--hc-hovercard-subtitle-fg: #9ca3af;--hc-drawer-bg: #1f2937;--hc-drawer-fg: #f3f4f6;--hc-drawer-border: #374151;--hc-multicombobox-input-fg: #f3f4f6;--hc-multicombobox-tag-bg: #374151;--hc-multicombobox-tag-fg: #f3f4f6;--hc-multicombobox-tag-border: #374151;--hc-multicombobox-tag-remove-fg: #9ca3af;--hc-multicombobox-tag-remove-hover-fg: #f87171;--hc-multicombobox-listbox-bg: #1f2937;--hc-multicombobox-listbox-fg: #f3f4f6;--hc-multicombobox-listbox-border: #374151;--hc-multicombobox-option-fg: #f3f4f6;--hc-multicombobox-option-hover-bg: #374151;--hc-multicombobox-option-active-bg: #374151;--hc-multicombobox-option-disabled-fg: #9ca3af;--hc-multicombobox-empty-fg: #9ca3af;--hc-combobox-listbox-bg: #1f2937;--hc-combobox-listbox-fg: #f3f4f6;--hc-combobox-listbox-border: #374151;--hc-combobox-option-fg: #f3f4f6;--hc-combobox-option-hover-bg: #374151;--hc-combobox-option-active-bg: #374151;--hc-combobox-option-disabled-fg: #9ca3af;--hc-combobox-empty-fg: #9ca3af;--hc-slider-track-bg: #374151;--hc-slider-error-fill: #f87171;--hc-slider-error-thumb-border: #f87171;--hc-progress-bg: #374151;--hc-progress-error-fill: #f87171;--hc-skeleton-bg: #374151;--hc-skeleton-highlight: color-mix(in srgb, #374151, white 35%);--hc-separator-color: #374151;--hc-avatar-bg: #374151;--hc-avatar-fg: #f3f4f6;--hc-avatar-border: #374151;--hc-switch-border: #374151;--hc-switch-bg: #374151;--hc-switch-error-checked-bg: #f87171;--hc-switch-disabled-bg: #374151;--hc-radio-border: #374151;--hc-radio-bg: #1f2937;--hc-radio-error-checked-bg: #f87171;--hc-radio-error-checked-border: #f87171;--hc-radio-error-border: #f87171;--hc-radio-disabled-bg: #374151;--hc-field-label-color: #f3f4f6;--hc-field-message-color: #9ca3af;--hc-field-invalid-message-color: #f87171;--hc-spinner-track-color: #374151;--hc-spinner-error-color: #f87171;--hc-dialog-bg: #1f2937;--hc-dialog-fg: #f3f4f6;--hc-dialog-border: #374151;--hc-card-bg: #1f2937;--hc-card-fg: #f3f4f6;--hc-card-border: #374151;--hc-card-header-border: #374151;--hc-table-border: #374151;--hc-table-fg: #f3f4f6;--hc-table-header-bg: #374151;--hc-table-header-fg: #f3f4f6;--hc-table-row-hover-bg: #374151;--hc-table-kv-key-fg: #9ca3af;--hc-chip-bg: #1f2937;--hc-chip-fg: #f3f4f6;--hc-chip-border: #374151;--hc-chart-axis: #9ca3af;--hc-chart-grid: #374151;--hc-chart-label: #f3f4f6;--hc-code-bg: #1f2937;--hc-code-fg: #f3f4f6;--hc-code-border: #374151;--hc-code-gutter-fg: #9ca3af;--hc-code-context-fg: #9ca3af;--hc-code-added-bg: #022c22;--hc-code-added-marker: #a7f3d0;--hc-code-removed-bg: #450a0a;--hc-code-removed-marker: #fecaca;--hc-sparkline-error: #f87171;--hc-badge-default-bg: #1f2937;--hc-badge-default-fg: #f3f4f6;--hc-badge-default-border: #374151;--hc-badge-info-bg: #172554;--hc-badge-info-fg: #bfdbfe;--hc-badge-info-border: #1e3a8a;--hc-badge-success-bg: #022c22;--hc-badge-success-fg: #a7f3d0;--hc-badge-success-border: #064e3b;--hc-badge-warning-bg: #451a03;--hc-badge-warning-fg: #fde68a;--hc-badge-warning-border: #78350f;--hc-badge-error-bg: #450a0a;--hc-badge-error-fg: #fecaca;--hc-badge-error-border: #7f1d1d;--hc-navmenu-trigger-fg: #f3f4f6;--hc-navmenu-trigger-hover-bg: #374151;--hc-navmenu-panel-bg: #1f2937;--hc-navmenu-panel-fg: #f3f4f6;--hc-navmenu-panel-border: #374151;--hc-navmenu-link-fg: #f3f4f6;--hc-navmenu-link-hover-bg: #374151;--hc-menubar-bg: #1f2937;--hc-menubar-border: #374151;--hc-menubar-item-fg: #f3f4f6;--hc-menubar-item-hover-bg: #374151;--hc-carousel-control-bg: #1f2937;--hc-carousel-control-fg: #f3f4f6;--hc-carousel-control-border: #374151;--hc-carousel-dot-color: #374151;--hc-input-group-bg: #1f2937;--hc-input-group-fg: #f3f4f6;--hc-input-group-border: #374151;--hc-input-group-addon-bg: #374151;--hc-input-group-addon-fg: #9ca3af;--hc-input-group-divider: #374151;--hc-empty-media-fg: #9ca3af;--hc-empty-title-fg: #f3f4f6;--hc-empty-description-fg: #9ca3af;--hc-item-fg: #f3f4f6;--hc-item-hover-bg: #374151;--hc-item-selected-fg: #f3f4f6;--hc-item-media-fg: #9ca3af;--hc-item-title-fg: #f3f4f6;--hc-item-description-fg: #9ca3af;--hc-kbd-bg: #374151;--hc-kbd-fg: #f3f4f6;--hc-kbd-border: #374151;--hc-popover-bg: #1f2937;--hc-popover-fg: #f3f4f6;--hc-popover-border: #374151;--hc-toolbar-bg: #1f2937;--hc-toolbar-border: #374151;--hc-toolbar-separator: #374151;--hc-pagination-fg: #f3f4f6;--hc-pagination-hover-bg: #374151;--hc-pagination-disabled-fg: #9ca3af;--hc-toast-info-bg: #172554;--hc-toast-info-fg: #bfdbfe;--hc-toast-info-border: #1e3a8a;--hc-toast-success-bg: #022c22;--hc-toast-success-fg: #a7f3d0;--hc-toast-success-border: #064e3b;--hc-toast-warning-bg: #451a03;--hc-toast-warning-fg: #fde68a;--hc-toast-warning-border: #78350f;--hc-toast-error-bg: #450a0a;--hc-toast-error-fg: #fecaca;--hc-toast-error-border: #7f1d1d;--hc-breadcrumb-separator-fg: #9ca3af;--hc-breadcrumb-link-fg: #9ca3af;--hc-breadcrumb-link-hover-fg: #f3f4f6;--hc-breadcrumb-current-fg: #f3f4f6;--hc-accordion-item-border-color: #374151;--hc-accordion-trigger-fg: #f3f4f6;--hc-accordion-trigger-hover-fg: #f3f4f6;--hc-accordion-content-fg: #9ca3af;--hc-collapsible-content-fg: #f3f4f6;--hc-scroll-area-thumb: #374151;--hc-scroll-area-thumb-hover: #9ca3af;--hc-scroll-area-shadow: color-mix(in srgb, #f3f4f6 15%, transparent);--hc-splitter-grip-color: #374151;--hc-inputotp-border: #374151;--hc-inputotp-bg: #1f2937;--hc-inputotp-fg: #f3f4f6;--hc-inputotp-error-border: #f87171;--hc-inputotp-disabled-bg: #374151;--hc-inputotp-disabled-fg: #9ca3af;--hc-calendar-bg: #1f2937;--hc-calendar-fg: #f3f4f6;--hc-calendar-border: #374151;--hc-calendar-nav-fg: #f3f4f6;--hc-calendar-nav-hover-bg: #374151;--hc-calendar-weekday-fg: #9ca3af;--hc-calendar-day-fg: #f3f4f6;--hc-calendar-day-hover-bg: #374151;--hc-calendar-day-outside-fg: #9ca3af;--hc-calendar-day-disabled-fg: #9ca3af;--hc-command-bg: #1f2937;--hc-command-fg: #f3f4f6;--hc-command-border: #374151;--hc-command-placeholder-fg: #9ca3af;--hc-command-heading-fg: #9ca3af;--hc-command-item-fg: #f3f4f6;--hc-command-item-hover-bg: #374151;--hc-command-item-active-fg: #f3f4f6;--hc-command-item-disabled-fg: #9ca3af;--hc-command-shortcut-fg: #9ca3af;--hc-command-empty-fg: #9ca3af;--hc-menu-bg: #1f2937;--hc-menu-fg: #f3f4f6;--hc-menu-border: #374151;--hc-menu-item-fg: #f3f4f6;--hc-menu-item-hover-bg: #374151;--hc-menu-item-focus-bg: #374151;--hc-menu-item-disabled-fg: #9ca3af;--hc-menu-item-error-fg: #f87171;--hc-menu-label-fg: #9ca3af;--hc-menu-separator-color: #374151;--hc-tabs-list-border: #374151;--hc-tabs-tab-fg: #9ca3af;--hc-tabs-tab-hover-fg: #f3f4f6;--hc-tabs-tab-hover-bg: #374151;--hc-tabs-tab-active-fg: #f3f4f6;--hc-tabs-tab-disabled-fg: #9ca3af;--hc-alert-info-bg: #172554;--hc-alert-info-fg: #bfdbfe;--hc-alert-info-border: #1e3a8a;--hc-alert-success-bg: #022c22;--hc-alert-success-fg: #a7f3d0;--hc-alert-success-border: #064e3b;--hc-alert-warning-bg: #451a03;--hc-alert-warning-fg: #fde68a;--hc-alert-warning-border: #78350f;--hc-alert-error-bg: #450a0a;--hc-alert-error-fg: #fecaca;--hc-alert-error-border: #7f1d1d}:root,[data-density=comfortable]{--hc-control-height: 40px;--hc-control-padding-x: 1rem;--hc-field-gap: .5rem;--hc-toolbar-gap: .5rem;--hc-toolbar-padding-y: .5rem;--hc-toolbar-padding-x: .75rem;--hc-card-padding: 1rem;--hc-dialog-padding: 1rem;--hc-dialog-gap: .75rem;--hc-popover-padding: .75rem;--hc-alert-padding-block: .75rem;--hc-alert-padding-inline: 1rem;--hc-alert-gap: .5rem;--hc-toast-padding-y: .75rem;--hc-toast-padding-x: 1rem;--hc-toast-gap: .5rem;--hc-table-cell-padding-y: .5rem;--hc-table-cell-padding-x: .75rem;--hc-checkbox-size: 1.125rem;--hc-checkbox-sm-size: .875rem;--hc-checkbox-lg-size: 1.375rem;--hc-radio-size: 1.125rem;--hc-radio-sm-size: .875rem;--hc-radio-lg-size: 1.375rem;--hc-button-sm-height: 32px;--hc-button-sm-padding-x: .75rem;--hc-button-lg-height: 48px;--hc-button-lg-padding-x: 1.25rem;--hc-input-sm-height: 32px;--hc-input-sm-padding-x: .75rem;--hc-input-lg-height: 48px;--hc-input-lg-padding-x: 1.25rem;--hc-button-height: 40px;--hc-button-padding-x: 1rem;--hc-toggle-height: 40px;--hc-toggle-padding-x: 1rem;--hc-input-height: 40px;--hc-input-padding-x: 1rem;--hc-datepicker-height: 40px;--hc-datepicker-padding-x: 1rem;--hc-select-height: 40px;--hc-select-padding-x: 1rem;--hc-multicombobox-control-min-height: 40px;--hc-command-input-height: 40px;--hc-tabs-tab-height: 40px}:root,[data-color=default]{--hc-color-focus-ring: #3b82f6;--hc-color-action-primary-bg: #2563eb;--hc-color-action-primary-fg: #ffffff;--hc-color-action-primary-border: #2563eb;--hc-color-action-primary-hover-bg: #1d4ed8;--hc-color-action-primary-hover-border: #1d4ed8;--hc-color-action-primary-soft-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-button-primary-bg: #2563eb;--hc-button-primary-fg: #ffffff;--hc-button-primary-border: #2563eb;--hc-button-primary-hover-bg: #1d4ed8;--hc-button-primary-hover-border: #1d4ed8;--hc-button-ghost-hover-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-toggle-on-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-toggle-on-border: #2563eb;--hc-input-focus-border: #3b82f6;--hc-datagrid-row-hover-bg: color-mix(in srgb, #2563eb 8%, transparent);--hc-datagrid-selected-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-datagrid-highlight-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-datagrid-current-bg: #2563eb;--hc-datagrid-current-fg: #ffffff;--hc-datepicker-focus-border: #3b82f6;--hc-select-focus-border: #3b82f6;--hc-checkbox-checked-bg: #2563eb;--hc-checkbox-checked-border: #2563eb;--hc-multicombobox-option-check-color: #2563eb;--hc-combobox-option-selected-bg: #2563eb;--hc-combobox-option-selected-fg: #ffffff;--hc-slider-thumb-border: #2563eb;--hc-slider-fill: #2563eb;--hc-progress-fill: #2563eb;--hc-switch-checked-bg: #2563eb;--hc-switch-checked-border: #2563eb;--hc-radio-checked-bg: #2563eb;--hc-radio-checked-border: #2563eb;--hc-spinner-primary-color: #2563eb;--hc-code-focus-border: #3b82f6;--hc-sparkline-color: #2563eb;--hc-carousel-dot-active-color: #2563eb;--hc-input-group-focus-border: #3b82f6;--hc-item-selected-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-pagination-current-bg: #2563eb;--hc-pagination-current-fg: #ffffff;--hc-pagination-current-border: #2563eb;--hc-collapsible-trigger-fg: #2563eb;--hc-collapsible-trigger-hover-fg: #1d4ed8;--hc-splitter-handle-hover-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-splitter-grip-active-color: #2563eb;--hc-inputotp-active-border: #2563eb;--hc-inputotp-caret-color: #2563eb;--hc-calendar-day-selected-bg: #2563eb;--hc-calendar-day-selected-fg: #ffffff;--hc-calendar-day-today-border: #2563eb;--hc-calendar-day-range-bg: color-mix(in srgb, #2563eb 16%, transparent);--hc-calendar-day-range-preview-bg: color-mix(in srgb, #2563eb 8%, transparent);--hc-command-item-active-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-tabs-tab-indicator: #2563eb;--hc-tabs-pill-active-bg: #2563eb;--hc-tabs-pill-active-fg: #ffffff;--hc-tabs-panel-focus-ring: #3b82f6}}@layer hc.base{*,*:before,*:after{box-sizing:border-box}button,input,select,textarea{font:inherit;color:inherit}body{margin:0;background:var(--hc-color-bg);color:var(--hc-color-text);font-family:var(--hc-font-family-sans);font-size:var(--hc-font-size-md);line-height:1.5}::selection{background-color:var(--hc-color-action-primary-soft-bg)}}
1
+ @layer hc.tokens,hc.base,hc.components,hc.recipes,hc.utilities;@layer hc.tokens{:root,[data-theme=light]{--hc-color-bg: #f9fafb;--hc-color-surface: #ffffff;--hc-color-text: #111827;--hc-color-text-muted: #4b5563;--hc-color-border: #d0d5dd;--hc-color-focus-ring: #3b82f6;--hc-color-error: #dc2626;--hc-color-success: #059669;--hc-color-warning: #d97706;--hc-color-info: #2563eb;--hc-color-overlay: rgba(17, 24, 39, .5);--hc-color-muted-bg: #f3f4f6;--hc-color-action-primary-bg: #2563eb;--hc-color-action-primary-fg: #ffffff;--hc-color-action-primary-border: #2563eb;--hc-color-action-primary-hover-bg: #1d4ed8;--hc-color-action-primary-hover-border: #1d4ed8;--hc-color-action-secondary-bg: #f3f4f6;--hc-color-action-secondary-fg: #111827;--hc-color-action-secondary-border: #f3f4f6;--hc-color-action-secondary-hover-bg: #e5e7eb;--hc-color-action-secondary-hover-border: #e5e7eb;--hc-color-action-primary-soft-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-color-action-error-bg: #dc2626;--hc-color-action-error-fg: #ffffff;--hc-color-action-error-border: #dc2626;--hc-color-action-error-hover-bg: #b91c1c;--hc-color-action-error-hover-border: #b91c1c;--hc-color-status-neutral-bg: #f3f4f6;--hc-color-status-neutral-fg: #1f2937;--hc-color-status-neutral-border: #e5e7eb;--hc-color-status-info-bg: #eff6ff;--hc-color-status-info-fg: #1e40af;--hc-color-status-info-border: #dbeafe;--hc-color-status-success-bg: #ecfdf5;--hc-color-status-success-fg: #065f46;--hc-color-status-success-border: #d1fae5;--hc-color-status-warning-bg: #fffbeb;--hc-color-status-warning-fg: #92400e;--hc-color-status-warning-border: #fef3c7;--hc-color-status-error-bg: #fef2f2;--hc-color-status-error-fg: #991b1b;--hc-color-status-error-border: #fee2e2;--hc-color-syntax-keyword: #6d28d9;--hc-color-syntax-string: #047857;--hc-color-syntax-number: #b45309;--hc-color-syntax-comment: #4b5563;--hc-color-syntax-operator: #475569;--hc-color-syntax-identifier: #111827;--hc-color-syntax-meta: #be123c;--hc-control-height: 40px;--hc-control-padding-x: 1rem;--hc-control-radius: 6px;--hc-space-1: .25rem;--hc-space-2: .5rem;--hc-space-3: .75rem;--hc-space-4: 1rem;--hc-space-5: 1.25rem;--hc-space-6: 1.5rem;--hc-space-8: 2rem;--hc-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--hc-font-family-heading: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--hc-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--hc-font-size-sm: .875rem;--hc-font-size-md: .9375rem;--hc-font-size-lg: 1.0625rem;--hc-font-weight-medium: 500;--hc-font-weight-semibold: 600;--hc-icon-size: 1em;--hc-opacity-disabled: .5;--hc-shadow-sm: 0 1px 2px rgb(0, 0, 0, .15);--hc-shadow-md: 0 4px 12px rgb(0, 0, 0, .1);--hc-shadow-lg: 0 8px 24px rgb(0, 0, 0, .12);--hc-shadow-overlay: 0 10px 30px rgb(0, 0, 0, .15);--hc-shadow-edge: rgb(0, 0, 0, .2)}:root{--hc-button-radius: 6px;--hc-button-font-size: .9375rem;--hc-button-font-weight: 500;--hc-button-default-bg: #ffffff;--hc-button-default-fg: #111827;--hc-button-default-border: #d0d5dd;--hc-button-default-hover-bg: #f3f4f6;--hc-button-secondary-bg: #f3f4f6;--hc-button-secondary-fg: #111827;--hc-button-secondary-border: #f3f4f6;--hc-button-secondary-hover-bg: #e5e7eb;--hc-button-secondary-hover-border: #e5e7eb;--hc-button-error-bg: #dc2626;--hc-button-error-fg: #ffffff;--hc-button-error-border: #dc2626;--hc-button-error-hover-bg: #b91c1c;--hc-button-error-hover-border: #b91c1c;--hc-button-ghost-bg: transparent;--hc-button-ghost-fg: #111827;--hc-button-ghost-border: transparent;--hc-button-sm-height: 32px;--hc-button-sm-padding-x: .75rem;--hc-button-sm-font-size: .875rem;--hc-button-lg-height: 48px;--hc-button-lg-padding-x: 1.25rem;--hc-button-lg-font-size: 1.0625rem;--hc-toggle-radius: 6px;--hc-toggle-font-size: .9375rem;--hc-toggle-font-weight: 500;--hc-toggle-fg: #111827;--hc-toggle-bg: #ffffff;--hc-toggle-border: #d0d5dd;--hc-toggle-hover-bg: #f3f4f6;--hc-toggle-hover-fg: #111827;--hc-toggle-on-fg: #111827;--hc-toggle-disabled-fg: #4b5563;--hc-toggle-disabled-bg: #f3f4f6;--hc-toggle-sm-height: 32px;--hc-toggle-sm-padding-x: .75rem;--hc-toggle-sm-font-size: .875rem;--hc-toggle-lg-height: 48px;--hc-toggle-lg-padding-x: 1.25rem;--hc-toggle-lg-font-size: 1.0625rem;--hc-input-radius: 6px;--hc-input-font-size: .9375rem;--hc-input-bg: #ffffff;--hc-input-fg: #111827;--hc-input-border: #d0d5dd;--hc-input-placeholder: #4b5563;--hc-input-error-border: #dc2626;--hc-input-success-border: #059669;--hc-input-warning-border: #d97706;--hc-input-disabled-bg: #f3f4f6;--hc-input-sm-height: 32px;--hc-input-sm-padding-x: .75rem;--hc-input-sm-font-size: .875rem;--hc-input-lg-height: 48px;--hc-input-lg-padding-x: 1.25rem;--hc-input-lg-font-size: 1.0625rem;--hc-datagrid-bg: #ffffff;--hc-datagrid-fg: #111827;--hc-datagrid-border: #d0d5dd;--hc-datagrid-head-bg: #f3f4f6;--hc-datagrid-head-fg: #111827;--hc-datagrid-frozen-bg: #ffffff;--hc-datagrid-subrow-border: color-mix(in srgb, #d0d5dd 55%, #ffffff);--hc-datagrid-cell-padding-x: .75rem;--hc-datagrid-cell-padding-y: .5rem;--hc-datagrid-head-1-h: 2rem;--hc-datagrid-head-2-h: 1.75rem;--hc-datepicker-radius: 6px;--hc-datepicker-font-size: .9375rem;--hc-datepicker-bg: #ffffff;--hc-datepicker-fg: #111827;--hc-datepicker-border: #d0d5dd;--hc-datepicker-error-border: #dc2626;--hc-datepicker-success-border: #059669;--hc-datepicker-warning-border: #d97706;--hc-datepicker-disabled-bg: #f3f4f6;--hc-datepicker-icon-size: 1rem;--hc-datepicker-sm-height: 32px;--hc-datepicker-sm-padding-x: .75rem;--hc-datepicker-sm-font-size: .875rem;--hc-datepicker-lg-height: 48px;--hc-datepicker-lg-padding-x: 1.25rem;--hc-datepicker-lg-font-size: 1.0625rem;--hc-select-radius: 6px;--hc-select-font-size: .9375rem;--hc-select-bg: #ffffff;--hc-select-fg: #111827;--hc-select-border: #d0d5dd;--hc-select-error-border: #dc2626;--hc-select-success-border: #059669;--hc-select-warning-border: #d97706;--hc-select-disabled-bg: #f3f4f6;--hc-select-chevron-size: 1rem;--hc-select-sm-height: 32px;--hc-select-sm-padding-x: .75rem;--hc-select-sm-font-size: .875rem;--hc-select-lg-height: 48px;--hc-select-lg-padding-x: 1.25rem;--hc-select-lg-font-size: 1.0625rem;--hc-checkbox-size: 1.125rem;--hc-checkbox-border-width: 1px;--hc-checkbox-border: #d0d5dd;--hc-checkbox-radius: 4px;--hc-checkbox-bg: #ffffff;--hc-checkbox-success-checked-bg: #059669;--hc-checkbox-success-checked-border: #059669;--hc-checkbox-warning-checked-bg: #d97706;--hc-checkbox-warning-checked-border: #d97706;--hc-checkbox-error-checked-bg: #dc2626;--hc-checkbox-error-checked-border: #dc2626;--hc-checkbox-error-border: #dc2626;--hc-checkbox-disabled-bg: #f3f4f6;--hc-checkbox-label-gap: .5rem;--hc-checkbox-sm-size: .875rem;--hc-checkbox-lg-size: 1.375rem;--hc-hovercard-bg: #ffffff;--hc-hovercard-fg: #111827;--hc-hovercard-border: #d0d5dd;--hc-hovercard-radius: 6px;--hc-hovercard-max-width: 20rem;--hc-hovercard-padding: .75rem;--hc-hovercard-gap: .5rem;--hc-hovercard-offset: .5rem;--hc-hovercard-title-weight: 600;--hc-hovercard-subtitle-fg: #4b5563;--hc-hovercard-subtitle-size: .875rem;--hc-drawer-bg: #ffffff;--hc-drawer-fg: #111827;--hc-drawer-border: #d0d5dd;--hc-drawer-side-max-width: 24rem;--hc-drawer-vert-max-height: 60vh;--hc-drawer-padding: 1rem;--hc-drawer-gap: .75rem;--hc-drawer-backdrop: rgba(17, 24, 39, .5);--hc-drawer-duration: .2s;--hc-multicombobox-control-padding-x: .5rem;--hc-multicombobox-control-padding-y: .25rem;--hc-multicombobox-control-gap: .25rem;--hc-multicombobox-input-min-width: 6rem;--hc-multicombobox-input-fg: #111827;--hc-multicombobox-tag-bg: #f3f4f6;--hc-multicombobox-tag-fg: #111827;--hc-multicombobox-tag-border: #d0d5dd;--hc-multicombobox-tag-padding-x: .5rem;--hc-multicombobox-tag-padding-y: .25rem;--hc-multicombobox-tag-radius: 4px;--hc-multicombobox-tag-gap: .25rem;--hc-multicombobox-tag-font-size: .875rem;--hc-multicombobox-tag-remove-fg: #4b5563;--hc-multicombobox-tag-remove-hover-fg: #dc2626;--hc-multicombobox-listbox-bg: #ffffff;--hc-multicombobox-listbox-fg: #111827;--hc-multicombobox-listbox-border: #d0d5dd;--hc-multicombobox-listbox-radius: 6px;--hc-multicombobox-listbox-max-height: 20rem;--hc-multicombobox-listbox-padding-block: .25rem;--hc-multicombobox-listbox-min-width: 10rem;--hc-multicombobox-listbox-offset: .25rem;--hc-multicombobox-option-padding-x: .75rem;--hc-multicombobox-option-padding-y: .5rem;--hc-multicombobox-option-font-size: .875rem;--hc-multicombobox-option-fg: #111827;--hc-multicombobox-option-hover-bg: #f3f4f6;--hc-multicombobox-option-active-bg: #f3f4f6;--hc-multicombobox-option-disabled-fg: #4b5563;--hc-multicombobox-option-indicator-size: 1rem;--hc-multicombobox-empty-fg: #4b5563;--hc-combobox-listbox-bg: #ffffff;--hc-combobox-listbox-fg: #111827;--hc-combobox-listbox-border: #d0d5dd;--hc-combobox-listbox-radius: 6px;--hc-combobox-listbox-max-height: 20rem;--hc-combobox-listbox-padding-block: .25rem;--hc-combobox-listbox-min-width: 10rem;--hc-combobox-listbox-offset: .25rem;--hc-combobox-option-padding-x: .75rem;--hc-combobox-option-padding-y: .5rem;--hc-combobox-option-font-size: .875rem;--hc-combobox-option-fg: #111827;--hc-combobox-option-hover-bg: #f3f4f6;--hc-combobox-option-active-bg: #f3f4f6;--hc-combobox-option-disabled-fg: #4b5563;--hc-combobox-empty-fg: #4b5563;--hc-slider-track-height: .375rem;--hc-slider-track-bg: #d0d5dd;--hc-slider-thumb-size: 1rem;--hc-slider-thumb-bg: #ffffff;--hc-slider-success-fill: #059669;--hc-slider-warning-fill: #d97706;--hc-slider-error-fill: #dc2626;--hc-slider-success-thumb-border: #059669;--hc-slider-warning-thumb-border: #d97706;--hc-slider-error-thumb-border: #dc2626;--hc-slider-disabled-fill: #9ca3af;--hc-slider-radius: 9999px;--hc-slider-sm-track-height: .25rem;--hc-slider-sm-thumb-size: .875rem;--hc-slider-lg-track-height: .5rem;--hc-slider-lg-thumb-size: 1.25rem;--hc-progress-height: .5rem;--hc-progress-radius: 9999px;--hc-progress-bg: #d0d5dd;--hc-progress-success-fill: #059669;--hc-progress-warning-fill: #d97706;--hc-progress-error-fill: #dc2626;--hc-progress-transition-duration: .2s;--hc-progress-indeterminate-duration: 1.4s;--hc-progress-sm-height: .25rem;--hc-progress-lg-height: .75rem;--hc-skeleton-bg: #f3f4f6;--hc-skeleton-highlight: color-mix(in srgb, #f3f4f6, white 35%);--hc-skeleton-radius: 6px;--hc-skeleton-text-radius: 4px;--hc-skeleton-text-height: 1em;--hc-skeleton-pulse-duration: 1.5s;--hc-skeleton-wave-duration: 1.6s;--hc-separator-color: #d0d5dd;--hc-separator-size: 1px;--hc-separator-spacing: 1rem;--hc-avatar-size: 2.5rem;--hc-avatar-radius: 9999px;--hc-avatar-square-radius: 6px;--hc-avatar-bg: #f3f4f6;--hc-avatar-fg: #111827;--hc-avatar-border: #d0d5dd;--hc-avatar-font-size: .875rem;--hc-avatar-font-weight: 500;--hc-avatar-xs-size: 1.5rem;--hc-avatar-xs-font-size: .625rem;--hc-avatar-sm-size: 2rem;--hc-avatar-sm-font-size: .75rem;--hc-avatar-lg-size: 3rem;--hc-avatar-lg-font-size: .9375rem;--hc-avatar-xl-size: 4rem;--hc-avatar-xl-font-size: 1.0625rem;--hc-switch-width: 2.25rem;--hc-switch-height: 1.25rem;--hc-switch-thumb-size: .875rem;--hc-switch-padding: .1875rem;--hc-switch-border-width: 1px;--hc-switch-border: #d0d5dd;--hc-switch-bg: #d0d5dd;--hc-switch-thumb-bg: #ffffff;--hc-switch-success-checked-bg: #059669;--hc-switch-warning-checked-bg: #d97706;--hc-switch-error-checked-bg: #dc2626;--hc-switch-disabled-bg: #f3f4f6;--hc-switch-label-gap: .5rem;--hc-switch-sm-width: 1.75rem;--hc-switch-sm-height: 1rem;--hc-switch-sm-thumb-size: .625rem;--hc-switch-lg-width: 2.75rem;--hc-switch-lg-height: 1.5rem;--hc-switch-lg-thumb-size: 1.125rem;--hc-radio-size: 1.125rem;--hc-radio-border-width: 1px;--hc-radio-border: #d0d5dd;--hc-radio-bg: #ffffff;--hc-radio-success-checked-bg: #059669;--hc-radio-success-checked-border: #059669;--hc-radio-warning-checked-bg: #d97706;--hc-radio-warning-checked-border: #d97706;--hc-radio-error-checked-bg: #dc2626;--hc-radio-error-checked-border: #dc2626;--hc-radio-error-border: #dc2626;--hc-radio-disabled-bg: #f3f4f6;--hc-radio-label-gap: .5rem;--hc-radio-sm-size: .875rem;--hc-radio-lg-size: 1.375rem;--hc-field-gap: .5rem;--hc-field-label-color: #111827;--hc-field-label-weight: 500;--hc-field-label-font-size: .875rem;--hc-field-message-color: #4b5563;--hc-field-message-font-size: .875rem;--hc-field-invalid-message-color: #dc2626;--hc-spinner-size: 1rem;--hc-spinner-sm-size: .875rem;--hc-spinner-lg-size: 1.5rem;--hc-spinner-border-width: 2px;--hc-spinner-track-color: #d0d5dd;--hc-spinner-indicator-color: currentColor;--hc-spinner-duration: .72s;--hc-spinner-reduced-duration: 2.4s;--hc-spinner-success-color: #059669;--hc-spinner-warning-color: #d97706;--hc-spinner-error-color: #dc2626;--hc-dialog-bg: #ffffff;--hc-dialog-fg: #111827;--hc-dialog-border: #d0d5dd;--hc-dialog-radius: 8px;--hc-dialog-padding: 1rem;--hc-dialog-gap: .75rem;--hc-dialog-max-width: 32rem;--hc-dialog-backdrop: rgba(17, 24, 39, .5);--hc-card-bg: #ffffff;--hc-card-fg: #111827;--hc-card-border: #d0d5dd;--hc-card-radius: 8px;--hc-card-padding: 1rem;--hc-card-header-border: #d0d5dd;--hc-table-border: #d0d5dd;--hc-table-fg: #111827;--hc-table-font-size: .9375rem;--hc-table-header-bg: #f3f4f6;--hc-table-header-fg: #111827;--hc-table-header-weight: 600;--hc-table-row-hover-bg: #f3f4f6;--hc-table-cell-padding-x: .75rem;--hc-table-cell-padding-y: .5rem;--hc-table-kv-key-width: 10rem;--hc-table-kv-key-fg: #4b5563;--hc-chip-bg: #ffffff;--hc-chip-fg: #111827;--hc-chip-border: #d0d5dd;--hc-chip-radius: 999px;--hc-chip-padding-x: .75rem;--hc-chip-padding-y: .25rem;--hc-chip-font-size: .875rem;--hc-chip-gap: .5rem;--hc-chart-height: 20rem;--hc-chart-font-size: .875rem;--hc-chart-axis: #4b5563;--hc-chart-grid: #d0d5dd;--hc-chart-label: #111827;--hc-chart-series-1: #3b82f6;--hc-chart-series-2: #f59e0b;--hc-chart-series-3: #10b981;--hc-chart-series-4: #8b5cf6;--hc-chart-series-5: #f43f5e;--hc-chart-series-6: #4f46e5;--hc-code-bg: #ffffff;--hc-code-fg: #111827;--hc-code-border: #d0d5dd;--hc-code-radius: 6px;--hc-code-padding-block: .75rem;--hc-code-padding-inline: 1rem;--hc-code-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--hc-code-font-size: .875rem;--hc-code-line-height: 1.6;--hc-code-gutter-fg: #4b5563;--hc-code-gutter-width: 3.25rem;--hc-code-num-width: 2.25rem;--hc-code-gutter-gap: .75rem;--hc-code-context-fg: #4b5563;--hc-code-added-bg: #ecfdf5;--hc-code-added-marker: #065f46;--hc-code-removed-bg: #fef2f2;--hc-code-removed-marker: #991b1b;--hc-code-input-min-height: 8rem;--hc-code-tok-keyword: #6d28d9;--hc-code-tok-string: #047857;--hc-code-tok-number: #b45309;--hc-code-tok-comment: #4b5563;--hc-code-tok-operator: #475569;--hc-code-tok-identifier: #111827;--hc-code-tok-meta: #be123c;--hc-sparkline-width: 5rem;--hc-sparkline-height: 1.25rem;--hc-sparkline-stroke-width: 1.5px;--hc-sparkline-area-opacity: .15;--hc-sparkline-success: #059669;--hc-sparkline-warning: #d97706;--hc-sparkline-error: #dc2626;--hc-badge-padding-x: .5rem;--hc-badge-padding-y: .25rem;--hc-badge-radius: 4px;--hc-badge-font-size: .875rem;--hc-badge-font-weight: 500;--hc-badge-default-bg: #f3f4f6;--hc-badge-default-fg: #1f2937;--hc-badge-default-border: #e5e7eb;--hc-badge-info-bg: #eff6ff;--hc-badge-info-fg: #1e40af;--hc-badge-info-border: #dbeafe;--hc-badge-success-bg: #ecfdf5;--hc-badge-success-fg: #065f46;--hc-badge-success-border: #d1fae5;--hc-badge-warning-bg: #fffbeb;--hc-badge-warning-fg: #92400e;--hc-badge-warning-border: #fef3c7;--hc-badge-error-bg: #fef2f2;--hc-badge-error-fg: #991b1b;--hc-badge-error-border: #fee2e2;--hc-navmenu-gap: .25rem;--hc-navmenu-trigger-padding-x: .75rem;--hc-navmenu-trigger-padding-y: .5rem;--hc-navmenu-trigger-radius: 4px;--hc-navmenu-trigger-fg: #111827;--hc-navmenu-trigger-hover-bg: #f3f4f6;--hc-navmenu-panel-bg: #ffffff;--hc-navmenu-panel-fg: #111827;--hc-navmenu-panel-border: #d0d5dd;--hc-navmenu-panel-radius: 6px;--hc-navmenu-panel-padding: .75rem;--hc-navmenu-panel-min-width: 16rem;--hc-navmenu-panel-offset: .25rem;--hc-navmenu-link-padding-x: .5rem;--hc-navmenu-link-padding-y: .5rem;--hc-navmenu-link-radius: 4px;--hc-navmenu-link-fg: #111827;--hc-navmenu-link-hover-bg: #f3f4f6;--hc-menubar-gap: .25rem;--hc-menubar-padding-x: .25rem;--hc-menubar-padding-y: .25rem;--hc-menubar-bg: #ffffff;--hc-menubar-border: #d0d5dd;--hc-menubar-radius: 6px;--hc-menubar-item-padding-x: .75rem;--hc-menubar-item-padding-y: .25rem;--hc-menubar-item-radius: 4px;--hc-menubar-item-fg: #111827;--hc-menubar-item-hover-bg: #f3f4f6;--hc-carousel-gap: .75rem;--hc-carousel-slide-size: 100%;--hc-carousel-control-size: 32px;--hc-carousel-control-bg: #ffffff;--hc-carousel-control-fg: #111827;--hc-carousel-control-border: #d0d5dd;--hc-carousel-control-offset: .5rem;--hc-carousel-dot-size: .5rem;--hc-carousel-dot-gap: .5rem;--hc-carousel-dot-color: #d0d5dd;--hc-carousel-dots-margin: .75rem;--hc-input-group-bg: #ffffff;--hc-input-group-fg: #111827;--hc-input-group-border: #d0d5dd;--hc-input-group-radius: 6px;--hc-input-group-addon-bg: #f3f4f6;--hc-input-group-addon-fg: #4b5563;--hc-input-group-addon-padding-x: .75rem;--hc-input-group-divider: #d0d5dd;--hc-empty-padding: 1.5rem;--hc-empty-media-size: 3rem;--hc-empty-media-fg: #4b5563;--hc-empty-media-margin: 1rem;--hc-empty-title-font-size: 1.0625rem;--hc-empty-title-font-weight: 600;--hc-empty-title-fg: #111827;--hc-empty-description-font-size: .875rem;--hc-empty-description-fg: #4b5563;--hc-empty-description-max-width: 40ch;--hc-empty-description-margin: .25rem;--hc-empty-actions-margin: 1rem;--hc-item-gap: .75rem;--hc-item-padding-x: .75rem;--hc-item-padding-y: .5rem;--hc-item-radius: 4px;--hc-item-fg: #111827;--hc-item-hover-bg: #f3f4f6;--hc-item-selected-fg: #111827;--hc-item-media-size: 1.5rem;--hc-item-media-fg: #4b5563;--hc-item-title-fg: #111827;--hc-item-title-font-weight: 500;--hc-item-description-fg: #4b5563;--hc-item-description-font-size: .875rem;--hc-kbd-bg: #f3f4f6;--hc-kbd-fg: #111827;--hc-kbd-border: #d0d5dd;--hc-kbd-radius: 4px;--hc-kbd-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--hc-kbd-font-size: .875rem;--hc-kbd-font-weight: 500;--hc-kbd-padding-x: .4em;--hc-kbd-padding-y: .15em;--hc-kbd-min-width: 1.6em;--hc-kbd-sm-font-size: .75rem;--hc-kbd-lg-font-size: .9375rem;--hc-popover-bg: #ffffff;--hc-popover-fg: #111827;--hc-popover-border: #d0d5dd;--hc-popover-radius: 6px;--hc-popover-padding: .75rem;--hc-popover-min-width: 12rem;--hc-popover-max-width: 24rem;--hc-toolbar-gap: .5rem;--hc-toolbar-padding-y: .5rem;--hc-toolbar-padding-x: .75rem;--hc-toolbar-bg: #ffffff;--hc-toolbar-border: #d0d5dd;--hc-toolbar-radius: 6px;--hc-toolbar-separator: #d0d5dd;--hc-pagination-gap: .25rem;--hc-pagination-item-size: 32px;--hc-pagination-padding-x: .5rem;--hc-pagination-radius: 6px;--hc-pagination-font-size: .875rem;--hc-pagination-font-weight: 500;--hc-pagination-bg: transparent;--hc-pagination-fg: #111827;--hc-pagination-border: transparent;--hc-pagination-hover-bg: #f3f4f6;--hc-pagination-disabled-fg: #4b5563;--hc-toast-min-width: 16rem;--hc-toast-max-width: 24rem;--hc-toast-padding-y: .75rem;--hc-toast-padding-x: 1rem;--hc-toast-radius: 6px;--hc-toast-gap: .5rem;--hc-toast-region-gap: .5rem;--hc-toast-region-inset: 1rem;--hc-toast-info-bg: #eff6ff;--hc-toast-info-fg: #1e40af;--hc-toast-info-border: #dbeafe;--hc-toast-success-bg: #ecfdf5;--hc-toast-success-fg: #065f46;--hc-toast-success-border: #d1fae5;--hc-toast-warning-bg: #fffbeb;--hc-toast-warning-fg: #92400e;--hc-toast-warning-border: #fef3c7;--hc-toast-error-bg: #fef2f2;--hc-toast-error-fg: #991b1b;--hc-toast-error-border: #fee2e2;--hc-breadcrumb-gap: .5rem;--hc-breadcrumb-font-size: .875rem;--hc-breadcrumb-separator-fg: #4b5563;--hc-breadcrumb-link-fg: #4b5563;--hc-breadcrumb-link-hover-fg: #111827;--hc-breadcrumb-current-fg: #111827;--hc-breadcrumb-current-font-weight: 500;--hc-accordion-item-border-color: #d0d5dd;--hc-accordion-trigger-padding-x: 0;--hc-accordion-trigger-padding-y: .75rem;--hc-accordion-trigger-gap: .5rem;--hc-accordion-trigger-font-weight: 500;--hc-accordion-trigger-fg: #111827;--hc-accordion-trigger-hover-fg: #111827;--hc-accordion-icon-size: 1rem;--hc-accordion-icon-transition-duration: .15s;--hc-accordion-content-padding-block-end: .75rem;--hc-accordion-content-fg: #4b5563;--hc-accordion-content-transition-duration: .2s;--hc-collapsible-trigger-gap: .25rem;--hc-collapsible-trigger-padding-x: 0;--hc-collapsible-trigger-padding-y: .25rem;--hc-collapsible-trigger-font-weight: 500;--hc-collapsible-icon-size: 1rem;--hc-collapsible-icon-transition-duration: .15s;--hc-collapsible-content-padding-block-start: .5rem;--hc-collapsible-content-fg: #111827;--hc-collapsible-content-transition-duration: .2s;--hc-tooltip-bg: #111827;--hc-tooltip-fg: #ffffff;--hc-tooltip-radius: 4px;--hc-tooltip-padding-x: .5rem;--hc-tooltip-padding-y: .25rem;--hc-tooltip-font-size: .875rem;--hc-tooltip-max-width: 20rem;--hc-tooltip-offset: .25rem;--hc-scroll-area-thumb: #d0d5dd;--hc-scroll-area-thumb-hover: #4b5563;--hc-scroll-area-track: transparent;--hc-scroll-area-shadow: color-mix(in srgb, #111827 15%, transparent);--hc-splitter-handle-size: .625rem;--hc-splitter-handle-bg: transparent;--hc-splitter-grip-color: #d0d5dd;--hc-splitter-grip-length: 1.5rem;--hc-splitter-grip-thickness: 3px;--hc-inputotp-gap: .5rem;--hc-inputotp-slot-size: 2.75rem;--hc-inputotp-radius: 6px;--hc-inputotp-border: #d0d5dd;--hc-inputotp-bg: #ffffff;--hc-inputotp-fg: #111827;--hc-inputotp-font-size: 1.0625rem;--hc-inputotp-font-weight: 500;--hc-inputotp-error-border: #dc2626;--hc-inputotp-success-border: #059669;--hc-inputotp-warning-border: #d97706;--hc-inputotp-disabled-bg: #f3f4f6;--hc-inputotp-disabled-fg: #4b5563;--hc-calendar-bg: #ffffff;--hc-calendar-fg: #111827;--hc-calendar-border: #d0d5dd;--hc-calendar-radius: 8px;--hc-calendar-padding: .75rem;--hc-calendar-title-font-size: .9375rem;--hc-calendar-title-font-weight: 500;--hc-calendar-nav-size: 2rem;--hc-calendar-nav-fg: #111827;--hc-calendar-nav-hover-bg: #f3f4f6;--hc-calendar-nav-radius: 6px;--hc-calendar-weekday-fg: #4b5563;--hc-calendar-weekday-font-size: .875rem;--hc-calendar-weekday-font-weight: 500;--hc-calendar-day-size: 2.25rem;--hc-calendar-day-radius: 6px;--hc-calendar-day-font-size: .875rem;--hc-calendar-day-fg: #111827;--hc-calendar-day-hover-bg: #f3f4f6;--hc-calendar-day-outside-fg: #4b5563;--hc-calendar-day-disabled-fg: #4b5563;--hc-command-bg: #ffffff;--hc-command-fg: #111827;--hc-command-border: #d0d5dd;--hc-command-radius: 8px;--hc-command-input-padding-x: 1rem;--hc-command-input-font-size: .9375rem;--hc-command-placeholder-fg: #4b5563;--hc-command-list-padding-block: .25rem;--hc-command-list-max-height: 20rem;--hc-command-heading-fg: #4b5563;--hc-command-heading-font-size: .875rem;--hc-command-heading-font-weight: 500;--hc-command-heading-padding-y: .25rem;--hc-command-item-padding-x: .75rem;--hc-command-item-padding-y: .5rem;--hc-command-item-gap: .5rem;--hc-command-item-font-size: .9375rem;--hc-command-item-fg: #111827;--hc-command-item-hover-bg: #f3f4f6;--hc-command-item-active-fg: #111827;--hc-command-item-disabled-fg: #4b5563;--hc-command-shortcut-fg: #4b5563;--hc-command-shortcut-font-size: .875rem;--hc-command-shortcut-padding-x: .25rem;--hc-command-empty-fg: #4b5563;--hc-command-empty-padding-y: 1rem;--hc-command-dialog-width: 32rem;--hc-command-dialog-offset: 10vh;--hc-command-backdrop: rgb(0, 0, 0, .4);--hc-menu-bg: #ffffff;--hc-menu-fg: #111827;--hc-menu-border: #d0d5dd;--hc-menu-radius: 6px;--hc-menu-padding-block: .25rem;--hc-menu-min-width: 10rem;--hc-menu-max-width: 20rem;--hc-menu-offset: .25rem;--hc-menu-item-padding-x: .75rem;--hc-menu-item-padding-y: .5rem;--hc-menu-item-font-size: .875rem;--hc-menu-item-gap: .5rem;--hc-menu-item-fg: #111827;--hc-menu-item-hover-bg: #f3f4f6;--hc-menu-item-focus-bg: #f3f4f6;--hc-menu-item-disabled-fg: #4b5563;--hc-menu-item-error-fg: #dc2626;--hc-menu-item-indicator-size: 1rem;--hc-menu-label-padding-x: .75rem;--hc-menu-label-padding-y: .25rem;--hc-menu-label-font-size: .875rem;--hc-menu-label-font-weight: 500;--hc-menu-label-fg: #4b5563;--hc-menu-separator-color: #d0d5dd;--hc-menu-separator-margin-y: .25rem;--hc-tabs-list-gap: .25rem;--hc-tabs-list-border: #d0d5dd;--hc-tabs-tab-padding-x: 1rem;--hc-tabs-tab-font-size: .9375rem;--hc-tabs-tab-font-weight: 500;--hc-tabs-tab-radius: 6px;--hc-tabs-tab-fg: #4b5563;--hc-tabs-tab-hover-fg: #111827;--hc-tabs-tab-hover-bg: #f3f4f6;--hc-tabs-tab-active-fg: #111827;--hc-tabs-tab-indicator-size: 2px;--hc-tabs-tab-disabled-fg: #4b5563;--hc-tabs-panel-padding-y: 1rem;--hc-tabs-sm-tab-height: 32px;--hc-tabs-sm-tab-padding-x: .75rem;--hc-tabs-sm-tab-font-size: .875rem;--hc-tabs-lg-tab-height: 48px;--hc-tabs-lg-tab-padding-x: 1.25rem;--hc-tabs-lg-tab-font-size: 1.0625rem;--hc-alert-padding-block: .75rem;--hc-alert-padding-inline: 1rem;--hc-alert-radius: 6px;--hc-alert-gap: .5rem;--hc-alert-border-width: 1px;--hc-alert-title-weight: 600;--hc-alert-info-bg: #eff6ff;--hc-alert-info-fg: #1e40af;--hc-alert-info-border: #dbeafe;--hc-alert-success-bg: #ecfdf5;--hc-alert-success-fg: #065f46;--hc-alert-success-border: #d1fae5;--hc-alert-warning-bg: #fffbeb;--hc-alert-warning-fg: #92400e;--hc-alert-warning-border: #fef3c7;--hc-alert-error-bg: #fef2f2;--hc-alert-error-fg: #991b1b;--hc-alert-error-border: #fee2e2}[data-theme=dark]{--hc-color-bg: #111827;--hc-color-surface: #1f2937;--hc-color-text: #f3f4f6;--hc-color-text-muted: #9ca3af;--hc-color-border: #374151;--hc-color-muted-bg: #374151;--hc-color-error: #f87171;--hc-color-action-secondary-bg: #374151;--hc-color-action-secondary-fg: #f3f4f6;--hc-color-action-secondary-border: #374151;--hc-color-action-secondary-hover-bg: #4b5563;--hc-color-action-secondary-hover-border: #4b5563;--hc-color-status-neutral-bg: #1f2937;--hc-color-status-neutral-fg: #f3f4f6;--hc-color-status-neutral-border: #374151;--hc-color-status-info-bg: #172554;--hc-color-status-info-fg: #bfdbfe;--hc-color-status-info-border: #1e3a8a;--hc-color-status-success-bg: #022c22;--hc-color-status-success-fg: #a7f3d0;--hc-color-status-success-border: #064e3b;--hc-color-status-warning-bg: #451a03;--hc-color-status-warning-fg: #fde68a;--hc-color-status-warning-border: #78350f;--hc-color-status-error-bg: #450a0a;--hc-color-status-error-fg: #fecaca;--hc-color-status-error-border: #7f1d1d;--hc-color-syntax-keyword: #c4b5fd;--hc-color-syntax-string: #6ee7b7;--hc-color-syntax-number: #fcd34d;--hc-color-syntax-comment: #9ca3af;--hc-color-syntax-operator: #cbd5e1;--hc-color-syntax-identifier: #f3f4f6;--hc-color-syntax-meta: #fda4af;--hc-shadow-sm: 0 1px 2px rgb(0, 0, 0, .55);--hc-shadow-md: 0 4px 12px rgb(0, 0, 0, .45);--hc-shadow-lg: 0 8px 24px rgb(0, 0, 0, .5);--hc-shadow-overlay: 0 10px 30px rgb(0, 0, 0, .6);--hc-shadow-edge: rgb(0, 0, 0, .5);--hc-button-default-bg: #1f2937;--hc-button-default-fg: #f3f4f6;--hc-button-default-border: #374151;--hc-button-default-hover-bg: #374151;--hc-button-secondary-bg: #374151;--hc-button-secondary-fg: #f3f4f6;--hc-button-secondary-border: #374151;--hc-button-secondary-hover-bg: #4b5563;--hc-button-secondary-hover-border: #4b5563;--hc-button-ghost-fg: #f3f4f6;--hc-toggle-fg: #f3f4f6;--hc-toggle-bg: #1f2937;--hc-toggle-border: #374151;--hc-toggle-hover-bg: #374151;--hc-toggle-hover-fg: #f3f4f6;--hc-toggle-on-fg: #f3f4f6;--hc-toggle-disabled-fg: #9ca3af;--hc-toggle-disabled-bg: #374151;--hc-input-bg: #1f2937;--hc-input-fg: #f3f4f6;--hc-input-border: #374151;--hc-input-placeholder: #9ca3af;--hc-input-error-border: #f87171;--hc-input-disabled-bg: #374151;--hc-datagrid-bg: #1f2937;--hc-datagrid-fg: #f3f4f6;--hc-datagrid-border: #374151;--hc-datagrid-head-bg: #374151;--hc-datagrid-head-fg: #f3f4f6;--hc-datagrid-frozen-bg: #1f2937;--hc-datagrid-subrow-border: color-mix(in srgb, #374151 55%, #1f2937);--hc-datepicker-bg: #1f2937;--hc-datepicker-fg: #f3f4f6;--hc-datepicker-border: #374151;--hc-datepicker-error-border: #f87171;--hc-datepicker-disabled-bg: #374151;--hc-select-bg: #1f2937;--hc-select-fg: #f3f4f6;--hc-select-border: #374151;--hc-select-error-border: #f87171;--hc-select-disabled-bg: #374151;--hc-checkbox-border: #374151;--hc-checkbox-bg: #1f2937;--hc-checkbox-error-checked-bg: #f87171;--hc-checkbox-error-checked-border: #f87171;--hc-checkbox-error-border: #f87171;--hc-checkbox-disabled-bg: #374151;--hc-hovercard-bg: #1f2937;--hc-hovercard-fg: #f3f4f6;--hc-hovercard-border: #374151;--hc-hovercard-subtitle-fg: #9ca3af;--hc-drawer-bg: #1f2937;--hc-drawer-fg: #f3f4f6;--hc-drawer-border: #374151;--hc-multicombobox-input-fg: #f3f4f6;--hc-multicombobox-tag-bg: #374151;--hc-multicombobox-tag-fg: #f3f4f6;--hc-multicombobox-tag-border: #374151;--hc-multicombobox-tag-remove-fg: #9ca3af;--hc-multicombobox-tag-remove-hover-fg: #f87171;--hc-multicombobox-listbox-bg: #1f2937;--hc-multicombobox-listbox-fg: #f3f4f6;--hc-multicombobox-listbox-border: #374151;--hc-multicombobox-option-fg: #f3f4f6;--hc-multicombobox-option-hover-bg: #374151;--hc-multicombobox-option-active-bg: #374151;--hc-multicombobox-option-disabled-fg: #9ca3af;--hc-multicombobox-empty-fg: #9ca3af;--hc-combobox-listbox-bg: #1f2937;--hc-combobox-listbox-fg: #f3f4f6;--hc-combobox-listbox-border: #374151;--hc-combobox-option-fg: #f3f4f6;--hc-combobox-option-hover-bg: #374151;--hc-combobox-option-active-bg: #374151;--hc-combobox-option-disabled-fg: #9ca3af;--hc-combobox-empty-fg: #9ca3af;--hc-slider-track-bg: #374151;--hc-slider-error-fill: #f87171;--hc-slider-error-thumb-border: #f87171;--hc-progress-bg: #374151;--hc-progress-error-fill: #f87171;--hc-skeleton-bg: #374151;--hc-skeleton-highlight: color-mix(in srgb, #374151, white 35%);--hc-separator-color: #374151;--hc-avatar-bg: #374151;--hc-avatar-fg: #f3f4f6;--hc-avatar-border: #374151;--hc-switch-border: #374151;--hc-switch-bg: #374151;--hc-switch-error-checked-bg: #f87171;--hc-switch-disabled-bg: #374151;--hc-radio-border: #374151;--hc-radio-bg: #1f2937;--hc-radio-error-checked-bg: #f87171;--hc-radio-error-checked-border: #f87171;--hc-radio-error-border: #f87171;--hc-radio-disabled-bg: #374151;--hc-field-label-color: #f3f4f6;--hc-field-message-color: #9ca3af;--hc-field-invalid-message-color: #f87171;--hc-spinner-track-color: #374151;--hc-spinner-error-color: #f87171;--hc-dialog-bg: #1f2937;--hc-dialog-fg: #f3f4f6;--hc-dialog-border: #374151;--hc-card-bg: #1f2937;--hc-card-fg: #f3f4f6;--hc-card-border: #374151;--hc-card-header-border: #374151;--hc-table-border: #374151;--hc-table-fg: #f3f4f6;--hc-table-header-bg: #374151;--hc-table-header-fg: #f3f4f6;--hc-table-row-hover-bg: #374151;--hc-table-kv-key-fg: #9ca3af;--hc-chip-bg: #1f2937;--hc-chip-fg: #f3f4f6;--hc-chip-border: #374151;--hc-chart-axis: #9ca3af;--hc-chart-grid: #374151;--hc-chart-label: #f3f4f6;--hc-code-bg: #1f2937;--hc-code-fg: #f3f4f6;--hc-code-border: #374151;--hc-code-gutter-fg: #9ca3af;--hc-code-context-fg: #9ca3af;--hc-code-added-bg: #022c22;--hc-code-added-marker: #a7f3d0;--hc-code-removed-bg: #450a0a;--hc-code-removed-marker: #fecaca;--hc-code-tok-keyword: #c4b5fd;--hc-code-tok-string: #6ee7b7;--hc-code-tok-number: #fcd34d;--hc-code-tok-comment: #9ca3af;--hc-code-tok-operator: #cbd5e1;--hc-code-tok-identifier: #f3f4f6;--hc-code-tok-meta: #fda4af;--hc-sparkline-error: #f87171;--hc-badge-default-bg: #1f2937;--hc-badge-default-fg: #f3f4f6;--hc-badge-default-border: #374151;--hc-badge-info-bg: #172554;--hc-badge-info-fg: #bfdbfe;--hc-badge-info-border: #1e3a8a;--hc-badge-success-bg: #022c22;--hc-badge-success-fg: #a7f3d0;--hc-badge-success-border: #064e3b;--hc-badge-warning-bg: #451a03;--hc-badge-warning-fg: #fde68a;--hc-badge-warning-border: #78350f;--hc-badge-error-bg: #450a0a;--hc-badge-error-fg: #fecaca;--hc-badge-error-border: #7f1d1d;--hc-navmenu-trigger-fg: #f3f4f6;--hc-navmenu-trigger-hover-bg: #374151;--hc-navmenu-panel-bg: #1f2937;--hc-navmenu-panel-fg: #f3f4f6;--hc-navmenu-panel-border: #374151;--hc-navmenu-link-fg: #f3f4f6;--hc-navmenu-link-hover-bg: #374151;--hc-menubar-bg: #1f2937;--hc-menubar-border: #374151;--hc-menubar-item-fg: #f3f4f6;--hc-menubar-item-hover-bg: #374151;--hc-carousel-control-bg: #1f2937;--hc-carousel-control-fg: #f3f4f6;--hc-carousel-control-border: #374151;--hc-carousel-dot-color: #374151;--hc-input-group-bg: #1f2937;--hc-input-group-fg: #f3f4f6;--hc-input-group-border: #374151;--hc-input-group-addon-bg: #374151;--hc-input-group-addon-fg: #9ca3af;--hc-input-group-divider: #374151;--hc-empty-media-fg: #9ca3af;--hc-empty-title-fg: #f3f4f6;--hc-empty-description-fg: #9ca3af;--hc-item-fg: #f3f4f6;--hc-item-hover-bg: #374151;--hc-item-selected-fg: #f3f4f6;--hc-item-media-fg: #9ca3af;--hc-item-title-fg: #f3f4f6;--hc-item-description-fg: #9ca3af;--hc-kbd-bg: #374151;--hc-kbd-fg: #f3f4f6;--hc-kbd-border: #374151;--hc-popover-bg: #1f2937;--hc-popover-fg: #f3f4f6;--hc-popover-border: #374151;--hc-toolbar-bg: #1f2937;--hc-toolbar-border: #374151;--hc-toolbar-separator: #374151;--hc-pagination-fg: #f3f4f6;--hc-pagination-hover-bg: #374151;--hc-pagination-disabled-fg: #9ca3af;--hc-toast-info-bg: #172554;--hc-toast-info-fg: #bfdbfe;--hc-toast-info-border: #1e3a8a;--hc-toast-success-bg: #022c22;--hc-toast-success-fg: #a7f3d0;--hc-toast-success-border: #064e3b;--hc-toast-warning-bg: #451a03;--hc-toast-warning-fg: #fde68a;--hc-toast-warning-border: #78350f;--hc-toast-error-bg: #450a0a;--hc-toast-error-fg: #fecaca;--hc-toast-error-border: #7f1d1d;--hc-breadcrumb-separator-fg: #9ca3af;--hc-breadcrumb-link-fg: #9ca3af;--hc-breadcrumb-link-hover-fg: #f3f4f6;--hc-breadcrumb-current-fg: #f3f4f6;--hc-accordion-item-border-color: #374151;--hc-accordion-trigger-fg: #f3f4f6;--hc-accordion-trigger-hover-fg: #f3f4f6;--hc-accordion-content-fg: #9ca3af;--hc-collapsible-content-fg: #f3f4f6;--hc-scroll-area-thumb: #374151;--hc-scroll-area-thumb-hover: #9ca3af;--hc-scroll-area-shadow: color-mix(in srgb, #f3f4f6 15%, transparent);--hc-splitter-grip-color: #374151;--hc-inputotp-border: #374151;--hc-inputotp-bg: #1f2937;--hc-inputotp-fg: #f3f4f6;--hc-inputotp-error-border: #f87171;--hc-inputotp-disabled-bg: #374151;--hc-inputotp-disabled-fg: #9ca3af;--hc-calendar-bg: #1f2937;--hc-calendar-fg: #f3f4f6;--hc-calendar-border: #374151;--hc-calendar-nav-fg: #f3f4f6;--hc-calendar-nav-hover-bg: #374151;--hc-calendar-weekday-fg: #9ca3af;--hc-calendar-day-fg: #f3f4f6;--hc-calendar-day-hover-bg: #374151;--hc-calendar-day-outside-fg: #9ca3af;--hc-calendar-day-disabled-fg: #9ca3af;--hc-command-bg: #1f2937;--hc-command-fg: #f3f4f6;--hc-command-border: #374151;--hc-command-placeholder-fg: #9ca3af;--hc-command-heading-fg: #9ca3af;--hc-command-item-fg: #f3f4f6;--hc-command-item-hover-bg: #374151;--hc-command-item-active-fg: #f3f4f6;--hc-command-item-disabled-fg: #9ca3af;--hc-command-shortcut-fg: #9ca3af;--hc-command-empty-fg: #9ca3af;--hc-menu-bg: #1f2937;--hc-menu-fg: #f3f4f6;--hc-menu-border: #374151;--hc-menu-item-fg: #f3f4f6;--hc-menu-item-hover-bg: #374151;--hc-menu-item-focus-bg: #374151;--hc-menu-item-disabled-fg: #9ca3af;--hc-menu-item-error-fg: #f87171;--hc-menu-label-fg: #9ca3af;--hc-menu-separator-color: #374151;--hc-tabs-list-border: #374151;--hc-tabs-tab-fg: #9ca3af;--hc-tabs-tab-hover-fg: #f3f4f6;--hc-tabs-tab-hover-bg: #374151;--hc-tabs-tab-active-fg: #f3f4f6;--hc-tabs-tab-disabled-fg: #9ca3af;--hc-alert-info-bg: #172554;--hc-alert-info-fg: #bfdbfe;--hc-alert-info-border: #1e3a8a;--hc-alert-success-bg: #022c22;--hc-alert-success-fg: #a7f3d0;--hc-alert-success-border: #064e3b;--hc-alert-warning-bg: #451a03;--hc-alert-warning-fg: #fde68a;--hc-alert-warning-border: #78350f;--hc-alert-error-bg: #450a0a;--hc-alert-error-fg: #fecaca;--hc-alert-error-border: #7f1d1d}:root,[data-density=comfortable]{--hc-control-height: 40px;--hc-control-padding-x: 1rem;--hc-field-gap: .5rem;--hc-toolbar-gap: .5rem;--hc-toolbar-padding-y: .5rem;--hc-toolbar-padding-x: .75rem;--hc-card-padding: 1rem;--hc-dialog-padding: 1rem;--hc-dialog-gap: .75rem;--hc-popover-padding: .75rem;--hc-alert-padding-block: .75rem;--hc-alert-padding-inline: 1rem;--hc-alert-gap: .5rem;--hc-toast-padding-y: .75rem;--hc-toast-padding-x: 1rem;--hc-toast-gap: .5rem;--hc-table-cell-padding-y: .5rem;--hc-table-cell-padding-x: .75rem;--hc-checkbox-size: 1.125rem;--hc-checkbox-sm-size: .875rem;--hc-checkbox-lg-size: 1.375rem;--hc-radio-size: 1.125rem;--hc-radio-sm-size: .875rem;--hc-radio-lg-size: 1.375rem;--hc-button-sm-height: 32px;--hc-button-sm-padding-x: .75rem;--hc-button-lg-height: 48px;--hc-button-lg-padding-x: 1.25rem;--hc-input-sm-height: 32px;--hc-input-sm-padding-x: .75rem;--hc-input-lg-height: 48px;--hc-input-lg-padding-x: 1.25rem;--hc-button-height: 40px;--hc-button-padding-x: 1rem;--hc-toggle-height: 40px;--hc-toggle-padding-x: 1rem;--hc-input-height: 40px;--hc-input-padding-x: 1rem;--hc-datepicker-height: 40px;--hc-datepicker-padding-x: 1rem;--hc-select-height: 40px;--hc-select-padding-x: 1rem;--hc-multicombobox-control-min-height: 40px;--hc-command-input-height: 40px;--hc-tabs-tab-height: 40px}:root,[data-color=default]{--hc-color-focus-ring: #3b82f6;--hc-color-action-primary-bg: #2563eb;--hc-color-action-primary-fg: #ffffff;--hc-color-action-primary-border: #2563eb;--hc-color-action-primary-hover-bg: #1d4ed8;--hc-color-action-primary-hover-border: #1d4ed8;--hc-color-action-primary-soft-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-button-primary-bg: #2563eb;--hc-button-primary-fg: #ffffff;--hc-button-primary-border: #2563eb;--hc-button-primary-hover-bg: #1d4ed8;--hc-button-primary-hover-border: #1d4ed8;--hc-button-ghost-hover-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-toggle-on-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-toggle-on-border: #2563eb;--hc-input-focus-border: #3b82f6;--hc-datagrid-row-hover-bg: color-mix(in srgb, #2563eb 8%, transparent);--hc-datagrid-selected-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-datagrid-highlight-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-datagrid-current-bg: #2563eb;--hc-datagrid-current-fg: #ffffff;--hc-datepicker-focus-border: #3b82f6;--hc-select-focus-border: #3b82f6;--hc-checkbox-checked-bg: #2563eb;--hc-checkbox-checked-border: #2563eb;--hc-multicombobox-option-check-color: #2563eb;--hc-combobox-option-selected-bg: #2563eb;--hc-combobox-option-selected-fg: #ffffff;--hc-slider-thumb-border: #2563eb;--hc-slider-fill: #2563eb;--hc-progress-fill: #2563eb;--hc-switch-checked-bg: #2563eb;--hc-switch-checked-border: #2563eb;--hc-radio-checked-bg: #2563eb;--hc-radio-checked-border: #2563eb;--hc-spinner-primary-color: #2563eb;--hc-code-focus-border: #3b82f6;--hc-sparkline-color: #2563eb;--hc-carousel-dot-active-color: #2563eb;--hc-input-group-focus-border: #3b82f6;--hc-item-selected-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-pagination-current-bg: #2563eb;--hc-pagination-current-fg: #ffffff;--hc-pagination-current-border: #2563eb;--hc-collapsible-trigger-fg: #2563eb;--hc-collapsible-trigger-hover-fg: #1d4ed8;--hc-splitter-handle-hover-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-splitter-grip-active-color: #2563eb;--hc-inputotp-active-border: #2563eb;--hc-inputotp-caret-color: #2563eb;--hc-calendar-day-selected-bg: #2563eb;--hc-calendar-day-selected-fg: #ffffff;--hc-calendar-day-today-border: #2563eb;--hc-calendar-day-range-bg: color-mix(in srgb, #2563eb 16%, transparent);--hc-calendar-day-range-preview-bg: color-mix(in srgb, #2563eb 8%, transparent);--hc-command-item-active-bg: color-mix(in srgb, #2563eb 12%, transparent);--hc-tabs-tab-indicator: #2563eb;--hc-tabs-pill-active-bg: #2563eb;--hc-tabs-pill-active-fg: #ffffff;--hc-tabs-panel-focus-ring: #3b82f6}}@layer hc.base{*,*:before,*:after{box-sizing:border-box}button,input,select,textarea{font:inherit;color:inherit}body{margin:0;background:var(--hc-color-bg);color:var(--hc-color-text);font-family:var(--hc-font-family-sans);font-size:var(--hc-font-size-md);line-height:1.5}::selection{background-color:var(--hc-color-action-primary-soft-bg)}}
package/dist/hc.css CHANGED
@@ -53,6 +53,13 @@
53
53
  --hc-color-status-error-bg: #fef2f2;
54
54
  --hc-color-status-error-fg: #991b1b;
55
55
  --hc-color-status-error-border: #fee2e2;
56
+ --hc-color-syntax-keyword: #6d28d9;
57
+ --hc-color-syntax-string: #047857;
58
+ --hc-color-syntax-number: #b45309;
59
+ --hc-color-syntax-comment: #4b5563;
60
+ --hc-color-syntax-operator: #475569;
61
+ --hc-color-syntax-identifier: #111827;
62
+ --hc-color-syntax-meta: #be123c;
56
63
  --hc-control-height: 40px;
57
64
  --hc-control-padding-x: 1rem;
58
65
  --hc-control-radius: 6px;
@@ -434,6 +441,13 @@
434
441
  --hc-code-removed-bg: #fef2f2;
435
442
  --hc-code-removed-marker: #991b1b;
436
443
  --hc-code-input-min-height: 8rem;
444
+ --hc-code-tok-keyword: #6d28d9;
445
+ --hc-code-tok-string: #047857;
446
+ --hc-code-tok-number: #b45309;
447
+ --hc-code-tok-comment: #4b5563;
448
+ --hc-code-tok-operator: #475569;
449
+ --hc-code-tok-identifier: #111827;
450
+ --hc-code-tok-meta: #be123c;
437
451
  --hc-sparkline-width: 5rem;
438
452
  --hc-sparkline-height: 1.25rem;
439
453
  --hc-sparkline-stroke-width: 1.5px;
@@ -791,6 +805,13 @@
791
805
  --hc-color-status-error-bg: #450a0a;
792
806
  --hc-color-status-error-fg: #fecaca;
793
807
  --hc-color-status-error-border: #7f1d1d;
808
+ --hc-color-syntax-keyword: #c4b5fd;
809
+ --hc-color-syntax-string: #6ee7b7;
810
+ --hc-color-syntax-number: #fcd34d;
811
+ --hc-color-syntax-comment: #9ca3af;
812
+ --hc-color-syntax-operator: #cbd5e1;
813
+ --hc-color-syntax-identifier: #f3f4f6;
814
+ --hc-color-syntax-meta: #fda4af;
794
815
  --hc-shadow-sm: 0 1px 2px rgb(0, 0, 0, 0.55);
795
816
  --hc-shadow-md: 0 4px 12px rgb(0, 0, 0, 0.45);
796
817
  --hc-shadow-lg: 0 8px 24px rgb(0, 0, 0, 0.5);
@@ -926,6 +947,13 @@
926
947
  --hc-code-added-marker: #a7f3d0;
927
948
  --hc-code-removed-bg: #450a0a;
928
949
  --hc-code-removed-marker: #fecaca;
950
+ --hc-code-tok-keyword: #c4b5fd;
951
+ --hc-code-tok-string: #6ee7b7;
952
+ --hc-code-tok-number: #fcd34d;
953
+ --hc-code-tok-comment: #9ca3af;
954
+ --hc-code-tok-operator: #cbd5e1;
955
+ --hc-code-tok-identifier: #f3f4f6;
956
+ --hc-code-tok-meta: #fda4af;
929
957
  --hc-sparkline-error: #f87171;
930
958
  --hc-badge-default-bg: #1f2937;
931
959
  --hc-badge-default-fg: #f3f4f6;
@@ -6237,14 +6265,17 @@
6237
6265
  }
6238
6266
  }
6239
6267
 
6240
- /* hc-code — code surface (issues #253, #256, #255).
6268
+ /* hc-code — code surface (issues #253, #256, #255, #261).
6241
6269
  *
6242
6270
  * A monospace surface styled from the kit's tokens. The read-only modes
6243
6271
  * need no script (CSP `default-src 'self'` safe); the editable mode is a
6244
6272
  * real <textarea> that `installCodeEditor()` upgrades with a synced
6245
- * line-number gutter. Syntax highlighting is out of scope — the lines are
6246
- * plain text (a server-tokenized or behavior-driven follow-up may add it
6247
- * additively later).
6273
+ * line-number gutter.
6274
+ *
6275
+ * Read-only syntax highlighting is server-tokenized (#261): the server emits
6276
+ * `<span class="hc-code__tok" data-tok="…">` spans, coloured from the
6277
+ * `--hc-code-tok-*` palette — no client tokenizer (an editable highlight
6278
+ * overlay is a possible follow-up). See "Syntax tokens" below.
6248
6279
  *
6249
6280
  * 1. Plain block — apply to a <pre>:
6250
6281
  *
@@ -6511,6 +6542,43 @@
6511
6542
  .hc-code__input:focus {
6512
6543
  outline: none;
6513
6544
  }
6545
+
6546
+ /* --- Syntax tokens (#261) ---------------------------------------------- */
6547
+
6548
+ /* Server-emitted token spans, inside <pre><code> or an hc-code__line.
6549
+ * `data-tok` is a generic, language-agnostic vocabulary; `meta` is the
6550
+ * catch-all for language-specific constructs (e.g. 2-way SQL directives).
6551
+ * An unknown or absent `data-tok` inherits the plain code colour. Token
6552
+ * colour wins over a context-line's muted text; line tints (data-state)
6553
+ * and the diff gutter are unaffected. */
6554
+ .hc-code__tok[data-tok="keyword"] {
6555
+ color: var(--hc-code-tok-keyword);
6556
+ }
6557
+
6558
+ .hc-code__tok[data-tok="string"] {
6559
+ color: var(--hc-code-tok-string);
6560
+ }
6561
+
6562
+ .hc-code__tok[data-tok="number"] {
6563
+ color: var(--hc-code-tok-number);
6564
+ }
6565
+
6566
+ .hc-code__tok[data-tok="comment"] {
6567
+ color: var(--hc-code-tok-comment);
6568
+ font-style: italic;
6569
+ }
6570
+
6571
+ .hc-code__tok[data-tok="operator"] {
6572
+ color: var(--hc-code-tok-operator);
6573
+ }
6574
+
6575
+ .hc-code__tok[data-tok="identifier"] {
6576
+ color: var(--hc-code-tok-identifier);
6577
+ }
6578
+
6579
+ .hc-code__tok[data-tok="meta"] {
6580
+ color: var(--hc-code-tok-meta);
6581
+ }
6514
6582
  }
6515
6583
 
6516
6584
  /* hc-sparkline — a tiny inline trend chart (issue #254).