:root,
.jx-root {
  --jx-font-en: "JOOLIX-EN", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jx-font-fa: "JOOLIX-FA", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jx-font-bilingual: "JOOLIX-EN", "JOOLIX-FA", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jx-font-ui: var(--jx-font-bilingual);
  --jx-font-sans: var(--jx-font-bilingual);
  --jx-font-mono: var(--jx-font-bilingual);
  --jx-font-size-2xs: 9px;
  --jx-font-size-xs: 10px;
  --jx-font-size-sm: 11px;
  --jx-font-size-md: 12px;
  --jx-font-size-lg: 13px;
  --jx-font-size-xl: 14px;
  --jx-font-size-2xl: 18px;
  --jx-font-weight-regular: 100;
  --jx-font-weight-medium: 100;
  --jx-font-weight-semibold: 100;
  --jx-font-weight-bold: 100;
  --jx-line-height-tight: 1.25;
  --jx-line-height-normal: 1.45;
  --jx-line-height-relaxed: 1.65;
  --jx-letter-spacing-label: .08em;
  --jx-space-0: 0;
  --jx-space-1: 2px;
  --jx-space-2: 4px;
  --jx-space-3: 6px;
  --jx-space-4: 8px;
  --jx-space-5: 10px;
  --jx-space-6: 12px;
  --jx-space-7: 14px;
  --jx-space-8: 16px;
  --jx-space-9: 18px;
  --jx-space-10: 20px;
  --jx-space-12: 24px;
  --jx-space-16: 32px;
  --jx-radius-xs: 5px;
  --jx-radius-sm: 8px;
  --jx-radius-md: 10px;
  --jx-radius-lg: 12px;
  --jx-radius-xl: 16px;
  --jx-radius-2xl: 22px;
  --jx-radius-pill: 999px;
  --jx-border-thin: 1px;
  --jx-border-medium: 2px;
  --jx-control-height-sm: 30px;
  --jx-control-height-md: 36px;
  --jx-chat-bubble-min-width: 8rem;
  --jx-control-height-lg: 42px;
  --jx-control-indicator-size: 18px;
  --jx-icon-size-sm: 28px;
  --jx-icon-size-md: 36px;
  --jx-icon-size-lg: 44px;
  --jx-icon-glyph-sm: 14px;
  --jx-icon-glyph-md: 18px;
  --jx-icon-glyph-lg: 22px;
  --jx-scrollbar-size: 4.5px;
  --jx-popup-width: 577px;
  --jx-popup-height: 600px;
  --jx-sidepanel-editor-min-height: 320px;
  --jx-sidepanel-recorder-min-height: 420px;
  --jx-z-content-overlay: 2147483644;
  --jx-z-content-outline: 2147483645;
  --jx-z-content-feedback: 2147483646;
  --jx-z-recorder: 2147483647;
  --jx-focus-width: 2px;
  --jx-modal-min-width: 320px;
  --jx-modal-default-width: 68rem;
  --jx-modal-wide-width: 88.4rem;
  --jx-modal-min-height: 220px;
  --jx-modal-edge: 16px;
  --jx-motion-duration: 0ms;
  --jx-motion-fast: var(--jx-motion-duration);
  --jx-opacity-disabled: .46;
  --jx-color-breadcrumb-separator: var(--jx-color-text-tertiary);
  --jx-input-addon-min-width: 40px;
  --jx-popup-edge-gap: 8px;
  --jx-select-popup-min-height: 80px;
  --jx-select-popup-max-height: 280px;
  --jx-select-popup-flip-threshold: 220px;
  --jx-autocomplete-min-width: 220px;
  --jx-autocomplete-preferred-width: 340px;
  --jx-autocomplete-panel-min-width: 280px;
  --jx-autocomplete-panel-max-width: 520px;
  --jx-autocomplete-offset-y: 6px;
  --jx-autocomplete-min-height: 120px;
  --jx-autocomplete-max-height: 320px;
  --jx-autocomplete-bottom-reserve: 18px;

  /* Feature geometry contracts: modules consume these values instead of owning one-off dimensions. */
  --jx-network-download-feedback-max-width: 260px;
  --jx-network-row-min-height: 104px;
  --jx-network-payload-height: 88px;
  --jx-network-security-list-max-height: 104px;
  --jx-network-security-value-max-height: 54px;
  --jx-network-empty-row-height: 180px;
  --jx-network-page-size-width: 74px;
  --jx-network-chart-label-min-width: 90px;
  --jx-network-chart-bar-min-width: 120px;
  --jx-network-chart-value-min-width: 72px;
  --jx-network-download-feedback-flex-basis: 180px;
  --jx-network-tag-count-size: 18px;
  --jx-network-column-resizer-offset: -4px;
  --jx-network-column-resizer-width: 8px;
  --jx-network-column-resizer-line-offset: 3px;
  --jx-network-chart-body-min-height: 150px;
  --jx-network-line-chart-height: 180px;
  --jx-network-comparison-label-width: 86px;
  --jx-network-tag-filter-width: 190px;
  --jx-network-context-title-max-width: 420px;

  --jx-ai-empty-logo-size: 74px;
  --jx-ai-empty-logo-shadow: 0 8px 18px color-mix(in srgb, var(--jx-color-warning) 24%, transparent);
  --jx-ai-empty-copy-max-width: 320px;
  --jx-ai-pending-attachment-max-width: 240px;
  --jx-ai-message-attachment-max-width: 220px;
  --jx-ai-waiting-avatar-padding: 3px;
  --jx-ai-rich-card-max-width: 420px;
  --jx-ai-rich-audio-max-width: 560px;
  --jx-ai-rich-probe-min-height: 54px;
  --jx-router-divider-gradient: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--jx-color-accent) 20%, transparent) 16%, color-mix(in srgb, var(--jx-color-accent-hover) 72%, transparent) 38%, var(--jx-color-accent-hover) 50%, color-mix(in srgb, var(--jx-color-accent-hover) 72%, transparent) 62%, color-mix(in srgb, var(--jx-color-accent) 20%, transparent) 84%, transparent 100%);
  --jx-router-divider-glow: 0 7px 18px color-mix(in srgb, var(--jx-color-accent-hover) 20%, transparent);
  --jx-router-analytics-drawer-width: 1180px;
  --jx-router-analytics-chart-height: 300px;
  --jx-router-analytics-kpi-min-width: 150px;
  --jx-router-composer-model-min-width: 280px;
  --jx-router-composer-model-max-width: 420px;
  --jx-router-workspace-max-width: 1320px;
  --jx-router-page-copy-max-width: 54rem;
  --jx-router-api-create-min-width: 300px;
  --jx-router-api-create-ratio: .72fr;
  --jx-router-api-list-ratio: 1.28fr;
  --jx-router-image-option-min-width: 5.5rem;
  --jx-router-image-option-count-min-width: 3.4rem;
  --jx-router-composer-image-tools-max-width: 11.5rem;
  --jx-router-composer-mobile-model-min-width: 7.5rem;
  --jx-router-composer-mobile-model-width: 34%;
  --jx-router-image-option-mobile-min-width: 4.6rem;

  --jx-formatter-icon-column: 34px;
  --jx-formatter-scale-label-column: 56px;
  --jx-formatter-scale-value-min-width: 74px;
  --jx-formatter-tool-icon-size: 34px;
  --jx-formatter-reset-icon-size: 28px;
  --jx-formatter-mobile-control-width: 40px;

  --jx-auth-table-min-width: 1040px;
  --jx-auth-row-height: 86px;
  --jx-auth-value-box-height: 72px;
  --jx-auth-likely-marker-width: 3px;
  --jx-auth-likely-glow-radius: 14px;

  --jx-preset-color-1: #d6ad3d;
  --jx-preset-color-2: #2196f3;
  --jx-preset-color-3: #ef4444;
  --jx-preset-color-4: #f59e0b;
  --jx-preset-color-5: #111827;
  --jx-preset-color-6: #ffffff;
}

:root {
  --jx-popup-reset-column: 74px;
  --jx-popup-scale-button: 46px;
  --jx-popup-scale-reset: 58px;
  --jx-popup-logo-width: 132px;
  --jx-popup-logo-height: 28px;
  --jx-popup-sessions-height: 230px;
  --jx-popup-state-pill-width: 145px;
  --jx-popup-feature-icon-gutter: 48px;
}

:root,
.jx-root {
  --jx-reader-narrow-width: 760px;
  --jx-reader-wide-width: 1180px;
  --jx-reader-card-width: 880px;
  --jx-reader-body-top: 48px;
  --jx-reader-body-inline: 24px;
  --jx-reader-body-bottom: 80px;
  --jx-reader-card-padding-min: 26px;
  --jx-reader-card-padding-fluid: 5vw;
  --jx-reader-card-padding-max: 64px;
  --jx-reader-link-underline-offset: .18em;
  --jx-reading-progress-height: 4px;
  --jx-reading-ruler-height: 44px;
  --jx-content-toast-width: 380px;
  --jx-content-toast-offset: 20px;
  --jx-content-toast-icon: 22px;
}

:root,
.jx-root {
  --jx-recorder-controller-offset: 18px;
  --jx-recorder-controller-width: 620px;
  --jx-recorder-controller-copy-min: 100px;
  --jx-recorder-controller-copy-max: 260px;
  --jx-recorder-controller-copy-mobile: 140px;
  --jx-recorder-marker-control-offset: -29px;
  --jx-recorder-modal-edge: 16px;
  --jx-recorder-modal-side-min: 300px;
  --jx-recorder-breadcrumb-height: 90px;
  --jx-recorder-catalog-height: 190px;
  --jx-recorder-toast-width: 390px;
  --jx-recorder-cdp-guide-width: 520px;
  --jx-recorder-cdp-guide-top: 34px;
  --jx-recorder-cdp-guide-arrow-size: 28px;
  --jx-recorder-cdp-guide-countdown-size: 24px;
  --jx-recorder-unresolved-width: 300px;
  --jx-recorder-palette-size: 25px;
  --jx-recorder-color-control-width: 54px;
  --jx-recorder-color-control-height: 36px;
  --jx-recorder-border-preview-height: 54px;
  --jx-recorder-breadcrumb-item-width: 190px;
  --jx-recorder-toast-bottom: 82px;
  --jx-recorder-small-button-height: 26px;
  --jx-recorder-tiny-button-height: 25px;
  --jx-recorder-alpha-control-width: 90px;
  --jx-recorder-mobile-breakpoint: 700px;
}

:root {
  --jx-sidepanel-nav-reserved-height: 74px;
  --jx-sidepanel-brief-min-height: 82px;
  --jx-sidepanel-loading-top: 39px;
  --jx-sidepanel-min-width: 507px;
  --jx-sidepanel-footer-height: 48px;
  --jx-sidepanel-state-pill-min-width: 72px;
  --jx-sidepanel-action-min-width: 82px;

  /* Base component visual contract. Structure/geometry stays in Base CSS; themes override only these visual tokens. */
  --jx-component-panel-border-color: var(--jx-color-border-soft);
  --jx-component-panel-background: var(--jx-texture-panel);
  --jx-component-panel-shadow: inset 0 var(--jx-border-thin) var(--jx-color-metal-highlight), var(--jx-shadow-sm);
  --jx-component-button-border-color: var(--jx-color-border-standard);
  --jx-component-button-text: var(--jx-color-text-primary);
  --jx-component-button-background: var(--jx-texture-button);
  --jx-component-button-shadow: inset 0 var(--jx-border-thin) var(--jx-color-metal-highlight);
  --jx-component-button-hover-border-color: var(--jx-color-border-strong);
  --jx-component-button-hover-text: var(--jx-color-text-inverse);
  --jx-component-button-hover-background: var(--jx-texture-accent-hover);
  --jx-component-button-hover-shadow: var(--jx-shadow-glow);
  --jx-component-button-active-border-color: var(--jx-color-border-strong);
  --jx-component-button-active-text: var(--jx-color-text-inverse);
  --jx-component-button-active-background: var(--jx-texture-accent);
  --jx-component-segment-selected-border-color: var(--jx-color-border-strong);
  --jx-component-segment-selected-text: var(--jx-color-text-inverse);
  --jx-component-segment-selected-background: var(--jx-texture-accent);
  --jx-component-segment-selected-shadow: inset 0 var(--jx-border-thin) var(--jx-color-metal-highlight), var(--jx-shadow-glow);
  --jx-component-field-border-color: var(--jx-color-border-standard);
  --jx-component-field-background: var(--jx-color-surface-input);
  --jx-component-field-shadow: none;
  --jx-component-field-hover-border-color: var(--jx-color-border-strong);
  --jx-component-field-focus-border-color: var(--jx-color-focus);
  --jx-component-field-focus-shadow: none;
  --jx-component-select-popup-border-color: var(--jx-color-border-standard);
  --jx-component-select-popup-background: var(--jx-color-surface-overlay);
  --jx-component-select-popup-shadow: var(--jx-shadow-md);
  --jx-component-chat-background: var(--jx-color-surface-input);
  --jx-component-chat-shadow: var(--jx-shadow-sm);
  --jx-component-chat-assistant-border-color: color-mix(in srgb, var(--jx-color-warning) 48%, var(--jx-color-border-standard));
  --jx-component-chat-assistant-background: color-mix(in srgb, var(--jx-color-surface-input) 84%, var(--jx-color-warning) 16%);
  --jx-component-chat-user-border-color: color-mix(in srgb, var(--jx-color-accent-control) 62%, var(--jx-color-border-standard));
  --jx-component-chat-user-background: color-mix(in srgb, var(--jx-color-surface-input) 72%, var(--jx-color-accent-control) 28%);
  --jx-component-modal-border-color: var(--jx-color-border-standard);
  --jx-component-modal-background: var(--jx-texture-panel);
  --jx-component-modal-shadow: inset 0 var(--jx-border-thin) var(--jx-color-metal-highlight), var(--jx-shadow-lg), var(--jx-shadow-glow);
  --jx-component-loading-background: color-mix(in srgb, var(--jx-color-surface-overlay) 82%, transparent);
  --jx-component-loading-blur: 8px;
  --jx-shell-header-background: var(--jx-texture-panel);
  --jx-shell-header-shadow: var(--jx-shadow-md), inset 0 var(--jx-border-thin) var(--jx-color-metal-highlight);
  --jx-shell-feature-background: var(--jx-texture-panel);
  --jx-shell-feature-shadow: var(--jx-shadow-lg), inset 0 var(--jx-border-thin) var(--jx-color-metal-highlight);
  --jx-shell-footer-background: var(--jx-color-surface-input);
  --jx-shell-footer-shadow: inset 0 var(--jx-border-thin) var(--jx-color-metal-highlight);
}

/* JOOLIA Web LLMs Router geometry extension. Visual values remain token-owned. */
:root,
.jx-root {
  --jx-router-shell-header-height: 64px;
  --jx-router-sidebar-width: 264px;
  --jx-router-content-max-width: 1040px;
  --jx-router-model-select-max-width: 577px;
  --jx-router-capabilities-width: 420px;
  --jx-router-drawer-width: 460px;
  --jx-router-admin-drawer-width: 680px;
  --jx-router-tutorial-drawer-width: 760px;
  --jx-router-composer-max-height: 190px;
  --jx-router-image-preview-max-height: 420px;
  --jx-router-message-editor-max-width: 620px;
  --jx-router-lightbox-edge: 50px;
  --jx-router-layer-drawer: 30;
  --jx-router-layer-sidebar: 45;
  --jx-router-layer-popover: 65;
  --jx-router-layer-lightbox: 80;
  --jx-router-login-logo-max-width: 330px;
  --jx-router-empty-logo-max-width: 360px;
  --jx-router-capabilities-max-height: 360px;
  --jx-router-image-card-min-width: 220px;
  --jx-router-mobile-sidebar-width: 18rem;
  --jx-motion-reduced-duration: 1ms;
  --jx-motion-ease-standard: ease;
}