/* hyunsu-blog — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간).
   선언은 :root 에 둔다 — @theme {} 블록은 브라우저가 읽지 않는다(lessons #73).
   승급(blog.hyunsu.co.kr, mode next): 아래 :root 의 --* 를 globals.css 의 `@theme { … }` 로 그대로 옮긴다.
   `@theme inline` 을 쓰지 않는다 — 라이트 테마가 같은 이름을 덮어쓰고, 유틸리티가 var() 로 그 값을 따라가야 한다.
   [data-theme="light"] 블록과 reduced-motion 블록은 @theme 밖의 보통 CSS 로 남긴다.

   테마: 기본 다크(man 을 연 터미널) · 라이트 = 흰 바탕(2회차 — 그린바 연두 폐기, 사용자 피드백 4).
   두 테마는 한 쌍이다: 라이트 잉크 #14201d 는 다크 바탕과 같은 청록 흑연 계열, 라이트 판·우물은 흰색에 청록을 아주 조금 섞었다. 템플릿은 prefers-color-scheme 을 쓰지 않는다 —
   검수 컷이 브라우저 설정에 흔들리지 않게. 승급 때 시스템 설정 연동은 사용자 확인 뒤(wireframe 12절).
   대비는 전부 DESIGN.md 대비표에서 실측했다. 값을 바꾸면 표도 다시 잰다. */

:root {
  color-scheme: dark;

  /* ── color · 다크(기본) ─────────────────────────────────────────── */
  --color-bg: #14221f;          /* 쪽 바탕 — 청록 기운 흑연. 2회차 #111c1a → #14221f: hyunsu-profile(#0e0f11)과 ΔE 0.050 → 0.073(R4) */
  --color-bg-sunk: #0a1311;     /* 우물 — 코드 블록 */
  --color-panel: #1a2a27;       /* 판 — 요약 상자·표 줄무늬·인라인 코드·WARNING 콜아웃 */
  --color-line: #2a3b37;        /* 헤어라인(장식 구획) */
  --color-line-strong: #61796f; /* 부품 테두리(버튼·칩·체크 상자·토글) — 바탕 3.50 · 판 3.18 (라이트 3.53 과 짝) */
  --color-ink: #e2e9e4;         /* 본문 글자 */
  --color-ink-soft: #b4c2bc;    /* 요약·인용·캡션 */
  --color-muted: #8fa19a;       /* 날짜·라벨·절 번호 */
  --color-accent: #5fd1c4;      /* 3270 청록 — 글자·선으로만. 면(fill) 금지 */
  --color-selection: #24524b;   /* ::selection 바탕 */

  /* 코드 — hljs-* 스팬 클래스에 대응(DESIGN.md 코드 문법 표) */
  --color-code-bg: #0a1311;
  --color-code-ink: #d6e0db;
  --color-code-gutter: #72867f;   /* 줄 번호(10줄 이상)·언어 라벨 */
  --color-code-keyword: #5fd1c4;  /* hljs-keyword · hljs-meta(프롬프트) */
  --color-code-string: #a9d68a;   /* hljs-string · hljs-regexp */
  --color-code-number: #e6b26c;   /* hljs-number · hljs-literal */
  --color-code-comment: #8a9c95;  /* hljs-comment · hljs-quote */
  --color-code-function: #8fbdf2; /* hljs-title.function_ · hljs-section */
  --color-code-type: #e3a3c7;     /* hljs-type · hljs-built_in · hljs-title.class_ */
  --color-code-attr: #d9cd92;     /* hljs-attr · hljs-attribute · hljs-variable · hljs-property */
  --color-code-add: #8fd49a;      /* hljs-addition */
  --color-code-del: #f29a95;      /* hljs-deletion */

  /* ── font ───────────────────────────────────────────────────────── */
  --font-display: "IBM Plex Sans KR", "Pretendard Variable", Pretendard, system-ui, sans-serif; /* 제목·워드마크·404 — 400·700 두 굵기뿐 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: "JetBrains Mono", "Pretendard Variable", ui-monospace, SFMono-Regular, Menlo, monospace; /* 코드·메타 라벨. 한글·화살표는 Pretendard 로 떨어진다 */

  /* ── text (크기 + 행간) — wireframe 7절 폭 표가 이 값으로 계산됐다 ── */
  --text-404: clamp(6rem, 2rem + 14vw, 12rem);
  --text-404--line-height: 0.9;
  --text-h1: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);          /* 홈 h1(사이트 머리)·글 제목·목록 머리 28→44 */
  --text-h1--line-height: 1.2;
  --text-h2: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);       /* 22→26 */
  --text-h2--line-height: 1.35;
  --text-h3: 1.25rem;
  --text-h3--line-height: 1.4;
  --text-h4: 1.0625rem;
  --text-h4--line-height: 1.5;
  --text-title: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);       /* 목록 행 제목 18→20 */
  --text-title--line-height: 1.4;
  --text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);    /* 홈 한 문장·요약 상자 17→19 */
  --text-lead--line-height: 1.7;
  --text-body: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);     /* 본문 17→18 */
  --text-body--line-height: 1.8;
  --text-small: 0.9375rem;                                     /* 캡션·표·목록 요약 15 */
  --text-small--line-height: 1.6;
  --text-code: 0.9375rem;                                      /* 15px × 0.6em × 72칸 = 648px ≤ 글 칸 680 */
  --text-code--line-height: 1.65;
  --text-code-sm: 0.875rem;                                    /* 720 미만 */
  --text-meta: 0.8125rem;                                      /* 모노 라벨 13 */
  --text-meta--line-height: 1.4;
  --text-micro: 0.75rem;                                       /* 칩·표 머리 12 — 이보다 작게 쓰지 않는다 */
  --text-micro--line-height: 1.3;

  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-meta: 0.04em;

  /* ── spacing — 상자 padding 은 리터럴 단계, fluid 는 margin·gap 에만(lessons #50) ── */
  --spacing: 0.25rem;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-24: 6rem;
  --spacing-gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);   /* 쪽 좌우 여백 20→48 */
  --spacing-section: clamp(3rem, 2rem + 4vw, 6rem);       /* 블록 사이 48→96 */
  --spacing-rail: 12.5rem;       /* 왼 레일 200 — 1024 부터 */
  --spacing-rail-gap: 3rem;      /* 레일과 글 칸 사이 48 — 걸린 절 번호가 여기 선다 */
  --spacing-article: 42.5rem;    /* 글 칸 680 — 코드·표·그림·표제란 폭 */
  --spacing-measure: 29em;       /* 본문 글줄 — 본문 크기 기준 em(18px 에서 522px ≈ 39자) */
  --spacing-page: 58rem;         /* 한 폭(2회차) — 모든 쪽의 헤더 안쪽·본문·꼬리 안쪽이 이 열 하나. 928 = 레일 200 + 48 + 글 칸 680 = 흐름 440 + 48 + 440 */
  --spacing-icon: 1.25rem;       /* 아이콘 20 — 테마 토글 해·달 SVG */
  --spacing-touch: 2.75rem;      /* 터치 타깃 최소 44 */

  /* ── radius · shadow — 모서리 90°, 그림자 없음(렌즈) ── */
  --radius-none: 0;
  --shadow-none: none;
  --shadow-focus: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); /* 포커스 링 = 선 */

  /* ── ease · 길이 ── */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --default-transition-duration: 120ms;
  --default-transition-timing-function: cubic-bezier(0.2, 0, 0, 1);

  /* ── breakpoint (Tailwind variant 용 — CSS 미디어 쿼리 안에서는 var 를 못 쓴다: 45rem · 64rem 을 리터럴로) ── */
  --breakpoint-md: 45rem;  /* 720 — 흐름 2열 */
  --breakpoint-lg: 64rem;  /* 1024 — 왼 레일(목차) */
}

/* ── color · 라이트(흰 바탕, 2회차) — 이름은 같고 값만 바뀐다. 대비는 DESIGN.md 대비표 ── */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #ffffff;          /* 쪽 바탕 — 흰색(사용자 피드백 4) */
  --color-bg-sunk: #f5f8f7;     /* 우물 — 코드 블록. 흰색에서 한 걸음, 1px line 과 같이 */
  --color-panel: #eef3f1;       /* 판 — 요약 상자·표 짝수 줄·인라인 코드·WARNING 면 */
  --color-line: #dde5e2;        /* 헤어라인(장식 구획) */
  --color-line-strong: #7b8c87; /* 부품 테두리 — 바탕 3.53 · 판 3.15 (3:1↑) */
  --color-ink: #14201d;         /* 본문 — 다크 바탕과 같은 청록 흑연 계열(한 쌍) */
  --color-ink-soft: #384844;
  --color-muted: #586863;
  --color-accent: #00766c;      /* 다크 #5fd1c4 와 같은 색상(h≈174)을 흰 바탕에서 5:1 로 — 글자·선만 */
  --color-selection: #c6ebe5;

  --color-code-bg: #f5f8f7;
  --color-code-ink: #16241f;
  --color-code-gutter: #5a6d67;
  --color-code-keyword: #00756b;  /* = 강조색 계열 — 다크의 keyword = accent 와 짝 */
  --color-code-string: #3b6614;
  --color-code-number: #8a4a00;
  --color-code-comment: #5a6d66;
  --color-code-function: #1d4f9c;
  --color-code-type: #8c2c6a;
  --color-code-attr: #6a5100;
  --color-code-add: #1b6a2b;
  --color-code-del: #a3262b;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --default-transition-duration: 0ms;
  }
}