/* ======================================================
   라이트 모드
   ====================================================== */
:root,
[data-color-scheme='light'] {

  /* --- 배경색 --- */
  --color-bg-primary: #ffffff;      /* 전체 배경, 카드/포스트 배경, 사이드바 배경 (제일 넓게 쓰이는 기본 배경) */
  --color-bg-secondary: #f7f9f9;    /* 살짝 구분되는 배경 — 입력창, hover된 목록 항목, 알림 배경 등 */
  --color-bg-tertiary: #eff3f4;     /* 좀 더 진한 보조 배경 — 비활성화된 영역, 구분 블록 등 */
  --color-bg-overlay: #ffffff;      /* 모달/팝업/드롭다운(계정 전환 메뉴 같은 것) 배경 */

  /* --- 글자색 --- */
  --color-text-primary: #0f1419;    /* 본문 글자, 사용자 이름, 제목 등 가장 진한 텍스트 */
  --color-text-secondary: #536471;  /* @아이디, 타임스탬프, 설명 텍스트 같은 흐린 텍스트 */
  --color-text-tertiary: #536471;   /* 더 옅은 보조 텍스트 (레거시, secondary와 거의 같이 씀) */

  /* --- 테두리/구분선 --- */
  --color-border-primary: #eff3f4;  /* 포스트 사이 구분선, 카드 테두리, input 테두리 */

  /* --- 브랜드(포인트) 컬러 — 여기가 "트위터 블루" 핵심 --- */
  --color-bg-brand-base: #1d9bf0;       /* "게시" 버튼, 팔로우 버튼, 체크박스/토글 켜짐 색 등 배경 */
  --color-bg-brand-base-hover: #1a8cd8; /* 위 버튼들 마우스 올렸을 때(hover) 색 */
  --color-bg-brand-soft: #e8f5fd;       /* 브랜드색의 옅은 배경 버전 — 활성 탭 배경, 알림 강조 배경 등 */
  --color-bg-brand-softest: #f5fbfe;    /* 더 옅은 브랜드 배경 — 살짝 하이라이트되는 영역 */
  --color-text-brand: #1d9bf0;          /* 링크, 해시태그, 멘션(@) 글자색 */
  --color-border-brand: #1d9bf0;        /* 포커스된 input 테두리, 브랜드색 강조선 */
  --color-text-on-brand-base: #ffffff;  /* 브랜드색 배경 버튼 "위에" 올라가는 글자색 (예: "게시" 버튼 글자) */
}

/* ======================================================
   다크 모드
   ====================================================== */
[data-color-scheme='dark'] {

  /* --- 배경색 --- */
  --color-bg-primary: #000000;      /* 전체 배경 — 트위터 다크모드처럼 완전 블랙 */
  --color-bg-secondary: #16181c;    /* 입력창/hover 배경 — 아주 살짝 밝은 회색 */
  --color-bg-tertiary: #202327;     /* 비활성화 영역, 구분 블록용 살짝 더 밝은 배경 */
  --color-bg-overlay: #000000;      /* 모달/드롭다운/팝업(계정 전환 메뉴 등) 배경 */

  /* --- 글자색 --- */
  --color-text-primary: #e7e9ea;    /* 본문/제목 등 메인 텍스트 (완전 흰색이 아니라 살짝 회색) */
  --color-text-secondary: #71767b;  /* @아이디, 타임스탬프 등 흐린 텍스트 */
  --color-text-tertiary: #71767b;   /* 더 옅은 보조 텍스트 */

  /* --- 테두리/구분선 --- */
  --color-border-primary: #2f3336;  /* 포스트 구분선, 카드/input 테두리 */

  /* --- 브랜드(포인트) 컬러 --- */
  --color-bg-brand-base: #1d9bf0;       /* 게시/팔로우 버튼 등 배경 (라이트모드와 동일한 트위터 블루) */
  --color-bg-brand-base-hover: #1a8cd8; /* 위 버튼 hover 색 */
  --color-bg-brand-soft: #0a3550;       /* 브랜드색의 어두운 강조 배경 (다크모드용) */
  --color-bg-brand-softest: #061f2e;    /* 더 어둡고 옅은 브랜드 강조 배경 */
  --color-text-brand: #1d9bf0;          /* 링크, 해시태그, 멘션 글자색 */
  --color-border-brand: #1d9bf0;        /* 포커스 테두리, 강조선 */
  --color-text-on-brand-base: #ffffff;  /* 브랜드색 버튼 위 글자색 */
}