File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// ─────────────────────────────────────────────────────────────────────────────
// 색상 토큰
//
// 이 map이 단일 진실 공급원(SSOT)이다. 여기서 두 가지가 함께 파생된다:
// 1. `_root.scss` → `--fox-color-*` CSS 커스텀 프로퍼티 선언
// 2. `_functions.scss`의 `color()` → 토큰 이름 유효성 컴파일타임 검증
// 값과 이름 목록이 한 파일에만 존재하므로 둘 사이의 드리프트가 구조적으로 불가능하다.
//
// 라이트/다크는 `light-dark(라이트값, 다크값)` 한 줄로 함께 보유한다. 테마 전환은
// `_root.scss`의 `color-scheme`이 담당하므로 다크 전용 블록을 따로 두지 않는다 —
// 한쪽만 고쳐서 생기는 테마 불일치가 애초에 발생할 수 없다.
//
// 브라우저 지원: `light-dark()` 자체는 Chrome 123 / Safari 17.5 / Firefox 120 이상이
// 필요하지만, Next.js 16(Turbopack)의 Lightning CSS가 현재 설정에서 이를
// `var(--lightningcss-light, 라이트) var(--lightningcss-dark, 다크)` 조합으로 **폴리필**해
// 출력하므로 구형 브라우저에서도 동작한다(2026-08-11 빌드 산출물에서 확인).
// browserslist 타깃을 최신 브라우저로 좁히면 폴리필이 빠지고 원본 `light-dark()`가
// 그대로 나가므로, 타깃을 바꿀 때 이 전제를 다시 확인한다.
//
// ⚠️ 아래 값은 전부 **임시 플레이스홀더**다. 파이프라인 검증과 /design 카탈로그
// 렌더를 위한 중립 팔레트이며, 실제 브랜드 값은 사용자 제공 Figma/파일로 교체한다.
// 교체 시 이 파일의 값만 바꾸면 앱 전체에 반영된다.
// ─────────────────────────────────────────────────────────────────────────────
$color: (
// 브랜드
primary: light-dark(#4f46e5, #818cf8),
primary-hover: light-dark(#4338ca, #a5b4fc),
primary-subtle: light-dark(#eef2ff, #312e81),
on-primary: light-dark(#ffffff, #1e1b34),
// 표면 — background(페이지 바닥) < surface(카드) < surface-raised(팝오버 등)
background: light-dark(#ffffff, #14161b),
surface: light-dark(#ffffff, #1e2128),
surface-muted: light-dark(#f5f7fa, #262a33),
surface-raised: light-dark(#ffffff, #2c3038),
// 전경(텍스트·아이콘)
foreground: light-dark(#1f2430, #f5f7fa),
foreground-muted: light-dark(#565d6b, #bbc4d8),
foreground-subtle: light-dark(#8790a3, #8790a3),
foreground-inverse: light-dark(#ffffff, #14161b),
// 경계선
border: light-dark(#dae0ed, #424752),
border-subtle: light-dark(#eaeef6, #2f343d),
border-strong: light-dark(#b6bfd2, #5a616e),
// 상태 — 각 상태색 위에 얹는 텍스트색을 on-* 로 함께 정의한다.
danger: light-dark(#dc2626, #f87171),
on-danger: light-dark(#ffffff, #1a0d0d),
success: light-dark(#16a34a, #4ade80),
on-success: light-dark(#ffffff, #0a1a10),
warning: light-dark(#d97706, #fbbf24),
on-warning: light-dark(#ffffff, #1a1205),
info: light-dark(#0284c7, #38bdf8),
on-info: light-dark(#ffffff, #05161f),
// 오버레이
scrim: light-dark(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.65))
);