/* logline — 디자인 시스템 정본 (DESIGN.md 가 이 파일을 설명한다)
 *
 * 이름은 Tailwind 4 @theme 이름공간이다. 브라우저는 @theme 을 모르므로 여기서는 :root 에 두고,
 * 승급 때 첫 블록을 globals.css 의 @theme { } 으로 그대로 옮긴다. 둘째 블록(템플릿 전용)은 :root 에 남는다.
 * 색을 더하거나 바꾸면 node build.mjs --contrast logline 을 다시 돌려 DESIGN.md 대비표를 고친다.
 */

:root {
  /* ── 색 ─────────────────────────────────────────────────────────────
   * 바탕 3단(강판 → 밝은 판 / 어두운 화면판) + 잉크 2단 + 강조 1색.
   * 강조(형광)는 "찾아낸 것" 에만 — 한 화면에 한 곳. 버튼·링크·표 머리에 쓰지 않는다. */
  --color-bg: #a3abb3; /* 강판 — 청회색 mid 바탕 (OKLCH L .737 · C .015 · h 248) */
  --color-plate: #c9ced3; /* 밝은 판 — 문장판·자리표시자·표 머리 */
  --color-screen-bg: #111519; /* 어두운 화면판 — 로그 발췌·CTA 판 */
  --color-ink: #0b0d0f; /* 잉크 — 본문·선·버튼 바탕 (강판 위 8.37:1) */
  --color-ink-2: #262c33; /* 보조 잉크 — 부제·설명·mono 라벨 (강판 위 6.06:1) */
  --color-rule: #7a828b; /* 약한 선 — 표의 행 사이. 글자에 쓰지 않는다(비텍스트) */
  --color-hatch: #aab1b8; /* 자리표시자 대각선 — 밝은 판 위. 글자에 쓰지 않는다(비텍스트) */
  --color-screen-ink: #dfe4e8; /* 화면판 위 글자 (14.32:1) */
  --color-screen-dim: #8a939b; /* 화면판 위 흐린 글자 — 타임스탬프·INFO (5.87:1) */
  --color-accent: #d4fa3c; /* 형광 황록 — 원인 줄의 띠. 그 위 글자는 잉크 */
  --color-on-accent: var(--color-ink);
  --color-focus: var(--color-ink); /* 화면판 안에서는 --color-accent 로 바꾼다 */

  /* ── 서체 ─────────────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono--font-feature-settings: "liga" 0, "calt" 0; /* 로그의 -> == 를 합자로 바꾸지 않는다 */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ── 글자 크기 — 이름 = 역할 ─────────────────────────────────────── */
  --text-micro: 0.6875rem; /* 11px mono 대문자 라벨 · 좌표 · FIG. */
  --text-micro--line-height: 1.35;
  --text-micro--letter-spacing: 0.08em;
  --text-log: 0.8125rem; /* 13px 로그 줄 — 줄 높이 20px 고정 */
  --text-log--line-height: calc(20 / 13);
  --text-sm: 0.875rem; /* 14px 표·주석 */
  --text-sm--line-height: 1.6;
  --text-base: 1rem; /* 16px 본문(한글) */
  --text-base--line-height: 1.7;
  --text-lg: 1.1875rem; /* 19px 부제 */
  --text-lg--line-height: 1.6;
  --text-xl: 1.5rem; /* 24px 행 이름(기능·요금제) */
  --text-xl--line-height: 1.35;
  --text-2xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); /* 28→40px 구간 제목 */
  --text-2xl--line-height: 1.2;
  --text-index: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); /* 24→40px 색인 번호 (Space Grotesk 500) */
  --text-index--line-height: 1;
  --text-display: clamp(2.375rem, 1.1rem + 3.9vw, 4.5rem); /* 38→72px H1 · CTA 문장 (Pretendard 700) */
  --text-display--line-height: 1.08;
  --text-display--letter-spacing: -0.025em;
  --text-figure: clamp(2.75rem, 1rem + 5vw, 6rem); /* 44→96px 큰 숫자 (Space Grotesk 600) — 증거·가격 */
  --text-figure--line-height: 0.95;
  --text-figure--letter-spacing: -0.02em;

  --tracking-label: 0.08em; /* mono 대문자 라벨 */
  --tracking-tight: -0.025em; /* 한글 제목 */
  --leading-body: 1.7;

  /* ── 간격 — 4px 척도. 콜라주 조각은 --spacing-stack(24px) 단위로만 겹친다 ── */
  --spacing: 0.25rem;
  --spacing-hair: 1px;
  --spacing-stack: 1.5rem; /* 24px — 기준선 한 칸 */
  --spacing-gutter: 1.5rem; /* 데스크톱 거터 24px (모바일은 레이아웃에서 16px) */
  --spacing-margin: clamp(1.25rem, 0.6rem + 2.2vw, 2.5rem); /* 20→40px 좌우 여백 */
  --spacing-row: clamp(4rem, 2.2rem + 6.4vw, 8rem); /* 64→128px 구간 위아래 */

  --container-page: 90rem; /* 1440px */
  --breakpoint-md: 48rem; /* 768px — 미디어 쿼리에는 변수를 못 쓴다: 숫자를 이 값과 맞춘다 */
  --breakpoint-lg: 64rem; /* 1024px — 색인 칸이 옆으로 서는 폭 */

  /* ── 모서리·그림자 — 둘 다 없다 ──────────────────────────────────── */
  --radius-none: 0px;
  --shadow-none: none;
  --shadow-edge: 0 0 0 1px var(--color-ink); /* 콜라주 조각의 1px 테 — 흐림 0 */

  /* ── 이징 ───────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0, 0, 1); /* 기본 — 빨리 닿고 단단히 선다. 튕김 없음 */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* 높이 전환(FAQ) */
  --ease-linear: linear; /* 로그 한 줄 밀기 */
  --ease-step: steps(12, jump-end); /* 판독값 12단계 */
}

/* 템플릿 전용 — Tailwind 이름공간 밖. 승급 때 :root 에 남긴다. */
:root {
  --motion-fast: 120ms; /* 호버·누름 */
  --motion-base: 240ms; /* 아코디언·줄 밀기 */
  --motion-slow: 480ms; /* 형광 띠 Reveal · 판독값 */
  --motion-tail: 1600ms; /* tail -f 새 줄 간격 */
  --grid-cols: 12;
  --log-row: 20px; /* 로그 한 줄 높이 = 형광 띠 높이 */
}