custom property 범위

CSS 변수는 가까운 스코프부터 찾고, 없으면 폴백을 쓴다

같은 `--text-color`라도 선언 위치가 다르면 컴포넌트가 읽는 값이 달라집니다. 이 규칙이 테마 전환의 핵심입니다.

:root

전역 기본값

문서 전체에서 사용할 색상과 간격 토큰을 먼저 준비합니다.

.dark-theme

지역 재정의

테마 영역 안에서는 같은 변수명이 더 가까운 값으로 바뀝니다.

var()

폴백 값

변수가 없거나 유효하지 않으면 쉼표 뒤의 안전한 값을 사용합니다.

활용 기준

테마, 카드 변형, 섹션별 색상처럼 범위가 있는 값은 지역 스코프에 두고, 사이트 전체 규칙은 `:root`에 남기면 변경 범위가 명확해집니다.