/* ============================================================================
   site-lee — 디자인 토큰 (단일 정본)
   ----------------------------------------------------------------------------
   여기가 색·타이포·간격의 유일한 정본이다. **네 번째 장부를 만들지 말 것** —
   목업에도, Stitch designMd 에도 이 값을 옮겨 적지 않는다. 복사 방향은
   `시안 → 눈 → 판단 → 이 파일` 한 방향이다 (DECISIONS D-001).

   대비값은 주장이 아니라 실측이다. `python3 scripts/check-contrast.py` 로 계산했고,
   **팔레트를 바꾸면 반드시 다시 돌린다** — byorim01 은 다크→라이트 전환에서
   파생색이 조용히 무너졌다(카테고리 3색 전부 2.6~2.9:1, 에러색 5.83→2.63).

   착상: 한지 바탕 · 먹 글자 · 쪽빛(감색) 구조 · 주칠 강조.
   족보는 격식 있는 문서다. 색은 절제하고 위계는 글자와 여백으로 세운다.
   ========================================================================= */

:root {
  color-scheme: light;   /* 단일 테마. 토글을 만들지 않는다 */

  /* ── 바탕 3층 ──────────────────────────────────────────────────────────
     ⚠️ 면끼리의 대비는 bg 대비 1.05 / 1.11 로 낮다. 이건 의도다 —
     한지 위의 층은 채우기가 아니라 **헤어라인과 그림자**로 가른다.
     카드를 배경색만으로 구분하려 하면 안 보인다. */
  --bg:             #FAF7F0;   /* 한지 */
  --surface:        #FFFDF8;   /* 떠 있는 면 — shadow-raised 와 함께 쓴다 */
  --surface-sunken: #F1EBE0;   /* 가라앉은 면 — 표 머리, 코드, 잠김 */
  --line:           rgba(28, 25, 23, 0.14);
  --line-strong:    rgba(28, 25, 23, 0.28);

  /* ── 글자 3단 ──  (대비: bg / surface / sunken) ───────────────────────── */
  --ink:       #1C1917;   /* 먹      16.35 / 17.20 / 14.74 */
  --ink-dim:   #57514A;   /*          7.32 /  7.70 /  6.60 */
  --ink-faint: #8A817A;   /*          3.57 /  3.75 /  3.22  — 큰 글씨·UI 한정 */

  /* ── 시그니처 ──
     쪽빛 = 구조·위계(세대 라벨, 링크).  주칠 = 현재 위치·강조(선택된 인물). */
  --brand:          #2E4A63;   /*  8.62 /  9.08 /  7.78 */
  --brand-strong:   #1F3448;   /* 11.95 / 12.57 / 10.77 */
  --brand-soft:     #E8EDF2;
  --on-brand:       #FFFFFF;   /* brand 위 9.23 · brand-strong 위 12.78 */

  --accent:         #A6412E;   /*  5.74 /  6.05 /  5.18 */
  --accent-strong:  #7E301F;   /*  8.42 /  8.87 /  7.60 */
  --accent-soft:    #F6E8E4;
  --on-accent:      #FFFFFF;   /* accent 위 6.15 · accent-strong 위 9.01 */

  /* ── 상태 ──
     색만으로 전달하지 않는다. 형태를 함께 바꾼다 — 잠김=실선+면, 에러=실선+soft. */
  --state-locked:   #6B6259;   /*  5.58 /  5.87 /  5.03 */
  --state-locked-bg:#F1EBE0;
  --state-error:    #9A2B36;   /*  7.08 /  7.45 /  6.38 */
  --state-error-bg: #FBEDEE;

  /* ── 성별 표시 ──
     족보의 남계/외손 구분. 색만으로 가르지 않고 기호(♀)를 함께 쓴다. */
  --sex-female:     #7E4B6B;

  /* ── 타이포 ──
     ⚠️ 한글 0자인 서체를 고르는 실패가 byorim01 에서 framer·Stitch 두 번 났다.
     여기 서체는 모두 한글을 담고, 계보 본문은 한자까지 담아야 한다.
     ⚠️ 화면에 찍는 한자는 NFC 형으로 쓴다 — 원문의 호환한자(U+F900~U+FAFF)는
     글리프가 없는 서체가 많아 두부(□)가 된다. 원문은 데이터에만 보존한다. */
  --font-serif: "Noto Serif KR", "Apple SD Gothic Neo", serif;   /* 계보·인명·문헌 */
  --font-sans:  Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-mono:  "SF Mono", ui-monospace, monospace;

  --fs-xs:   0.75rem;   --fs-sm:   0.8125rem;  --fs-base: 0.9375rem;
  --fs-md:   1rem;      --fs-lg:   1.125rem;   --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;   --fs-3xl:  2.25rem;    --fs-display: 2.75rem;

  /* 한자는 획이 많다. 본문보다 한 단 키우고 행간을 넉넉히 준다. */
  --fs-hanja-name: 1.0625rem;
  --fs-hanja-body: 1.0625rem;

  --w-normal: 400;  --w-medium: 500;  --w-bold: 600;
  --lh-tight: 1.25; --lh-snug: 1.45;  --lh-normal: 1.7; --lh-loose: 1.9;
  --tracking-tight: -0.01em;   /* 한글은 −2% 가 실질 한계다 */
  --tracking-normal: 0;
  --measure: 34rem;            /* 문단 최대폭. 컨테이너와 별개다 */

  /* ── 간격 ── 4px 기반 */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;
  --sp-section: clamp(40px, 6vw, 80px);
  --touch: 44px;               /* WCAG 2.5.5 */
  --header-h: 60px;

  /* ── 형태 ── */
  --r-xs: 3px;  --r-sm: 5px;  --r-md: 8px;  --r-lg: 12px;  --r-pill: 999px;

  /* ── 층위 ──
     한지 위의 그림자는 엘리베이션이 아니라 **헤어라인 분리선**이다.
     이름이 뜻을 배신하면 다음 사람이 여기에 층을 쌓는다. */
  --shadow-hairline: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-raised:   0 2px 8px rgba(28, 25, 23, 0.07);
  --shadow-sticky:   0 4px 16px rgba(28, 25, 23, 0.10);

  /* ── 모션 ── */
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ── 레이아웃 ── */
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
}

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

/* 브레이크포인트는 토큰으로 만들지 않는다 — CSS 변수는 미디어 쿼리에서 못 쓴다.
   이 주석이 정본이다:  모바일 <640 · 태블릿 640~959 · 데스크탑 ≥960          */