:root { /* Ant Design React default palette */ --xy-color-white: #ffffff; --xy-color-black: #000000; --xy-blue-1: #e6f4ff; --xy-blue-2: #bae0ff; --xy-blue-3: #91caff; --xy-blue-4: #69b1ff; --xy-blue-5: #4096ff; --xy-blue-6: #1677ff; --xy-blue-7: #0958d9; --xy-blue-8: #003eb3; --xy-blue-9: #002c8c; --xy-blue-10: #001d66; --xy-green-1: #f6ffed; --xy-green-2: #d9f7be; --xy-green-3: #b7eb8f; --xy-green-4: #95de64; --xy-green-5: #73d13d; --xy-green-6: #52c41a; --xy-green-7: #389e0d; --xy-green-8: #237804; --xy-green-9: #135200; --xy-green-10: #092b00; --xy-gold-1: #fffbe6; --xy-gold-2: #fff1b8; --xy-gold-3: #ffe58f; --xy-gold-4: #ffd666; --xy-gold-5: #ffc53d; --xy-gold-6: #faad14; --xy-gold-7: #d48806; --xy-gold-8: #ad6800; --xy-gold-9: #874d00; --xy-gold-10: #613400; --xy-red-1: #fff1f0; --xy-red-2: #ffccc7; --xy-red-3: #ffa39e; --xy-red-4: #ff7875; --xy-red-5: #ff4d4f; --xy-red-6: #f5222d; --xy-red-7: #cf1322; --xy-red-8: #a8071a; --xy-red-9: #820014; --xy-red-10: #5c0011; --xy-purple-1: #f9f0ff; --xy-purple-2: #efdbff; --xy-purple-3: #d3adf7; --xy-purple-4: #b37feb; --xy-purple-5: #9254de; --xy-purple-6: #722ed1; --xy-purple-7: #531dab; --xy-purple-8: #391085; --xy-purple-9: #22075e; --xy-purple-10: #120338; --xy-magenta-1: #fff0f6; --xy-magenta-2: #ffd6e7; --xy-magenta-3: #ffadd2; --xy-magenta-4: #ff85c0; --xy-magenta-5: #f759ab; --xy-magenta-6: #eb2f96; --xy-magenta-7: #c41d7f; --xy-magenta-8: #9e1068; --xy-magenta-9: #780650; --xy-magenta-10: #520339; --xy-color-primary-bg: var(--xy-blue-1); --xy-color-primary-bg-hover: var(--xy-blue-2); --xy-color-primary-border: var(--xy-blue-3); --xy-color-primary-border-hover: var(--xy-blue-4); --xy-color-primary-hover: var(--xy-blue-5); --xy-color-primary: var(--xy-blue-6); --xy-color-primary-active: var(--xy-blue-7); --xy-color-primary-text: var(--xy-blue-6); --xy-color-primary-text-hover: var(--xy-blue-5); --xy-color-primary-text-active: var(--xy-blue-7); --xy-color-info-bg: var(--xy-blue-1); --xy-color-info-border: var(--xy-blue-3); --xy-color-info: var(--xy-blue-6); --xy-color-info-hover: var(--xy-blue-5); --xy-color-info-active: var(--xy-blue-7); --xy-color-success-bg: var(--xy-green-1); --xy-color-success-border: var(--xy-green-3); --xy-color-success-hover: var(--xy-green-5); --xy-color-success: var(--xy-green-6); --xy-color-success-active: var(--xy-green-7); --xy-color-warning-bg: var(--xy-gold-1); --xy-color-warning-border: var(--xy-gold-3); --xy-color-warning-hover: var(--xy-gold-5); --xy-color-warning: var(--xy-gold-6); --xy-color-warning-active: var(--xy-gold-7); --xy-color-error-bg: var(--xy-red-1); --xy-color-error-border: var(--xy-red-3); --xy-color-error-hover: var(--xy-red-4); --xy-color-error: var(--xy-red-5); --xy-color-error-active: var(--xy-red-6); --xy-color-danger-bg: var(--xy-color-error-bg); --xy-color-danger-border: var(--xy-color-error-border); --xy-color-danger-hover: var(--xy-color-error-hover); --xy-color-danger: var(--xy-color-error); --xy-color-danger-active: var(--xy-color-error-active); --xy-color-code-type: var(--xy-magenta-7); --xy-color-text: rgb(0 0 0 / 88%); --xy-color-text-secondary: rgb(0 0 0 / 65%); --xy-color-text-tertiary: rgb(0 0 0 / 45%); --xy-color-text-quaternary: rgb(0 0 0 / 25%); --xy-color-text-disabled: rgb(0 0 0 / 25%); --xy-color-border: #d9d9d9; --xy-color-border-secondary: #f0f0f0; --xy-color-split: rgb(5 5 5 / 6%); --xy-color-bg: var(--xy-color-white); --xy-color-bg-container: var(--xy-color-white); --xy-color-bg-elevated: var(--xy-color-white); --xy-color-bg-layout: #f5f5f5; --xy-color-surface: var(--xy-color-bg-layout); --xy-color-fill: rgb(0 0 0 / 15%); --xy-color-fill-secondary: rgb(0 0 0 / 6%); --xy-color-fill-tertiary: rgb(0 0 0 / 4%); --xy-color-fill-quaternary: rgb(0 0 0 / 2%); --xy-color-mask: rgb(0 0 0 / 45%); --xy-color-control-outline: rgb(5 145 255 / 10%); --xy-color-skeleton-highlight: rgb(255 255 255 / 65%); --xy-color-shadow: rgb(0 0 0 / 8%); --xy-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 3%); --xy-shadow-md: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%); --xy-radius-sm: 4px; --xy-radius-md: 6px; --xy-radius-lg: 8px; --xy-space-xs: 8px; --xy-space-sm: 12px; --xy-space-md: 16px; --xy-space-lg: 24px; --xy-avatar-size-sm: var(--xy-control-height-sm); --xy-avatar-size-md: var(--xy-control-height-md); --xy-avatar-size-lg: var(--xy-control-height-lg); --xy-avatar-text-font-size-sm: var(--xy-font-size-md); --xy-avatar-text-font-size-md: var(--xy-font-size-md); --xy-avatar-text-font-size-lg: var(--xy-font-size-md); --xy-avatar-icon-font-size-sm: var(--xy-font-size-md); --xy-avatar-icon-font-size-md: 18px; --xy-avatar-icon-font-size-lg: var(--xy-font-size-heading-3); --xy-avatar-bg: var(--xy-color-text-quaternary); --xy-avatar-color: var(--xy-color-white); --xy-avatar-border-width: 1px; --xy-avatar-border-color: transparent; --xy-avatar-square-radius-sm: var(--xy-radius-sm); --xy-avatar-square-radius-md: var(--xy-radius-md); --xy-avatar-square-radius-lg: var(--xy-radius-lg); --xy-avatar-group-border-color: var(--xy-color-bg-container); --xy-avatar-group-overlap: -8px; --xy-avatar-group-space: 4px; --xy-breadcrumb-icon-gap: 6px; --xy-breadcrumb-item-color: var(--xy-color-text-secondary); --xy-breadcrumb-item-radius: var(--xy-radius-sm); --xy-breadcrumb-last-item-color: var(--xy-color-text); --xy-breadcrumb-link-hover-color: var(--xy-color-text); --xy-breadcrumb-menu-gap: 2px; --xy-breadcrumb-menu-item-padding: var(--xy-space-xs); --xy-breadcrumb-menu-min-width: 128px; --xy-breadcrumb-row-gap: var(--xy-space-xs); --xy-breadcrumb-separator-color: var(--xy-color-text-tertiary); --xy-breadcrumb-separator-margin: var(--xy-space-xs); --xy-divider-label-color: var(--xy-color-text); --xy-divider-label-font-size: var(--xy-font-size-md); --xy-divider-label-font-weight: 500; --xy-divider-label-padding-inline: var(--xy-space-sm); --xy-divider-line-color: var(--xy-color-split); --xy-divider-line-width: 1px; --xy-divider-margin-block-sm: var(--xy-space-sm); --xy-divider-margin-block-md: var(--xy-space-lg); --xy-divider-margin-block-lg: calc(var(--xy-space-lg) + var(--xy-space-sm)); --xy-divider-plain-label-color: var(--xy-color-text-secondary); --xy-divider-plain-label-font-weight: 400; --xy-divider-vertical-height: 1em; --xy-divider-vertical-margin-inline: var(--xy-space-sm); --xy-anchor-horizontal-gap: var(--xy-space-md); --xy-anchor-ink-color: var(--xy-color-border); --xy-anchor-ink-width: 1px; --xy-anchor-indicator-inset-block: 2px; --xy-anchor-indicator-width: 2px; --xy-anchor-item-gap: 2px; --xy-anchor-item-radius: var(--xy-radius-sm); --xy-anchor-link-hover-color: var(--xy-color-primary); --xy-anchor-link-padding-block: 4px; --xy-anchor-link-padding-inline: var(--xy-space-sm); --xy-anchor-title-margin-bottom: var(--xy-space-sm); --xy-space-size-sm: var(--xy-space-xs); --xy-space-size-md: var(--xy-space-md); --xy-space-size-lg: var(--xy-space-lg); --xy-splitter-bg: var(--xy-color-bg-container); --xy-splitter-handle-active-color: var(--xy-color-primary); --xy-splitter-handle-color: var(--xy-color-border); --xy-splitter-handle-grip-size: var(--xy-space-lg); --xy-splitter-handle-hit-area: var(--xy-space-sm); --xy-splitter-handle-width: 1px; --xy-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --xy-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; --xy-font-size-xs: 10px; --xy-font-size-sm: 12px; --xy-font-size-md: 14px; --xy-font-size-lg: 16px; --xy-font-size-xl: 20px; --xy-font-size-icon: 12px; --xy-font-size-heading-1: 38px; --xy-font-size-heading-2: 30px; --xy-font-size-heading-3: 24px; --xy-font-size-heading-4: 20px; --xy-font-size-heading-5: 16px; --xy-font-size-heading-sm: var(--xy-font-size-heading-4); --xy-font-size-heading-md: var(--xy-font-size-heading-3); --xy-font-size-heading-lg: var(--xy-font-size-heading-2); --xy-line-height: 1.5714285714285714; --xy-line-height-sm: 1.6666666666666667; --xy-line-height-lg: 1.5; --xy-transition-fast: 0.16s ease; --xy-motion-duration-fast: 0.16s; --xy-motion-duration-mid: 0.28s; --xy-motion-ease-in: cubic-bezier(0.4, 0, 1, 1); --xy-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); --xy-motion-ease-out: cubic-bezier(0.2, 0, 0, 1); /* Unified data-entry controls (aligned with Ant Design React sizing) */ --xy-control-height-sm: 24px; --xy-control-height-md: 32px; --xy-control-height-lg: 40px; --xy-control-padding-inline-sm: 7px; --xy-control-padding-inline-md: 11px; --xy-control-padding-inline-lg: 11px; --xy-control-font-size-sm: var(--xy-font-size-sm); --xy-control-font-size-md: var(--xy-font-size-md); --xy-control-font-size-lg: var(--xy-font-size-lg); --xy-control-border: var(--xy-color-border); --xy-control-border-hover: var(--xy-color-primary-hover); --xy-control-border-active: var(--xy-color-primary); --xy-control-bg: var(--xy-color-bg-container); --xy-control-bg-filled: var(--xy-color-fill-tertiary); --xy-control-bg-disabled: var(--xy-color-fill-tertiary); --xy-control-shadow-active: 0 0 0 2px var(--xy-color-control-outline); --xy-control-placeholder: var(--xy-color-text-quaternary); --xy-control-icon: var(--xy-color-text-quaternary); --xy-control-icon-hover: var(--xy-color-text-secondary); /* Popup overlays: use global fontSize, not fontSizeSM (Ant Design React) */ --xy-popup-font-size: var(--xy-font-size-md); --xy-popup-font-size-lg: var(--xy-font-size-lg); --xy-popup-line-height: var(--xy-line-height); --xy-popup-padding: 4px; --xy-popup-option-height: 32px; /* DatePicker / RangePicker component tokens */ --xy-picker-font-size: var(--xy-font-size-md); --xy-picker-input-font-size: var(--xy-font-size-md); --xy-picker-input-font-size-sm: var(--xy-font-size-md); --xy-picker-input-font-size-lg: var(--xy-font-size-lg); --xy-picker-cell-height: 24px; --xy-picker-cell-width: 36px; --xy-picker-panel-row-height: 40px; --xy-picker-panel-cell-inner-height: 28px; --xy-picker-panel-cell-gap: 4px; --xy-tag-font-size: var(--xy-font-size-sm); --xy-tag-line-height: var(--xy-line-height-sm); --xy-tag-padding-inline: 7px; --xy-picker-without-time-cell-height: var(--xy-picker-panel-row-height); --xy-picker-panel-padding: 8px 12px; --xy-picker-header-height: var(--xy-control-height-md); /* Shared component typography tokens */ --xy-table-font-size: var(--xy-font-size-md); --xy-table-line-height: var(--xy-line-height); --xy-menu-font-size: var(--xy-font-size-md); --xy-menu-font-size-sm: var(--xy-font-size-sm); --xy-menu-group-title-font-size: var(--xy-font-size-sm); --xy-anchor-font-size: var(--xy-font-size-md); --xy-message-gap: 8px; --xy-message-icon-font-size: var(--xy-font-size-lg); --xy-message-max-width: 520px; --xy-message-toast-min-width: 180px; --xy-message-top: 8px; --xy-message-z-index: 1050; --xy-notification-actions-margin-top: 8px; --xy-notification-body-gap: 6px; --xy-notification-close-margin-top: 1px; --xy-notification-close-size: 24px; --xy-notification-gap: 12px; --xy-notification-icon-margin-top: 2px; --xy-notification-icon-size: 22px; --xy-notification-message-font-size: var(--xy-font-size-lg); --xy-notification-min-height: 96px; --xy-notification-padding: 16px 20px; --xy-notification-progress-bottom: 8px; --xy-notification-progress-height: 3px; --xy-notification-progress-inset: 16px; --xy-notification-progress-margin-top: 6px; --xy-notification-progress-radius: 999px; --xy-notification-progress-track-bg: var(--xy-color-fill-secondary); --xy-notification-screen-gap: 24px; --xy-notification-stack-gap: 12px; --xy-notification-width: 384px; --xy-notification-z-index: 1050; --xy-progress-active-duration: 1400ms; --xy-progress-circle-size: 96px; --xy-progress-circle-size-mini: 18px; --xy-progress-circle-size-sm: 72px; --xy-progress-circle-stroke-width: 8px; --xy-progress-circle-stroke-width-mini: 2px; --xy-progress-circle-stroke-width-sm: 6px; --xy-progress-gap: 8px; --xy-progress-indeterminate-duration: 1200ms; --xy-progress-indeterminate-width: 40%; --xy-progress-info-font-size: var(--xy-font-size-sm); --xy-progress-info-min-width: 36px; --xy-progress-line-height: 8px; --xy-progress-line-height-mini: 4px; --xy-progress-line-height-sm: 6px; --xy-progress-radius: 999px; --xy-result-content-gap: 8px; --xy-result-content-max-width: 560px; --xy-result-extra-gap: 12px; --xy-result-extra-margin-top: 8px; --xy-result-gap: 16px; --xy-result-icon-box-size: 72px; --xy-result-icon-box-size-lg: 88px; --xy-result-icon-box-size-sm: 56px; --xy-result-icon-size: 40px; --xy-result-icon-size-lg: 48px; --xy-result-icon-size-sm: 32px; --xy-result-image-size: 180px; --xy-result-image-size-lg: 240px; --xy-result-image-size-sm: 128px; --xy-result-left-column-gap: 24px; --xy-result-left-icon-box-size: 56px; --xy-result-left-icon-size: 32px; --xy-result-left-image-size: 112px; --xy-result-left-row-gap: 10px; --xy-result-padding: 40px 24px; --xy-result-padding-lg: 56px 32px; --xy-result-padding-sm: 24px 16px; --xy-result-subtitle-font-size: var(--xy-font-size-md); --xy-result-title-font-size: var(--xy-font-size-heading-4); --xy-result-title-font-size-lg: var(--xy-font-size-heading-3); --xy-result-title-font-size-sm: var(--xy-font-size-heading-5); --xy-spin-content-opacity: 0.45; --xy-spin-core-duration: 1120ms; --xy-spin-dot-delay: 120ms; --xy-spin-dot-duration: 900ms; --xy-spin-dot-gap: 4px; --xy-spin-dot-size: 6px; --xy-spin-duration: 780ms; --xy-spin-fullscreen-bg-opacity: 84%; --xy-spin-fullscreen-blur: 2px; --xy-spin-fullscreen-z-index: 1200; --xy-spin-nested-bg-opacity: 72%; --xy-spin-nested-min-height: 80px; --xy-spin-pulse-duration: 1100ms; --xy-spin-size: 22px; --xy-spin-size-lg: 34px; --xy-spin-size-sm: 16px; --xy-spin-standalone-padding: 4px; --xy-spin-stroke-width: 2px; --xy-spin-stroke-width-lg: 3px; --xy-spin-stroke-width-sm: 2px; --xy-spin-svg-primary-stroke-width: 4; --xy-spin-svg-secondary-stroke-width: 3; --xy-spin-svg-track-stroke-width: 4; --xy-spin-tip-font-size: var(--xy-font-size-md); --xy-spin-tip-gap: 8px; --xy-spin-tip-max-width: 240px; --xy-badge-indicator-font-size: var(--xy-font-size-sm); --xy-badge-indicator-font-size-sm: var(--xy-font-size-xs); --xy-badge-ribbon-offset: 8px; --xy-badge-ribbon-height: 22px; --xy-badge-ribbon-padding-inline: 8px; --xy-badge-ribbon-font-size: var(--xy-font-size-sm); --xy-carousel-arrow-offset: 8px; --xy-carousel-arrow-size: 16px; --xy-carousel-dot-active-width: 24px; --xy-carousel-dot-gap: 4px; --xy-carousel-dot-height: 3px; --xy-carousel-dot-offset: 12px; --xy-carousel-dot-width: 16px; --xy-carousel-speed: 500ms; --xy-collapse-content-padding-block: 16px; --xy-collapse-content-padding-inline: 16px; --xy-collapse-content-padding-inline-start: 34px; --xy-collapse-ghost-gap: 8px; --xy-collapse-header-gap: 10px; --xy-collapse-header-padding-block: 14px; --xy-collapse-header-padding-inline: 16px; --xy-collapse-icon-btn-size: 40px; --xy-collapse-motion-duration: var(--xy-motion-duration-mid); --xy-collapse-panel-border-color: var(--xy-color-border); --xy-empty-content-max-width: 360px; --xy-empty-gap: 10px; --xy-empty-icon-size: 36px; --xy-empty-image-size: 48px; --xy-empty-padding-block: 32px; --xy-empty-padding-block-compact: 16px; --xy-empty-padding-inline: 32px; --xy-empty-padding-inline-compact: 16px; --xy-descriptions-border-color: var(--xy-color-border-secondary); --xy-descriptions-colon-margin-end: 8px; --xy-descriptions-colon-margin-start: 2px; --xy-descriptions-content-color: var(--xy-color-text); --xy-descriptions-extra-color: var(--xy-color-text); --xy-descriptions-font-size: var(--xy-font-size-md); --xy-descriptions-item-gap: 8px; --xy-descriptions-item-padding-block-lg: 16px; --xy-descriptions-item-padding-block-md: 16px; --xy-descriptions-item-padding-block-sm: 8px; --xy-descriptions-item-padding-inline-lg: 24px; --xy-descriptions-item-padding-inline-md: 24px; --xy-descriptions-item-padding-inline-sm: 12px; --xy-descriptions-label-bg: var(--xy-color-fill-quaternary); --xy-descriptions-label-color: var(--xy-color-text-secondary); --xy-descriptions-title-color: var(--xy-color-text); --xy-descriptions-title-font-size: var(--xy-font-size-lg); --xy-descriptions-title-margin-bottom: 16px; --xy-descriptions-view-gap: 16px 24px; /* List component tokens */ --xy-list-action-gap: 16px; --xy-list-avatar-margin-inline-end: 16px; --xy-list-border-color: var(--xy-color-border); --xy-list-content-width: 220px; --xy-list-description-font-size: var(--xy-font-size-md); --xy-list-empty-padding: 16px; --xy-list-font-size: var(--xy-font-size-md); --xy-list-grid-item-gap: 12px; --xy-list-grid-padding: 16px; --xy-list-header-footer-bg: transparent; --xy-list-header-footer-padding: 12px 16px; --xy-list-item-gap: 16px; --xy-list-item-padding-block: 12px; --xy-list-item-padding-block-lg: 16px; --xy-list-item-padding-block-sm: 8px; --xy-list-item-padding-inline: 0; --xy-list-item-padding-inline-bordered: 24px; --xy-list-item-padding-inline-lg: 24px; --xy-list-item-padding-inline-sm: 16px; --xy-list-load-more-padding: 12px 0; --xy-list-meta-content-gap: 4px; --xy-list-pagination-padding: 16px 0; /* Steps component tokens */ --xy-steps-content-gap: 8px; --xy-steps-content-padding-top: 4px; --xy-steps-description-font-size: var(--xy-font-size-sm); --xy-steps-description-margin-top: 4px; --xy-steps-dot-hit-size: 16px; --xy-steps-dot-size: 8px; --xy-steps-font-size: var(--xy-font-size-md); --xy-steps-heading-gap: 8px; --xy-steps-icon-border-width: 1px; --xy-steps-icon-size: var(--xy-control-height-md); --xy-steps-icon-size-sm: var(--xy-control-height-sm); --xy-steps-item-padding-inline: 8px; --xy-steps-navigation-border-width: 2px; --xy-steps-navigation-min-height: 64px; --xy-steps-navigation-padding-block: 12px; --xy-steps-navigation-padding-inline: 16px; --xy-steps-progress-stroke-width: 2px; --xy-steps-tail-gap: 8px; --xy-steps-tail-width: 1px; --xy-steps-title-font-weight: 500; --xy-steps-vertical-item-min-height: 72px; --xy-steps-vertical-item-padding-bottom: 16px; --xy-steps-vertical-tail-gap: 8px; /* Timeline component tokens */ --xy-timeline-alternate-gap: calc(var(--xy-space-lg) + var(--xy-space-sm)); --xy-timeline-axis-size: 10px; --xy-timeline-custom-dot-padding-block: 3px; --xy-timeline-custom-dot-padding-inline: 1px; --xy-timeline-content-gap: var(--xy-space-md); --xy-timeline-content-offset: -4px; --xy-timeline-dot-size: 10px; --xy-timeline-font-size: var(--xy-font-size-md); --xy-timeline-item-padding-block-end: 20px; --xy-timeline-label-font-size: var(--xy-font-size-md); --xy-timeline-pending-dot-duration: 900ms; --xy-timeline-pending-dot-size: 14px; --xy-timeline-tail-color: var(--xy-color-split); --xy-timeline-tail-width: 2px; --xy-popover-arrow-center-offset: -4px; --xy-popover-arrow-offset: -5px; --xy-popover-arrow-size: 8px; --xy-popover-background: var(--xy-color-bg-elevated); --xy-popover-border-color: var(--xy-color-border-secondary); --xy-popover-content-padding: 12px 16px; --xy-popover-max-width: 360px; --xy-popover-title-min-width: 177px; --xy-popover-title-padding: 12px 16px; --xy-popconfirm-actions-margin-top: 12px; --xy-popconfirm-icon-margin-top: 2px; --xy-popconfirm-icon-size: var(--xy-font-size-lg); --xy-popconfirm-max-width: 320px; --xy-popconfirm-min-width: 220px; --xy-popconfirm-padding: 12px; --xy-rate-star-size: 24px; --xy-rate-star-size-sm: 18px; --xy-rate-star-size-lg: 30px; --xy-statistic-affix-font-size: var(--xy-font-size-lg); --xy-statistic-content-font-size: var(--xy-font-size-heading-3); --xy-statistic-content-gap: 4px; --xy-statistic-content-line-height: var(--xy-line-height); --xy-statistic-loading-height: 32px; --xy-statistic-loading-width: 160px; --xy-statistic-title-font-size: var(--xy-font-size-md); --xy-statistic-title-margin-bottom: 4px; /* Drawer component tokens */ --xy-drawer-body-padding: 16px 24px; --xy-drawer-close-icon-size: var(--xy-font-size-lg); --xy-drawer-close-size: 32px; --xy-drawer-default-size: 378px; --xy-drawer-footer-padding: 10px 16px; --xy-drawer-header-height: 56px; --xy-drawer-header-padding: 0 24px; --xy-drawer-large-size: 736px; --xy-drawer-motion-duration: var(--xy-motion-duration-mid); --xy-drawer-title-font-size: var(--xy-font-size-lg); /* Modal component tokens */ --xy-modal-body-padding: 20px 24px; --xy-modal-close-icon-size: var(--xy-font-size-lg); --xy-modal-close-size: 32px; --xy-modal-footer-padding: 10px 16px; --xy-modal-header-height: 56px; --xy-modal-header-padding: 0 24px; --xy-modal-motion-duration: var(--xy-motion-duration-mid); --xy-modal-padding: 24px; --xy-modal-title-font-size: var(--xy-font-size-lg); /* Tree component tokens */ --xy-tree-empty-height: 96px; --xy-tree-empty-padding: 24px 12px; --xy-tree-font-size: var(--xy-font-size-md); --xy-tree-icon-size: 16px; --xy-tree-indent-size: 24px; --xy-tree-line-color: var(--xy-color-border); --xy-tree-line-half-indent: 12px; --xy-tree-line-height: var(--xy-line-height); --xy-tree-node-gap: 4px; --xy-tree-drop-indicator-size: 2px; --xy-tree-node-height: 32px; --xy-tree-node-padding-inline: 8px; --xy-tree-switcher-center: 12px; --xy-tree-switcher-size: 24px; --xy-tree-title-padding-block: 5px; --xy-typography-title-font-size: var(--xy-font-size-heading-3); --xy-typography-level-1-font-size: 32px; --xy-typography-level-2-font-size: 28px; --xy-typography-level-3-font-size: var(--xy-font-size-heading-3); --xy-typography-level-4-font-size: var(--xy-font-size-heading-4); } .dark { --xy-color-primary-bg: #111a2c; --xy-color-primary-bg-hover: #112545; --xy-color-primary-border: #15325b; --xy-color-primary-border-hover: #15417e; --xy-color-primary-hover: #3c89e8; --xy-color-primary: #1668dc; --xy-color-primary-active: #1554ad; --xy-color-primary-text: #1668dc; --xy-color-primary-text-hover: #3c89e8; --xy-color-primary-text-active: #1554ad; --xy-color-info-bg: var(--xy-color-primary-bg); --xy-color-info-border: var(--xy-color-primary-border); --xy-color-info: var(--xy-color-primary); --xy-color-info-hover: var(--xy-color-primary-hover); --xy-color-info-active: var(--xy-color-primary-active); --xy-color-success-bg: #162312; --xy-color-success-border: #274916; --xy-color-success-hover: #6abe39; --xy-color-success: #49aa19; --xy-color-success-active: #3c8618; --xy-color-warning-bg: #2b2111; --xy-color-warning-border: #594214; --xy-color-warning-hover: #e8b339; --xy-color-warning: #d89614; --xy-color-warning-active: #aa7714; --xy-color-error-bg: #2c1618; --xy-color-error-border: #5b2526; --xy-color-error-hover: #e86e6b; --xy-color-error: #dc4446; --xy-color-error-active: #ad393a; --xy-color-danger-bg: var(--xy-color-error-bg); --xy-color-danger-border: var(--xy-color-error-border); --xy-color-danger-hover: var(--xy-color-error-hover); --xy-color-danger: var(--xy-color-error); --xy-color-danger-active: var(--xy-color-error-active); --xy-color-code-type: #ff85c0; --xy-color-text: rgb(255 255 255 / 85%); --xy-color-text-secondary: rgb(255 255 255 / 65%); --xy-color-text-tertiary: rgb(255 255 255 / 45%); --xy-color-text-quaternary: rgb(255 255 255 / 25%); --xy-color-text-disabled: rgb(255 255 255 / 25%); --xy-color-border: #424242; --xy-color-border-secondary: #303030; --xy-color-split: rgb(253 253 253 / 12%); --xy-color-bg: #141414; --xy-color-bg-container: #141414; --xy-color-bg-elevated: #1f1f1f; --xy-color-bg-layout: #000000; --xy-color-surface: #1f1f1f; --xy-color-fill: rgb(255 255 255 / 18%); --xy-color-fill-secondary: rgb(255 255 255 / 12%); --xy-color-fill-tertiary: rgb(255 255 255 / 8%); --xy-color-fill-quaternary: rgb(255 255 255 / 4%); --xy-color-mask: rgb(0 0 0 / 45%); --xy-color-control-outline: rgb(22 104 220 / 18%); --xy-color-skeleton-highlight: rgb(255 255 255 / 12%); --xy-color-shadow: rgb(0 0 0 / 45%); }