/* hyunsu-profile — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간 · 선언은 :root — @theme 블록은 브라우저가 읽지 않는다, lessons #73)
 *
 * 두 층이다: 원시색(--color-dark-* · --color-light-* · --color-domain-*) → 의미색(--color-bg · --color-ink …).
 * style.css 는 의미색만 쓴다. 라이트는 :root[data-theme="light"] 가 의미색만 갈아 끼운다(다크가 기본 — 원본과 같다).
 * 원시색 bg·ink·ink-2 는 원본 hyunsu.co.kr 실측값 그대로다(research.md 1-4). 도메인 8색도 원본 그대로 — 지름 8px 점에만 쓴다.
 * 크기의 cqi 는 main(과 폰의 페이지 칸)의 container-type: inline-size 를 기준으로 한다 — 폭 표 wireframe 5.
 */
:root {
  color-scheme: dark;

  /* ── 원시색 · 다크 ─────────────────────────────── */
  --color-dark-bg: #0e0f11;            /* 원본 body 바탕 */
  --color-dark-surface: #16181b;       /* 펼친 행의 판 */
  --color-dark-grid: #15171a;          /* 히어로 청사진 격자 선 (장식, 1.07:1) */
  --color-dark-line: #26292d;          /* 구획선 1px (장식 — 정보는 글자가 진다) */
  --color-dark-line-strong: #62686f;   /* 조작 요소 테두리 3:1 이상 */
  --color-dark-ink: #f2f2ef;           /* 원본 잉크 */
  --color-dark-ink-2: #8f959b;         /* 원본 보조 잉크 */
  --color-dark-accent: #c6f36b;        /* 강조 1색 — '지금' 에만 (OKLCH h125: 건설 h90·유통 h159 와 34° 이상 떨어짐) */

  /* ── 원시색 · 라이트 ───────────────────────────── */
  --color-light-bg: #f1f1ee;           /* 원본 라이트 바탕 */
  --color-light-surface: #e7e7e2;
  --color-light-grid: #e8e8e4;
  --color-light-line: #d2d3ce;
  --color-light-line-strong: #7a7f85;
  --color-light-ink: #101214;          /* 원본 라이트 잉크 */
  --color-light-ink-2: #5b6168;        /* 원본 라이트 보조 잉크 */
  --color-light-accent: #467308;       /* 라이트의 강조 — 글자로도 4.5:1 */

  /* ── 도메인 8색 (원본 그대로 · 점에만) ─────────── */
  --color-domain-construction: #c9a227;
  --color-domain-finance: #3b6ea8;
  --color-domain-retail: #2f9e6b;
  --color-domain-homeshopping: #d2607a;
  --color-domain-travel: #4e8fd0;
  --color-domain-energy: #e0862b;
  --color-domain-fashion: #7d5bb5;
  --color-domain-ai: #1fa7b3;

  /* ── 의미색 (다크 기본) ────────────────────────── */
  --color-bg: var(--color-dark-bg);
  --color-surface: var(--color-dark-surface);
  --color-grid: var(--color-dark-grid);
  --color-line: var(--color-dark-line);
  --color-line-strong: var(--color-dark-line-strong);
  --color-ink: var(--color-dark-ink);
  --color-ink-2: var(--color-dark-ink-2);
  --color-accent: var(--color-dark-accent);
  --color-on-ink: var(--color-dark-bg);       /* 잉크색 버튼(프로젝트 보기) 위 글자 */
  --color-focus: var(--color-dark-accent);

  /* ── 서체 ──────────────────────────────────────── */
  --font-display: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: "JetBrains Mono", "Pretendard Variable", ui-monospace, monospace;   /* 메타 — 한글은 Pretendard 로 떨어진다 */
  --font-mark: "Bricolage Grotesque", "Pretendard Variable", sans-serif;          /* 워드마크 'Hyunsu' 전용 (라틴 6자) */

  --font-weight-display: 800;
  --font-weight-quote: 700;
  --font-weight-title: 600;
  --font-weight-strong: 600;
  --font-weight-meta: 500;
  --font-weight-body: 400;
  --font-weight-mark: 800;

  /* ── 글자 크기 (rem = 16px) ─────────────────────── */
  --text-display: clamp(2rem, 12cqi, 7rem);          /* H1 — 가장 긴 줄 7.843em × 12cqi = 칸의 94% */
  --text-display--line-height: 1.08;
  --text-display--letter-spacing: -0.035em;
  --text-quote: clamp(1.625rem, 7.5cqi, 3.5rem);     /* 신조 — max-width 12em 으로 3줄 고정, 12em × 7.5cqi = 90% */
  --text-quote--line-height: 1.25;
  --text-quote--letter-spacing: -0.03em;
  --text-mark: clamp(3.5rem, 26cqi, 15rem);          /* 꼬리 워드마크 HYUNSU — 3.588em × 26cqi = 93% */
  --text-mark--line-height: 0.9;
  --text-mark--letter-spacing: -0.03em;
  --text-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);   /* 히어로 리드 · 소개 문단 — 19 → 24px */
  --text-lead--line-height: 1.6;
  --text-title: 1.0625rem;                            /* 경력 행 제목 — 칸 40rem 이상에서 --text-title-lg */
  --text-title--line-height: 1.4;
  --text-title--letter-spacing: -0.02em;
  --text-title-lg: 1.25rem;
  --text-body: 1.0625rem;                             /* 원본 설명 17px / 1.75 */
  --text-body--line-height: 1.7;
  --text-small: 0.9375rem;                            /* dd · 기술 항목 · 버튼 */
  --text-small--line-height: 1.6;
  --text-caption: 0.8125rem;                          /* 연표 안내 · 연구 시안 한 줄 */
  --text-caption--line-height: 1.5;
  --text-meta: 0.75rem;                               /* 모노 대문자 라벨 (역할·기술·구간 머리) */
  --text-meta--line-height: 1.3;
  --text-meta--letter-spacing: 0.06em;
  --text-micro: 0.6875rem;                            /* 번호 01~08 (숫자만) */
  --text-micro--line-height: 1.2;
  --text-micro--letter-spacing: 0.08em;

  /* ── 간격 (4px 척도) ───────────────────────────── */
  --spacing-px: 1px;
  --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-20: 5rem;
  --spacing-24: 6rem;
  --spacing-32: 8rem;
  --spacing-gutter: 1rem;                              /* 페이지 좌우 — 45rem 이상 2.5rem (아래) */
  --spacing-section: clamp(4rem, 3rem + 5vw, 8rem);   /* 구간 사이 — fluid 는 margin·gap 에만 (#50) */
  --spacing-rail: 17rem;                               /* 레일 폭 (64rem 이상) */
  --spacing-rail-gap: 4rem;                            /* 레일 ↔ main */
  --spacing-spine: 1.5rem;                             /* 경력 목록의 척추 칸 */
  --spacing-tap: 2.75rem;                              /* 폰 터치 최소 44px */

  /* ── 폭 (Tailwind 4 --container-*) ─────────────── */
  --container-page: 85rem;      /* 1360 — 원본 container 와 같다 */
  --container-prose: 34em;      /* 본문 줄 길이 상한 (브리프) */
  --container-lead: 30em;
  --container-quote: 12em;      /* 신조 3줄 */

  /* ── 브레이크포인트 (문서용 — media 쿼리는 var 를 못 읽는다) ── */
  --breakpoint-wide: 45rem;     /* 720 — 거터 2.5rem */
  --breakpoint-rail: 64rem;     /* 1024 — 레일이 붙는다 */

  /* ── 모양 ──────────────────────────────────────── */
  --radius-none: 0;             /* 모든 상자 · 버튼 · 칩 — 직각 */
  --radius-dot: 50%;            /* 도메인 점 · '현재' 점만 — 계기판의 LED */
  --shadow-none: none;          /* 그림자 0 */
  --shadow-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);   /* 포커스 링 전용 (번지지 않는 두 겹 선) */

  /* ── 움직임 — 펼침 한 순간뿐 (DESIGN.md 모션) ──── */
  --ease-open: cubic-bezier(0.23, 1, 0.32, 1);    /* 펼침 220ms */
  --ease-close: cubic-bezier(0.4, 0, 0.6, 1);     /* 접힘 160ms — 나갈 때가 더 빠르다 */
}

:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--color-light-bg);
  --color-surface: var(--color-light-surface);
  --color-grid: var(--color-light-grid);
  --color-line: var(--color-light-line);
  --color-line-strong: var(--color-light-line-strong);
  --color-ink: var(--color-light-ink);
  --color-ink-2: var(--color-light-ink-2);
  --color-accent: var(--color-light-accent);
  --color-on-ink: var(--color-light-bg);
  --color-focus: var(--color-light-accent);
}

@media (min-width: 45rem) {
  :root { --spacing-gutter: 2.5rem; }
}