/* cadence — 디자인 토큰 정본 (3단계). Tailwind 4 @theme 이름공간, 선언은 :root (브라우저는 @theme 을 읽지 않는다, #73).
   style.css 는 여기 변수만 쓴다. 대비 실측표는 _design/DESIGN.md. */
:root {
  /* 색 — 중립 흑연 + 라임 한 색. 라임은 선·점·숫자에만, 면으로 쓰지 않는다 */
  --color-bg: #242425;          /* 흑연 바탕 — keelway #0a1418 과 OKLab ΔE 0.079 */
  --color-tile: #2d2d2f;        /* 벤토 타일 면 */
  --color-raise: #38383b;       /* 타일 안 한 단 올린 면(토글 바탕·표 머리·휴대폰 알림) */
  --color-line: #47474a;        /* 1px 구조선 — 장식, 글자 아님 */
  --color-ink: #efede6;         /* 본문·제목 */
  --color-muted: #aaa9a2;       /* 보조 글자·바닥선·컨트롤 테두리 */
  --color-accent: #aef04c;      /* 라임 HSL 84° — 점·선·숫자 */
  --color-focus: #aef04c;       /* 포커스 링 2px */

  /* 서체 — 서체 하나(Anybody)로 제목·숫자·라벨, 본문은 Pretendard */
  --font-display: "Anybody", "Pretendard Variable", system-ui, sans-serif;
  --font-body: "Pretendard Variable", "Pretendard", system-ui, sans-serif;

  /* 가변 축 — font-stretch(%) 값. 키네틱은 이 사이에서만 움직인다 */
  --font-stretch-label: 50%;
  --font-stretch-h1: 60%;
  --font-stretch-title: 70%;
  --font-stretch-num: 70%;
  --font-stretch-peak: 125%;    /* 숫자 출렁임 꼭짓점 · H1 "90" 등장 꼭짓점 */
  --font-stretch-wide: 100%;    /* H1 "90" 의 쉬는 폭 */
  --font-weight-display: 780;
  --font-weight-num: 600;
  --font-weight-label: 650;

  /* 글자 크기 — 폭 표(wireframe §8)에서 잰 상한 */
  --text-display-xl: clamp(3.5rem, 6.6vw, 6.5rem);    /* H1 56–104 · 모바일은 4rem — 레일 폭을 뺀 칸에서 잼 */
  --text-display-xl-mobile: 4rem;
  --text-display-cta: clamp(2.75rem, 8vw, 8rem);      /* B9 키네틱 44–128 */
  --text-display-l: clamp(2.25rem, 4vw, 3.75rem);     /* 구간 제목 36–60 */
  --text-num-xl: clamp(3rem, 6vw, 5.5rem);            /* 읽기판 잔액 48–88 */
  --text-num-l: clamp(2rem, 3.4vw, 3rem);             /* 타일 큰 숫자 32–48 */
  --text-lead: 1.25rem;
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-label: 0.8125rem;                            /* Anybody wdth 50 대문자 */
  --text-display-xl--line-height: 0.95;
  --text-display-l--line-height: 1;
  --text-body--line-height: 1.6;
  --text-label--letter-spacing: 0.08em;

  /* 간격 — 4px 척도 */
  --spacing: 0.25rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;     /* 칸 사이(gap) */
  --spacing-5: 1.25rem;  /* 타일 안쪽 <720 */
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;     /* 타일 안쪽 720–1023 · 페이지 가장자리 ≥720 */
  --spacing-10: 2.5rem;  /* 타일 안쪽 ≥1024 */
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-section: clamp(4.5rem, 3rem + 6vw, 9rem);  /* 구간 사이 — margin·gap 에만(#50) */
  --spacing-container: 82.5rem;                         /* 1320 */
  --spacing-rail: 4.5rem;                               /* 왼쪽 세로 레일 72 (≥1024) */
  --spacing-band: 3.5rem;                               /* 아래 전폭 띠 56 (<1024) + safe-area */
  --spacing-hit: 2.75rem;                               /* 44 터치 */

  /* 반경 — 각지게(렌즈: 12 이하) */
  --radius-tile: 12px;
  --radius-control: 6px;
  --radius-chip: 999px;     /* 작은 딱지에만 — 큰 면·버튼에 쓰지 않는다 */
  --radius-phone: 40px;

  /* 그림자 — 쓰지 않는다. 구조는 1px 선으로 */
  --shadow-none: none;

  /* 이징·길이 */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* 등장·반응 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* 화면 위 A→B */
  --ease-breath: cubic-bezier(0.37, 0, 0.63, 1);      /* 숨(사인과 같은 결) */
  --duration-press: 120ms;
  --duration-hover: 160ms;
  --duration-stretch: 240ms;    /* 숫자 폭 출렁임 */
  --duration-accordion: 200ms;
  --duration-enter: 500ms;
  --duration-intro: 600ms;      /* 등장 상한 */
  --duration-breath: 4200ms;    /* 캔버스 숨 주기 */
  --duration-cta-loop: 12000ms; /* B9 글자 폭이 90일을 한 바퀴 */
}