/* Generated from packages/design-tokens/tokens.json (2.0.0). Do not edit. */
:root {
  --yl-color-canvas: #F3F3F3;
  --yl-color-surface: #FFFFFF;
  --yl-color-surfaceSubtle: #F7F7F7;
  --yl-color-textPrimary: #242424;
  --yl-color-textSecondary: #5F5F5F;
  --yl-color-textMuted: #767676;
  --yl-color-textDisabled: #9A9A9A;
  --yl-color-border: #E3E3E3;
  --yl-color-borderStrong: #C7C7C7;
  --yl-color-overlay: rgba(18, 18, 18, 0.45);
  --yl-color-brand: #3F7E97;
  --yl-color-brandSoft: #E8F1F4;
  --yl-color-brandDecorative: #6693A6;
  --yl-color-success: #4F705B;
  --yl-color-successSoft: #EEF4F0;
  --yl-color-warning: #80652D;
  --yl-color-warningSoft: #FBF6E8;
  --yl-color-danger: #A85252;
  --yl-color-dangerSoft: #FFF8F7;
  --yl-color-focusRing: rgba(63, 126, 151, 0.32);
  --yl-font-familySans: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "sans-serif";
  --yl-font-weight-regular: 400;
  --yl-font-weight-medium: 500;
  --yl-font-weight-semibold: 600;
  --yl-font-weight-bold: 700;
  --yl-font-size-caption: 12px;
  --yl-font-size-bodySmall: 14px;
  --yl-font-size-body: 16px;
  --yl-font-size-titleSmall: 18px;
  --yl-font-size-title: 24px;
  --yl-font-size-display: 32px;
  --yl-font-size-displayMedium: 40px;
  --yl-font-size-displayLarge: 52px;
  --yl-font-lineHeight-caption: 1.5;
  --yl-font-lineHeight-bodySmall: 1.57;
  --yl-font-lineHeight-body: 1.5;
  --yl-font-lineHeight-titleSmall: 1.44;
  --yl-font-lineHeight-title: 1.33;
  --yl-font-lineHeight-display: 1.25;
  --yl-space-0: 0px;
  --yl-space-1: 4px;
  --yl-space-2: 8px;
  --yl-space-3: 12px;
  --yl-space-4: 16px;
  --yl-space-5: 20px;
  --yl-space-6: 24px;
  --yl-space-8: 32px;
  --yl-space-10: 40px;
  --yl-space-12: 48px;
  --yl-space-16: 64px;
  --yl-radius-none: 0px;
  --yl-radius-sm: 4px;
  --yl-radius-md: 8px;
  --yl-radius-lg: 12px;
  --yl-radius-navActive: 10px;
  --yl-radius-xl: 16px;
  --yl-radius-panel: 24px;
  --yl-radius-pill: 999px;
  --yl-border-width: 1px;
  --yl-shadow-raised: 0px 4px 16px 0px rgba(30, 36, 32, 0.08);
  --yl-shadow-overlay: 0px 16px 48px 0px rgba(20, 24, 21, 0.18);
  --yl-motion-fast: 120ms;
  --yl-motion-normal: 180ms;
  --yl-motion-slow: 240ms;
  --yl-zIndex-base: 0;
  --yl-zIndex-sticky: 100;
  --yl-zIndex-dropdown: 300;
  --yl-zIndex-overlay: 500;
  --yl-zIndex-modal: 600;
  --yl-zIndex-toast: 800;
  --yl-breakpoint-compact: 768px;
  --yl-breakpoint-desktop: 1024px;
  --yl-breakpoint-wide: 1440px;
  --yl-layout-webTopbarHeight: 60px;
  --yl-layout-brandLogoHeight: 40px;
  --yl-layout-avatarVisualSize: 40px;
  --yl-layout-webWorkspaceWidth: 1200px;
  --yl-layout-webSidebarWidth: 300px;
  --yl-layout-webSidebarCompactWidth: 200px;
  --yl-layout-webContentInset: 48px;
  --yl-layout-webContentMaxWidth: 900px;
  --yl-layout-webContentOffsetTop: 48px;
  --yl-layout-controlHeight: 40px;
  --yl-layout-touchTarget: 44px;
  --yl-layout-switchTrackWidth: 36px;
  --yl-layout-switchTrackHeight: 20px;
  --yl-layout-switchKnobSize: 14px;
  --yl-layout-albumWorkbenchPreviewHeight: 580px;
  --yl-layout-sidebarNavigationHeight: 44px;
  --yl-layout-sidebarNavigationVisualHeight: 38px;
  --yl-layout-sidebarNavigationHorizontalInset: 10px;
  --yl-layout-sidebarNavigationHitWidth: 96px;
  --yl-layout-accountActionWidth: 112px;
  --yl-layout-webContentSidebarProximity: 150px;
  --yl-layout-capacityHeroMinHeight: 360px;
  --yl-layout-capacityMetaMinWidth: 240px;
  --yl-layout-activeIndicatorHeight: 3px;
  --yl-media-albumCoverRatio: 1.5;
  --yl-media-thumbnailRatio: 1;
}