// ─────────────────────────────────────────────────────────────────────────────
// 리셋 & 베이스
//
// 브라우저 기본 스타일 중 디자인 시스템과 충돌하는 것만 걷어낸다. 전면 리셋(모든
// 요소를 무스타일로)이 아니라, 시맨틱 태그의 기본 동작은 살리고 시각 표현만
// 토큰으로 되돌리는 방식이다.
// ─────────────────────────────────────────────────────────────────────────────

@use "abstracts" as fox;

*,
*::before,
*::after {
  box-sizing: border-box;
}

// ⚠️ **1rem = 10px 규약의 근거.** 브라우저 기본 글자 크기(16px)의 62.5%가 10px다.
// px → rem 환산이 10으로 나누기가 되어 토큰 값이 읽기 쉬워진다.
// px 고정과 달리 사용자가 브라우저 글자 크기를 키우면 앱 전체가 비례해 확대된다
// (접근성 설정 존중). 그 대신 `body`에서 실제 본문 크기를 되돌려 놓아야 한다 —
// 아래 `body`의 `typo(body-md)`가 그 역할이다.
//
// ⚠️ 미디어 쿼리 안의 `rem`은 이 값의 영향을 받지 않는다(항상 브라우저 기본 크기
// 기준). `tokens/_layout.scss` 참고.
html {
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: fox.color(background);
  color: fox.color(foreground);
  font-family: fox.font(sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @include fox.typo(body-md);
}

// 제목·문단의 기본 여백을 제거한다 — 간격은 레이아웃(gap/margin 토큰)이 책임지고,
// 태그가 스스로 여백을 갖지 않게 해야 조립 결과를 예측할 수 있다.
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

// 제목 태그의 기본 크기/굵기도 제거한다 — 시각적 위계는 `typo()` 프리셋으로만
// 정하고, 태그 선택은 문서 구조(접근성) 기준으로 하게 만든다.
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

// 폼 요소는 폰트를 상속하지 않는 것이 브라우저 기본값이라 명시적으로 되돌린다.
button,
input,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

button:disabled {
  cursor: default;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

// 브라우저 기본 포커스 링을 지우지 않는다 — 컴포넌트가 `focus-ring()` 믹스인으로
// 자기 링을 정의하면 그것이 우선하고, 정의하지 않은 요소는 기본 링이 남아 키보드
// 사용자가 길을 잃지 않는다.
:where(:focus-visible) {
  outline-offset: 0.2rem;
}