:root {
  --white: #fff;
  --gray95: #151518;
  --gray90: #202025;
  --gray80: #2A2B31;
  --gray70: #454953;
  --gray60: #61666E;
  --gray50: #8F9399;
  --gray40: #B9BBC0;
  --gray30: #DCDDE2;
  --gray20: #EEF0F2;
  --gray15: #F4F6F8;
  --gray10: #F7F8FA;
  
  --red70: #cd372f;
  --red60: #e23c32;
  --blue70: #1777d7;
  --blue60: #1b89ea;


  /* 라이트모드 컬러토큰 */
  --g90: var(--gray90);
  --g60: var(--gray60);
  --g50: var(--gray50);
  --g40: var(--gray40);
  
  --brand: var(--red70);
  --pressed_normal: rgba(0, 0, 0, 0.04);
  --decrease: var(--blue70);
  --line_strong: var(--gray90);
  --line_dark: var(--gray30);
  --line_light: var(--gray15);
  --line_normal: var(--gray20);
  --bg_content: var(--white);
  --bg_content_elevated: var(--bg_content);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 다크모드 컬러토큰 */
    --g90: var(--gray10);
    --g60: var(--gray40);
    --g50: var(--gray50);
    --g40: var(--gray60);
    
    --brand: var(--red60);
    --pressed_normal: rgba(255, 255, 255, 0.04);
    --decrease: var(--blue60);
    --line_strong: var(--gray10);
    --line_dark: var(--gray70);
    --line_light: var(--gray90);
    --line_normal: var(--gray80);
    --bg_content: var(--gray95);
  }
}