테마·토큰 적용

작성 중

토큰 구조, 모드 전환, 브랜드 교체

토큰 3단

원시값 → 의미 → 컴포넌트. 화면과 컴포넌트는 의미 토큰만 씁니다.

원본은 tokens/*.json(DTCG 형식)이고, npm run tokens가 CSS 변수(--ds-*)를 만듭니다.
shadcn 컴포넌트가 보는 변수 이름(--background, --primary 등)은 의미 토큰에 연결되어 있어, 테마가 바뀌어도 컴포넌트 소스를 고치지 않습니다.
값 표는 기초 스타일에 있습니다.

Figma Variables의 컬렉션·모드와 같은 구조입니다.

<!-- 색 모드: dark(기본) | light -->
<html data-theme="light">

<!-- 크기 모드: default(기본) | large -->
<html data-scale="large">

브랜드 색: tokens/primitive/brand.json의 11단계 값만 바꿉니다. 바꾼 뒤 npm run tokens:check로 대비를 확인합니다.
제품 이름: src/config/brand.ts만 바꿉니다.