:root,
:root[theme-mode="light"] {

  --oak-color-primary: #0052d9;
  --oak-color-error: #e34d59;
  --oak-color-warning: #ed7b2f;
  --oak-color-success: #00a870;
  --oak-color-info: #d4e3fc;
 

  --oak-bg-color-page: #eee;
  --oak-bg-color-container: #ffffff;
  --oak-bg-color-component: #e7e7e7;


  --oak-text-color-primary: rgba(0, 0, 0, 0.9);
  --oak-text-color-secondary: rgba(0, 0, 0, 0.6);
  --oak-text-color-placeholder: rgba(0, 0, 0, 0.4);
  --oak-text-color-disabled: rgba(0, 0, 0, 0.26);
  --oak-text-color-anti: #ffffff;

  --oak-border-color: #e7e7e7;

  --oak-page-header-color: var(--oak-text-color-primary);
  --oak-page-header-title-color: var(--oak-text-color-primary);
  --oak-page-header-subtitle-color: var(--oak-text-color-secondary);
  --oak-page-header-bg: var(--oak-bg-color-container);
  --oak-page-header-shadow: 0 2px 3px #0000001a;
}

// 黑暗主题色
:root[theme-mode="dark"] {
  --oak-color-primary: #4582e6;
  --oak-color-error: #c64751;
  --oak-color-warning: #cf6e2d;
  --oak-color-success: #059465;
  --oak-color-info: #173463;

  --oak-bg-color-page: #181818;
  --oak-bg-color-container: #242424;
  --oak-bg-color-component: #383838;

  --oak-text-color-primary: #ffffff;
  --oak-text-color-secondary: rgba(255, 255, 255, 0.55);
  --oak-text-color-placeholder: rgba(255, 255, 255, 0.35);
  --oak-text-color-disabled: rgba(255, 255, 255, 0.22);
  --oak-text-color-anti: #000000;

  --oak-border-color: #383838;

  --oak-page-header-color: var(--oak-text-color-primary);
  --oak-page-header-title-color: var(--oak-text-color-primary);
  --oak-page-header-subtitle-color: var(--oak-text-color-secondary);
  --oak-page-header-bg: var(--oak-bg-color-container);
  --oak-page-header-shadow: 0 2px 3px #00000066;
}

:root {
  // Compatibility aliases for older shared-package styles.
  --oak-text-color-brand: var(--oak-color-primary);
  --oak-success-color: var(--oak-color-success);
  --oak-container-color-page: var(--oak-bg-color-page);
  --oak-bg-color: var(--oak-bg-color-page);
  --oak-bg-color-container-hover: var(--oak-bg-color-component);
  --oak-color-bg3: var(--oak-text-color-placeholder);
  --oak-color-primary-bg: var(--oak-color-info);
}

:root {
  --oak-radius-small: 2px;
  --oak-radius-default: 3px;
  --oak-radius-medium: 6px;
  --oak-radius-large: 9px;
  --oak-radius-extraLarge: 12px;
  --oak-radius-circle: 50%;
}

:root {
  --oak-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
  --oak-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
  --oak-font-size-link-small: 12px;
  --oak-font-size-link-medium: 14px;
  --oak-font-size-link-large: 16px;
  --oak-font-size-mark-small: 12px;
  --oak-font-size-mark-medium: 14px;
  --oak-font-size-body-small: 12px;
  --oak-font-size-body-medium: 14px;
  --oak-font-size-body-large: 16px;
  --oak-font-size-title-small: 14px;
  --oak-font-size-title-medium: 16px;
  --oak-font-size-title-large: 20px;
  --oak-font-size-headline-small: 24px;
  --oak-font-size-headline-medium: 28px;
  --oak-font-size-headline-large: 36px;
  --oak-font-size-display-medium: 48px;
  --oak-font-size-display-large: 64px;
  --oak-line-height-link-small: 20px;
  --oak-line-height-link-medium: 22px;
  --oak-line-height-link-large: 24px;
  --oak-line-height-mark-small: 20px;
  --oak-line-height-mark-medium: 22px;
  --oak-line-height-body-small: 20px;
  --oak-line-height-body-medium: 22px;
  --oak-line-height-body-large: 24px;
  --oak-line-height-title-small: 22px;
  --oak-line-height-title-medium: 24px;
  --oak-line-height-title-large: 28px;
  --oak-line-height-headline-small: 32px;
  --oak-line-height-headline-medium: 36px;
  --oak-line-height-headline-large: 44px;
  --oak-line-height-display-medium: 56px;
  --oak-line-height-display-large: 72px;

}