/* ============================================================
   연담 아뜰리에 — 디자인 토큰 (사본)
   YEONDAM ATELIER Design Tokens

   ⚠️ 정본은 `2. 설계/연담-design-system/tokens.css` — 여기를 고치지 말 것.
   이 파일은 정본의 단방향 복사본이다(W001). 값 변경은 정본에서 하고
   여기로 다시 복사한다. 컴포넌트는 var() 참조만 한다. (프로젝트 헌법 V)

   출처: 0. 자료/연담아뜰리에/ 라벨·엠블럼 6종 픽셀 실측 (2026-08-12)
         지배색 양자화 + HSV 버킷 클러스터링으로 추출 → 접근성 미달분만 명도 보정
   구조·규율: 기술연구소/디자인/opusm-design-system 상속 (값은 상속하지 않음)

   버전 0.3.0 · 2026-08-20 (v3 — 반응형·터치·상태·레이아웃 신설)
     0.2.0 2026-08-12 서체 확정
     0.3.0 2026-08-20 헌법 XI(반응형·현장) 대응. 오퍼스엠 시스템에 반응형·터치
           규정이 없어(폴더 전수 확인) 이 영역은 연담이 원본이다.
           신설: Layout/Breakpoint · Touch · State · --text-base(16px 본문)
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ── Colour ────────────────────────────────────────────────
     light-dark(라이트, 다크). 주석의 대비는 각 모드 paper 기준 실측 계산값.
     실측 원색: 먹남색 #2d3948 · 금색 #b79a71 · 낙관적색 #ac4639
                연분홍 #f0d5ca · 연잎녹 #566962 · 한지백 #fcf7f3        */

  /* 바탕 — 한지(韓紙). 순백이 아니라 미색이 도는 종이다 */
  --color-paper:    light-dark(#fcf7f3, #1c2229);  /* 실측 지배색 15.98% */
  --color-paper-2:  light-dark(#f6f0e8, #232a33);
  --color-paper-3:  light-dark(#efe8dd, #2b333d);  /* 표면 단계는 여기까지. 3단 초과 금지 */

  /* 선 — 장식 괘선 */
  --color-rule:     light-dark(#e2d9cc, #343d48);
  --color-rule-2:   light-dark(#cdbfad, #45505e);

  /* 잉크 — 먹남색. 라벨의 '연담' 글자에서 실측 */
  --color-ink:      light-dark(#2d3948, #f3ede4);  /* 11.02:1 / 13.77:1 */
  --color-ink-2:    light-dark(#4a5563, #ded5c9);  /*  7.12:1 */
  --color-muted:    light-dark(#6b6459, #a89f92);  /*  5.49:1 /  6.14:1 */

  /* 강조 — 낙관(落款) 인장의 주홍. 유일한 강조색이다.
     금색은 대비 2.51:1로 텍스트에 쓸 수 없어 장식 전용으로 분리했다. */
  --color-accent:        light-dark(#ac4639, #d98a78);  /* 5.35:1 / 6.00:1 */
  --color-accent-strong: light-dark(#8d3a2f, #e8a493);  /* 7.10:1  hover/active */
  --color-accent-ink:    light-dark(#fcf7f3, #1c2229);  /* on accent */
  --color-accent-bg:     light-dark(#f7e6e1, #3a2723);  /* 연한 배지/틴트 */
  --color-focus:         light-dark(#ac4639, #d98a78);  /* 포커스 링 5.35:1 ≥ 3:1 */

  /* 금 — 테두리·괘선·엠블럼 전용. 텍스트 금지.
     비텍스트 대비 3:1 을 만족하도록 명도만 보정(#b79a71 → #a58b66). */
  --color-gold:      light-dark(#a58b66, #c9ab80);  /* 3.04:1 / 7.34:1 */
  --color-gold-soft: light-dark(#d8c6a8, #6d5c42);  /* 장식 괘선 */

  /* 자연물 — 일러스트·차트 데이터 계열 전용. UI 강조로 승격 금지 */
  --color-lotus:  light-dark(#e8b6a8, #b8796a);  /* 연꽃 분홍 */
  --color-leaf:   light-dark(#566962, #8fa197);  /* 연잎 녹 */

  /* 상태 — 강조색(적색)과 혼동되지 않도록 danger 는 채도를 낮춰 분리 */
  --color-success: light-dark(#3f6b52, #86b79b);
  --color-warning: light-dark(#8a6a24, #d4ae5e);
  --color-danger:  light-dark(#8f2f2f, #e08b8b);

  /* ── Type ──────────────────────────────────────────────────
     제목은 명조/세리프. 라벨의 '연담'과 'YEONDAM ATELIER'가 모두 세리프이고,
     이것이 오퍼스엠(단일 산세리프)과 갈리는 지점이다.
     본문은 가독성을 위해 Pretendard 유지.

     ★ 라벨은 AI 생성 이미지라 원본 서체가 존재하지 않는다(2026-08-12 확인).
       아래는 라벨의 인상에 맞춰 고른 것이지 '복원'이 아니다. 근거는 design.md Provenance.
       Cormorant Garamond = 라틴(고대비 세리프, 자간 넓은 대문자에 적합, OFL)
       Noto Serif KR      = 국문(본명조 계열, 7 weight 로 위계 확보, OFL)             */
  --font-display: "Cormorant Garamond", "Noto Serif KR", ui-serif, Georgia, serif;
  --font-body:    "Pretendard Variable", Pretendard, -apple-system,
                  system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "D2Coding", ui-monospace, Menlo, monospace;

  /* Cormorant 는 x-height 가 작아 한글과 한 줄에 섞이면 라틴이 작아 보인다.
     한 줄에 국·영문이 함께 오는 제목에는 아래 보정을 쓴다. (design.md §Type 참조) */
  --display-latin-scale: 1.12;

  --display-weight: 700;   /* Cormorant 300~700 · Noto Serif KR 200~900 공통 범위 안 */
  --heading-weight: 600;
  --body-weight:    400;

  --text-display:   clamp(2rem, 3.2vw + 0.8rem, 3rem);
  --text-display-s: clamp(1.625rem, 2vw + 0.75rem, 2.25rem);
  --text-3xl: 1.5rem;
  --text-2xl: 1.25rem;
  --text-lg:  1.0625rem;

  /* ★ 본문 기준 (v0.3.0 신설) — 헌법 XI-4 "본문 16px 이상".
     사용자에 연장자가 포함되고, 양조장에서 젖은 손·먼 거리로 본다.
     ⚠️ v1 은 body 에 --text-md(15px)를 썼다. 그 값을 본문에 쓰지 않는다. */
  --text-base: 1rem;      /* 16px — body 기본 */

  --text-md:  0.9375rem;  /* 15px — 표·메타·캡션 등 밀도가 필요한 곳 전용 */
  --text-sm:  0.875rem;
  --text-xs:  0.8125rem;

  /* 한글 본문 1.7 이상 — 오퍼스엠 Hard rule 6 상속 */
  --leading-body:    1.75;
  --leading-heading: 1.35;
  --tracking-display: 0.02em;   /* 명조 제목은 살짝 벌린다 */

  /* ── Space ─────────────────────────────────────────────────
     4pt 그리드. 벗어난 값 금지 (오퍼스엠 규율 상속)               */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;

  /* ── Radius ────────────────────────────────────────────────
     라벨의 아치(상단만 둥근 형태)에서 왔다.                        */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-arch: 999px 999px 8px 8px;  /* 아치형 — 히어로·카드 상단 */

  /* ── Border ────────────────────────────────────────────────
     라벨의 이중 금선(외곽 + 내곽)이 브랜드 시그니처다.              */
  --border-hairline: 1px;
  --border-frame:    2px;

  /* ── Elevation ─────────────────────────────────────────────
     종이 위 종이. 그림자는 거의 쓰지 않는다.                       */
  --shadow-sm: 0 1px 2px light-dark(rgb(45 57 72 / 6%), rgb(0 0 0 / 30%));
  --shadow-md: 0 2px 8px light-dark(rgb(45 57 72 / 8%), rgb(0 0 0 / 40%));

  /* ── Layout · Breakpoint ───────────────────────────────────
     v0.3.0 신설. 헌법 XI. 오퍼스엠 시스템에 규정이 없어 연담이 원본이다.

     ⚠️ 이 값들은 **기록용**이다. CSS 변수는 @media 안에서 평가되지 않으므로
        미디어 쿼리에는 리터럴을 쓴다. 값을 바꾸면 두 곳을 함께 고쳐야 한다.
        (검사기 G5·G16 은 색 hex 와 font-size 만 보므로 리터럴이 걸리지 않는다.)

     모바일 퍼스트다. 기본 스타일이 좁은 화면용이고, 넓어질 때 얹는다.
     양조장에서 폰으로 쓰는 것이 기본이고 책상이 예외다.                */
  --bp-wide: 48rem;   /* 768px — 표가 표로 살아남는 하한. 태블릿·가로 폰 */
  --bp-desk: 64rem;   /* 1024px — 2열 레이아웃 */
  --vp-min:  360px;   /* 지원 하한 폭. 이보다 좁은 기기는 대상 밖(2026-08-20 확정) */

  --layout-max: 72rem;                        /* 콘텐츠 컨테이너 상한 */
  --measure:    38rem;                        /* 산문 최대폭 — 긴 고지문 */
  --gutter:     clamp(1rem, 4vw, 2rem);       /* 좌우 여백 — 유동 */
  --section-gap: clamp(1.5rem, 4vw, 3rem);

  /* 하단 고정 조작줄이 홈 인디케이터에 가리지 않게 한다 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ── Touch ─────────────────────────────────────────────────
     v0.3.0 신설. v1 코드에 44px 이 하드코딩돼 있었으나 **규정이 없었다.**
     값이 옳아도 근거가 없으면 무너진다 — 여기서 근거를 만든다.        */
  --touch-min: 44px;    /* 탭 대상 최소 변. 헌법 XI-2 */
  --touch-gap: 0.5rem;  /* 인접 탭 대상 사이 최소 간격 — 오탭 방지 */

  /* 표를 표로 유지할 수 있는 열 수 상한 (design.md §Responsive 참조).
     초과분은 접거나 상세로 보낸다. 값은 문서 규칙이고 CSS 가 읽지 않는다. */
  --table-cols-max: 6;

  /* ── State ─────────────────────────────────────────────────
     v0.3.0 신설. 인터랙티브 요소 8상태(design.md §States).
     상태는 클래스 폭증 대신 [data-state]·의사클래스로 표현한다.        */
  --state-disabled-opacity: 0.45;
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  /* ── Motion ────────────────────────────────────────────────
     transform / opacity 만. 레이아웃 속성 애니메이션 금지.          */
  --ease: cubic-bezier(0.2, 0, 0.13, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
}

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