// ─────────────────────────────────────────────────────────────────────────────
// 레이아웃 토큰 — 브레이크포인트와 z-index 층.
// ─────────────────────────────────────────────────────────────────────────────

// 브레이크포인트는 이 파일에서 **유일하게 CSS 커스텀 프로퍼티로 내보내지 않는
// 토큰**이다. 미디어 쿼리 조건부는 `var()`를 해석하지 않기 때문에
// (`@media (min-width: var(--x))`는 무효), 컴파일타임 SCSS 값이어야만 한다.
// 그래서 브레이크포인트 사용은 `fox.media()` 믹스인 경유가 강제된다.
//
// ⚠️ **미디어 쿼리 안의 `rem`은 브라우저 기본 글자 크기(보통 16px) 기준이다.**
// `html { font-size: 62.5% }`의 영향을 받지 않으므로, 다른 토큰의 "1rem = 10px"
// 규칙이 여기서는 적용되지 않는다. 아래 px 환산을 반드시 함께 본다.
// rem으로 두는 이유: 사용자가 브라우저 글자 크기를 키우면 브레이크포인트도 함께
// 커져 확대 환경에서 레이아웃이 더 일찍 접힌다(px 고정은 이 대응이 불가능하다).
$breakpoint: (
  sm: 40rem,
  // 640px
  md: 48rem,
  // 768px
  lg: 64rem,
  // 1024px
  xl: 80rem,
  // 1280px
  2xl: 96rem
  // 1536px
);

// z-index 층 — 숫자를 화면에서 직접 고르지 않게 하려는 토큰이다. 값 사이를 100씩
// 띄워 둔 것은 나중에 층 사이에 새 층을 끼워 넣을 여지를 남기기 위함이다.
$z: (
  base: 0,
  raised: 100,
  sticky: 200,
  dropdown: 300,
  scrim: 400,
  modal: 500,
  popover: 600,
  toast: 700,
  tooltip: 800,
  splash: 900
);