/*
 * base.css — 리셋 + 베이스 스타일
 *
 * tokens.css 의 토큰만 참조한다. 화면별 컴포넌트 스타일은 포함하지 않는다.
 * (로비/대기방/인게임/결과 컴포넌트는 후속 grain 에서 이 토큰을 소비한다.)
 *
 * 여기서 프로젝트 전역의 카툰 렌더링 기본값(배경/서체/텍스트/선택색/포커스 링)을
 * 잡아 두어, 모든 화면이 동일한 비주얼 언어 위에서 출발하도록 한다.
 */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

/* ── Base ──────────────────────────────────────────────── */
body {
  min-height: 100vh;
  font-family: var(--font-family-base);
  font-size: var(--text-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-inverse);
  /* 카툰 배경: 딥 그레이프 위 은은한 팝 컬러 광원 */
  background-color: var(--color-surface-base);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(138, 99, 255, 0.55), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(53, 200, 216, 0.45), transparent 40%),
    radial-gradient(circle at 78% 88%, rgba(255, 77, 109, 0.4), transparent 45%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 디스플레이(제목) 서체: 두툼하고 둥근 카툰 타이틀 */
h1,
h2,
h3 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--text-size-3xl);
}

h2 {
  font-size: var(--text-size-2xl);
}

h3 {
  font-size: var(--text-size-xl);
}

p {
  font-size: var(--text-size-md);
  line-height: var(--line-height-base);
}

a {
  color: var(--color-secondary);
  text-underline-offset: 0.15em;
}

/* 베이스 레이아웃 여백만: 컴포넌트 배치는 후속 grain 담당 */
main {
  padding: var(--space-xl) var(--space-lg);
}

/* 선택 영역도 카툰 팝 컬러로 */
::selection {
  background-color: var(--color-secondary);
  color: var(--color-ink);
}

/* 굵은 잉크 포커스 링: 접근성 + 카툰 아웃라인 톤 유지 */
:focus-visible {
  outline: var(--border-width-chunky) solid var(--color-ink);
  outline-offset: var(--space-2xs);
  border-radius: var(--radius-sm);
}