// ───────────────────────────────────────────────────────────────────────────── // 타이포그래피 토큰 // // 폰트 패밀리는 **호스트 앱이 주입하는 계약**이다 — `@fox`는 `--app-font-sans` / // `--app-font-mono`를 참조만 하고 폰트 파일을 소유하지 않는다. Next.js는 `next/font`가 // 앱의 layout에서 CSS 변수를 만들어 주므로(폰트 최적화·자체 호스팅이 앱 책임), // `@fox` 폴더를 다른 프로젝트로 복사해도 그 프로젝트의 폰트를 그대로 따른다. // 미주입 시에도 깨지지 않도록 `var()` 폴백을 반드시 둔다 — 폴백 없는 `var()`가 // undefined면 font-family 선언 전체가 무효가 된다. // // 개별 스칼라(size/weight/…)보다 **프리셋(`$typo`)을 우선 사용**한다. 크기·행간· // 자간·굵기는 함께 움직여야 의도한 타이포가 되므로, 화면에서 넷을 따로 고르게 두면 // 조합이 무한히 갈라진다. `@include fox.typo(title-md)` 한 줄로 넷이 함께 적용된다. // // ⚠️ 아래 값·이름은 임시 플레이스홀더다. 실제 타입 스케일은 Figma 확정 시 교체한다. // ───────────────────────────────────────────────────────────────────────────── $font-family: ( sans: (var(--app-font-sans, system-ui), "Apple SD Gothic Neo", sans-serif), mono: (var(--app-font-mono, ui-monospace), monospace) ); $font-weight: ( regular: 400, medium: 500, semibold: 600, bold: 700 ); // 타이포 프리셋 — size / line-height / weight / letter-spacing 4종을 한 묶음으로. // 1rem = 10px 기준이므로 1.6rem = 16px. $typo: ( display-lg: (size: 4.8rem, line-height: 1.2, weight: 700, letter-spacing: -0.02em), display-md: (size: 4rem, line-height: 1.2, weight: 700, letter-spacing: -0.02em), display-sm: (size: 3.2rem, line-height: 1.25, weight: 700, letter-spacing: -0.02em), headline-lg: (size: 2.8rem, line-height: 1.3, weight: 700, letter-spacing: -0.015em), headline-md: (size: 2.4rem, line-height: 1.35, weight: 700, letter-spacing: -0.015em), headline-sm: (size: 2rem, line-height: 1.4, weight: 700, letter-spacing: -0.01em), title-lg: (size: 1.8rem, line-height: 1.45, weight: 600, letter-spacing: -0.01em), title-md: (size: 1.6rem, line-height: 1.5, weight: 600, letter-spacing: 0), title-sm: (size: 1.4rem, line-height: 1.5, weight: 600, letter-spacing: 0), body-lg: (size: 1.6rem, line-height: 1.6, weight: 400, letter-spacing: 0), body-md: (size: 1.4rem, line-height: 1.6, weight: 400, letter-spacing: 0), body-sm: (size: 1.2rem, line-height: 1.55, weight: 400, letter-spacing: 0), label-lg: (size: 1.4rem, line-height: 1.4, weight: 600, letter-spacing: 0), label-md: (size: 1.3rem, line-height: 1.4, weight: 500, letter-spacing: 0), label-sm: (size: 1.2rem, line-height: 1.35, weight: 500, letter-spacing: 0.01em) );