/* ==========================================================================
   Bandiro — 디자인 토큰
   모든 색·크기·모션 값의 단일 출처. 컴포넌트 CSS는 여기 정의된 변수만 쓴다.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- 잉크 (전경) ---------------------------------------------------- */
  --ink:         #1c1a17;  /* 본문·제목 */
  --ink-2:       #57524a;  /* 보조 텍스트 */
  --ink-3:       #8b8478;  /* 힌트·메타 */
  --ink-on-fill: #fbfaf8;  /* 어두운 배경 위 글자 */

  /* ---- 표면 (배경) ---------------------------------------------------- */
  --canvas:      #f4f2ed;  /* 페이지 바탕 */
  --surface:     #ffffff;  /* 카드·패널 */
  --surface-2:   #faf9f6;  /* 사이드 패널 */
  --surface-3:   #efece4;  /* 선택·hover */
  --surface-sunken: #f0ede6;

  /* ---- 선 ------------------------------------------------------------- */
  --line:        #e4e0d6;
  --line-soft:   #f0ede5;
  --line-strong: #cfc9bb;

  /* ---- 강조 ----------------------------------------------------------- */
  --accent:      #1c1a17;  /* primary 액션 = 잉크 */
  --accent-hover:#3a3630;
  --focus:       #3a689b;  /* 포커스 링 */

  /* AI 전용 (잉크 블루 — 만년필 잉크) — 링크와 절대 겹치지 않는다 */
  --ai:          #3a689b;
  --ai-strong:   #2b537f;
  --ai-soft:     #eef4fa;
  --ai-line:     #ccdcec;

  /* 링크 (AI와 분리된 색) */
  --link:        #2c6b66;
  --link-hover:  #1f504c;

  /* ---- 의미색 (종이톤에 맞춰 채도 낮춤) -------------------------------- */
  --ok:        #3f7d54;  --ok-soft:     #ecf4ee;  --ok-line:     #c9e0d1;
  --warn:      #9a6a26;  --warn-soft:   #fbf4e7;  --warn-line:   #ecdcbe;
  --danger:    #a4453a;  --danger-soft: #fbeeec;  --danger-line: #ebcfca;

  /* ---- 타이포 --------------------------------------------------------- */
  --font-ui: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
             system-ui, "Apple SD Gothic Neo", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  --font-prose: "Nanum Myeongjo", "Apple SD Gothic Neo", "Noto Serif KR",
                Georgia, "Times New Roman", serif;
  --font-brand: "Nanum Myeongjo", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 7단계 스케일 — 그 사이 값은 쓰지 않는다 */
  --fs-2xs:  0.6875rem; /* 11 — 뱃지 */
  --fs-xs:   0.75rem;   /* 12 — 메타 */
  --fs-sm:   0.8125rem; /* 13 — 보조 UI */
  --fs-md:   0.875rem;  /* 14 — UI 기본 */
  --fs-lg:   1rem;      /* 16 — 소제목 */
  --fs-xl:   1.25rem;   /* 20 — 제목 */
  --fs-2xl:  1.625rem;  /* 26 — 페이지 제목 */
  --fs-prose:1.0625rem; /* 17 — 원고 본문 */

  --lh-tight: 1.35;
  --lh-ui:    1.55;
  --lh-prose: 1.9;

  /* ---- 형태 ----------------------------------------------------------- */
  --r-sm:   5px;
  --r:      8px;
  --r-lg:   12px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(28, 26, 23, 0.05);
  --sh-2: 0 2px 8px rgba(28, 26, 23, 0.07), 0 1px 2px rgba(28, 26, 23, 0.05);
  --sh-3: 0 12px 32px rgba(28, 26, 23, 0.14), 0 2px 8px rgba(28, 26, 23, 0.06);
  --scrim: rgba(28, 26, 23, 0.4);

  /* ---- 모션 ----------------------------------------------------------- */
  --t:      120ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-slow: 220ms cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- 치수 ----------------------------------------------------------- */
  --topbar-h: 52px;
  /* 원고 한 줄 길이 상한 (한글 약 34자 = 17px × 34).
     em을 쓰면 요소별 폰트 크기로 계산돼 원고(17px)와 생성바(14px)의 폭이 어긋난다. */
  --measure:  36.125rem;
  --pane-tree: 264px;
  --pane-chat: 380px;
}

/* ==========================================================================
   다크 테마 — 야간 집필 모드
   토큰만 갈아끼우면 되도록 설계했다. 컴포넌트 CSS는 손대지 않는다.
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  --ink:         #e9e5dd;
  --ink-2:       #a7a096;
  --ink-3:       #7a736b;
  --ink-on-fill: #171613;

  --canvas:      #16150f;
  --surface:     #1e1d19;
  --surface-2:   #1a1915;
  --surface-3:   #2b2924;
  --surface-sunken: #131210;

  --line:        #322f2a;
  --line-soft:   #262420;
  --line-strong: #45413a;

  --accent:      #e9e5dd;
  --accent-hover:#fffcf5;
  --focus:       #7fa9d8;

  --ai:          #7fa9d8;
  --ai-strong:   #a3c4e8;
  --ai-soft:     #19222e;
  --ai-line:     #2d4157;

  --link:        #7fbdb5;
  --link-hover:  #9fd4cc;

  --ok:     #74b389;  --ok-soft:     #1a2620;  --ok-line:     #2f4536;
  --warn:   #d2a765;  --warn-soft:   #292217;  --warn-line:   #4b3c23;
  --danger: #dd8b7b;  --danger-soft: #2c1f1c;  --danger-line: #4f3229;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-2: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-3: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
  --scrim: rgba(0, 0, 0, 0.55);
}

/* 다크에서 primary 버튼은 밝은 면 — 그림자를 지운다 */
:root[data-theme="dark"] .btn-primary { box-shadow: none; }
:root[data-theme="dark"] .btn-danger { background: var(--danger); border-color: var(--danger); color: #2a1a16; }

@media (prefers-reduced-motion: reduce) {
  :root { --t: 1ms; --t-slow: 1ms; }
}