/* 品牌色 */
.oppo {
  --color-brand-default: #2CFF73;
  --color-brand-hover: #7AFFA7;
  --color-brand-activated: #7AFFA7;
  --color-brand-disabled: #CCFFDD;
  --color-brand-background: #2CFF73;
  --color-brand-onbgDefault: #1A1A1AF2;
  --color-brand-onbgDisabled: #1A1A1A8C;

  /* 二级品牌色 */
  --color-brandSecondary-community: #26C05D;
  --color-brandSecondary-darkGreen: #046A38;
  --color-brandSecondary-opennessBrow: #A07E6D;
  --color-brandSecondary-elegancePurple: #B995FF;

  /* 圆角 */
  --radius-none: var(--border-radius-none);
  --radius-xs: var(--border-radius-xs);
  --radius-sm: var(--border-radius-sm);
  --radius-md: var(--border-radius-md);
  --radius-lg: var(--border-radius-lg);
  --radius-xl: var(--border-radius-xl);
  --radius-xxl: var(--border-radius-full);
  --radius-full: var(--border-radius-full);
}
.oppo.dark,.oppo.manualDark {
  --color-brand-default: #2CFF73;
  --color-brand-hover: #25D962;
  --color-brand-activated: #25D962;
  --color-brand-disabled: #199142;
  --color-brand-background: #2CFF73;
  --color-brand-onbgDefault: #1A1A1AF2;
  --color-brand-onbgDisabled: #FFFFFF8C;
}
.oneplus {
  --color-brand-default: #F50514;
  --color-brand-hover: #FF5959;
  --color-brand-activated: #FF5959;
  --color-brand-disabled: #FF9999;
  --color-brand-background: #FFEBEB;
  --color-brand-onbgDefault: #FFFFFFF2;
  --color-brand-onbgDisabled: #FFFFFF8C;

  /* 二级品牌色 */
  --color-brandSecondary-community: var(--color-brand-default);
  --color-brandSecondary-darkGreen: var(--color-brand-default);
  --color-brandSecondary-opennessBrow: #A07E6D;
  --color-brandSecondary-elegancePurple: #B995FF;

  /* 圆角 */
  --radius-none: var(--border-radius-none);
  --radius-xs: var(--border-radius-xs);
  --radius-sm: var(--border-radius-xs);
  --radius-md: var(--border-radius-xs);
  --radius-lg: var(--border-radius-xs);
  --radius-xl: var(--border-radius-xs);
  --radius-xxl: var(--border-radius-xs);
  --radius-full: var(--border-radius-full);
}
.oneplus.dark,.oneplus.manualDark {
  --color-brand-default: #F50514;
  --color-brand-hover: #FF5959;
  --color-brand-activated: #FF5959;
  --color-brand-disabled: #FF9999;
  --color-brand-background: #FFEBEB;
  --color-brand-onbgDefault: #FFFFFFF2;
  --color-brand-onbgDisabled: #FFFFFF8C;
}

:root {
  
  /* 潘通暖灰色 */
  --color-brandSecondary-tintedWhite: rgba(250, 250, 250, 1);
  --color-brandSecondary-pantone1C: rgba(245, 244, 240, 1);
  --color-brandSecondary-pantone3C: rgba(235, 232, 227, 1);
  --color-brandSecondary-pantone5C: rgba(221, 217, 212, 1);
  --color-brandSecondary-pantone7C: rgba(195, 191, 185, 1);
  --color-brandSecondary-pantone9C: rgba(158, 154, 148, 1);
  --color-brandSecondary-pantone11C: rgba(112, 108, 102, 1);
  --color-brandSecondary-pantone440C: rgba(72, 69, 64, 1);
  --color-brandSecondary-elegantBlack: rgba(32, 31, 28, 1);

  /* 基础色板 */
    /* 红色 */
  --Red-10: #FFEBEB;
  --Red-20: #FFCCCC;
  --Red-30: #FF9999;
  --Red-40: #FF5959;
  --Red-50: #FF1919;
  --Red-60: #E50000;
  --Red-70: #C30000;
  --Red-80: #A80000;
  --Red-90: #800000;
  --Red-100: #4D0000;
    /* 蓝色 */
  --Blue-10: #E0F0FF;
  --Blue-20: #B0D7FF;
  --Blue-30: #73B8FF;
  --Blue-40: #3B9CFF;
  --Blue-50: #007FFF;
  --Blue-60: #0065CC;
  --Blue-70: #0056AD;
  --Blue-80: #004891;
  --Blue-90: #003366;
  --Blue-100: #001A33;
    /* 绿色 */
  --Green-10: #EAFCE1;
  --Green-20: #C6FAAC;
  --Green-30: #8BEB59;
  --Green-40: #6DE034;
  --Green-50: #26C05D;
  --Green-60: #16A74A;
  --Green-70: #358F09;
  --Green-80: #276B06;
  --Green-90: #1C4D04;
  --Green-100: #123003;
    /* 黄色 */
  --Yellow-10: #FFF5E0;
  --Yellow-20: #FFE8BF;
  --Yellow-30: #FFCF70;
  --Yellow-40: #FAC04B;
  --Yellow-50: #F7AD19;
  --Yellow-60: #E09700;
  --Yellow-70: #BD8000;
  --Yellow-80: #966500;
  --Yellow-90: #614100;
  --Yellow-100: #4D3300;
    /* 棕色 */
  --Brown-10: #F6F2F0;
  --Brown-20: #E8E0DC;
  --Brown-30: #D6C8C0;
  --Brown-40: #C3AEA3;
  --Brown-50: #B19587;
  --Brown-60: #A07E6D;
  --Brown-70: #886B5D;
  --Brown-80: #72594D;
  --Brown-90: #5B483E;
  --Brown-100: #483931;
    /* 紫色 */
  --Purple-10: #F8F4FF;
  --Purple-20: #EEE6FF;
  --Purple-30: #E1D1FF;
  --Purple-40: #D3BCFF;
  --Purple-50: #C6A8FF;
  --Purple-60: #B995FF;
  --Purple-70: #9D7FD9;
  --Purple-80: #836AB5;
  --Purple-90: #695591;
  --Purple-100: #534373;


  /* 文字、图标色 */
  --White-10: #FFFFFF0D;
  --White-20: #FFFFFF26;
  --White-30: #FFFFFF40;
  --White-40: #FFFFFF59;
  --White-50: #FFFFFF73;
  --White-60: #FFFFFF8C;
  --White-70: #FFFFFFA6;
  --White-80: #FFFFFFBF;
  --White-90: #FFFFFFD9;
  --White-100: #FFFFFFF2;

  --Black-10: #1A1A1A0D;
  --Black-20: #1A1A1A26;
  --Black-30: #1A1A1A40;
  --Black-40: #1A1A1A59;
  --Black-50: #1A1A1A73;
  --Black-60: #1A1A1A8C;
  --Black-70: #1A1A1AA6;
  --Black-80: #1A1A1ABF;
  --Black-90: #1A1A1AD9;
  --Black-100: #1A1A1AF2;

  /* 中性色 */
  --Neutral-10: rgba(255, 255, 255, 1);
  --Neutral-20: rgba(250, 250, 250, 1);
  --Neutral-30: rgba(242, 242, 242, 1);
  --Neutral-40: rgba(230, 230, 230, 1);
  --Neutral-50: rgba(204, 204, 204, 1);
  --Neutral-60: rgba(179, 179, 179, 1);
  --Neutral-70: rgba(128, 128, 128, 1);
  --Neutral-80: rgba(102, 102, 102, 1);
  --Neutral-90: rgba(77, 77, 77, 1);
  --Neutral-100: rgba(51, 51, 51, 1);
  --Neutral-110: rgba(46, 46, 46, 1);
  --Neutral-120: rgba(38, 38, 38, 1);
  --Neutral-130: rgba(26, 26, 26, 1);
  --Neutral-140: rgba(0, 0, 0, 1);

  /* 功能色 */
  --color-warning-default: var(--Yellow-50);
  --color-warning-hover: var(--Yellow-60);
  --color-warning-activated: var(--Yellow-60);
  --color-warning-disabled: var(--Yellow-30);
  --color-warning-background: var(--Yellow-10);
  --color-warning-onBackground: var(--Yellow-80);
  --color-success-default: var(--Green-50);
  --color-success-hover: var(--Green-60);
  --color-success-activated: var(--Green-60);
  --color-success-disabled: var(--Green-30);
  --color-success-background: var(--Green-10);
  --color-success-onBackground: var(--Green-80);
  --color-error-default: var(--Red-50);
  --color-error-hover: var(--Red-60);
  --color-error-activated: var(--Red-60);
  --color-error-disabled: var(--Red-30);
  --color-error-background: var(--Red-10);
  --color-error-onBackground: var(--Red-80);
  --color-infomation-default: var(--Blue-50);
  --color-infomation-hover: var(--Blue-60);
  --color-infomation-activated: var(--Blue-60);
  --color-infomation-disabled: var(--Blue-30);
  --color-infomation-background: var(--Blue-10);
  --color-infomation-onBackground: var(--Blue-80);

  /* 常用文字、图标色 */
  --color-text-primary: var(--Black-100);
  --color-text-secondary: var(--Black-80);
  --color-text-description: var(--Black-60);
  --color-text-disabled: var(--Black-40);
  --color-text-whitePrimary: var(--White-100);
  --color-text-whiteSecondary: var(--White-80);
  --color-text-whiteDescription: var(--White-60);
  --color-text-whiteDisabled: var(--White-40);

  /* 常用文字、图标色 （stick固定状态） */
  --color-text-fixed-primary: var(--Black-100);
  --color-text-fixed-secondary: var(--Black-80);
  --color-text-fixed-description: var(--Black-60);
  --color-text-fixed-disabled: var(--Black-40);
  --color-text-fixed-whitePrimary: var(--White-100);
  --color-text-fixed-whiteSecondary: var(--White-80);
  --color-text-fixed-whiteDescription: var(--White-60);
  --color-text-fixed-whiteDisabled: var(--White-40);

  /* 分割线 */
  --color-divider-primary: var(--Neutral-30);
  --color-divider-secondary: var(--Neutral-40);

  /* 背景色 */
  --color-background-primary: var(--Neutral-10);
  --color-background-secondary: var(--Neutral-20);
  --color-background-tertiary: var(--Neutral-30);

  /* 状态色 */
  --color-state-default: var(--Neutral-140);
  --color-state-hover: var(--Neutral-90);
  --color-state-activated: var(--Neutral-90);
  --color-state-disabled: var(--Neutral-30);

  /* 灰色状态色 */
  --color-greyState-default: var(--Neutral-50);
  --color-greyState-hover: var(--Neutral-60);
  --color-greyState-activated: var(--Neutral-60);

  /* 边框 */
  --color-border-default: var(--Neutral-40);
  --color-border-hover: var(--Neutral-140);
  --color-border-activated: var(--Neutral-140);

  /* 圆角 */
  --border-radius-none: 0px;
  --border-radius-xs: 4px;
  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 200px;

  /* 遮罩 */
  --color-special-mask: rgba(0, 0, 0, .55);
  --color-special-toast: rgba(46, 46, 46, 0.9);
  --color-special-toastBorder: rgba(77, 77, 77, 1);
}

.dark,.manualDark {
  /* 文字、图标色 */
  --color-text-primary: var(--White-100);
  --color-text-secondary: var(--White-80);
  --color-text-description: var(--White-60);
  --color-text-disabled: var(--White-40);
  --color-text-whitePrimary: var(--Black-100);
  --color-text-whiteSecondary: var(--Black-80);
  --color-text-whiteDescription: var(--Black-60);
  --color-text-whiteDisabled: var(--Black-40);

  
  /* 分割线 */
  --color-divider-primary: var(--Neutral-100);
  --color-divider-secondary: var(--Neutral-90);

  
  /* 背景色 */
  --color-background-primary: var(--Neutral-130);
  --color-background-secondary: var(--Neutral-120);
  --color-background-tertiary: var(--Neutral-110);

  /* 状态色 */
  --color-state-default: var(--Neutral-10);
  --color-state-hover: var(--Neutral-40);
  --color-state-activated: var(--Neutral-40);
  --color-state-disabled: var(--Neutral-110);

  /* 灰色状态色 */
  --color-greyState-default: var(--Neutral-80);
  --color-greyState-hover: var(--Neutral-70);
  --color-greyState-activated: var(--Neutral-70);
  
  /* 边框 */
  --color-border-default: var(--Neutral-100);
  --color-border-hover: var(--Neutral-10);
  --color-border-activated: var(--Neutral-10);

  /* 功能色 */
  --color-warning-default: var(--Yellow-60);
  --color-warning-hover: var(--Yellow-70);
  --color-warning-activated: var(--Yellow-70);
  --color-warning-disabled: var(--Yellow-90);
  --color-warning-background: var(--Yellow-100);
  --color-warning-onBackground: var(--Yellow-30);
  --color-success-default: var(--Green-60);
  --color-success-hover: var(--Green-70);
  --color-success-activated: var(--Green-70);
  --color-success-disabled: var(--Green-90);
  --color-success-background: var(--Green-100);
  --color-success-onBackground: var(--Green-30);
  --color-error-default: var(--Red-60);
  --color-error-hover: var(--Red-70);
  --color-error-activated: var(--Red-70);
  --color-error-disabled: var(--Red-90);
  --color-error-background: var(--Red-100);
  --color-error-onBackground: var(--Red-30);
  --color-infomation-default: var(--Blue-60);
  --color-infomation-hover: var(--Blue-70);
  --color-infomation-activated: var(--Blue-70);
  --color-infomation-disabled: var(--Blue-90);
  --color-infomation-background: var(--Blue-100);
  --color-infomation-onBackground: var(--Blue-30);
}

@media screen and (max-width: 1023px) { 
  /* 暗色监测 */
  @media (prefers-color-scheme: dark) {
    :root {
      /* 文字、图标色 */
      --color-text-primary: var(--White-100);
      --color-text-secondary: var(--White-80);
      --color-text-description: var(--White-60);
      --color-text-disabled: var(--White-40);
      --color-text-whitePrimary: var(--Black-100);
      --color-text-whiteSecondary: var(--Black-80);
      --color-text-whiteDescription: var(--Black-60);
      --color-text-whiteDisabled: var(--Black-40);
    
      
      /* 分割线 */
      --color-divider-primary: var(--Neutral-100);
      --color-divider-secondary: var(--Neutral-90);
    
      
      /* 背景色 */
      --color-background-primary: var(--Neutral-130);
      --color-background-secondary: var(--Neutral-120);
      --color-background-tertiary: var(--Neutral-110);
    
      /* 状态色 */
      --color-state-default: var(--Neutral-10);
      --color-state-hover: var(--Neutral-40);
      --color-state-activated: var(--Neutral-40);
      --color-state-disabled: var(--Neutral-110);
    
      /* 灰色状态色 */
      --color-greyState-default: var(--Neutral-80);
      --color-greyState-hover: var(--Neutral-70);
      --color-greyState-activated: var(--Neutral-70);
      
      /* 边框 */
      --color-border-default: var(--Neutral-100);
      --color-border-hover: var(--Neutral-10);
      --color-border-activated: var(--Neutral-10);
    
      /* 功能色 */
      --color-warning-default: var(--Yellow-60);
      --color-warning-hover: var(--Yellow-70);
      --color-warning-activated: var(--Yellow-70);
      --color-warning-disabled: var(--Yellow-90);
      --color-warning-background: var(--Yellow-100);
      --color-warning-onBackground: var(--Yellow-30);
      --color-success-default: var(--Green-60);
      --color-success-hover: var(--Green-70);
      --color-success-activated: var(--Green-70);
      --color-success-disabled: var(--Green-90);
      --color-success-background: var(--Green-100);
      --color-success-onBackground: var(--Green-30);
      --color-error-default: var(--Red-60);
      --color-error-hover: var(--Red-70);
      --color-error-activated: var(--Red-70);
      --color-error-disabled: var(--Red-90);
      --color-error-background: var(--Red-100);
      --color-error-onBackground: var(--Red-30);
      --color-infomation-default: var(--Blue-60);
      --color-infomation-hover: var(--Blue-70);
      --color-infomation-activated: var(--Blue-70);
      --color-infomation-disabled: var(--Blue-90);
      --color-infomation-background: var(--Blue-100);
      --color-infomation-onBackground: var(--Blue-30);
    }
  }
}