/* 디자인 토큰 - 색·글자·간격·모서리·그림자 (#145, docs/11.design-system.md §3)
 *
 * 헥스 색은 이 파일에만 둔다. 쪽과 컴포넌트는 var(--…) 만 쓴다.
 * 두 테마는 light-dark(라이트, 다크) 한 줄로 적는다 - 어느 값이 쓰일지는 color-scheme 이 정한다:
 *   <html>                      시스템 설정을 따른다
 *   <html data-theme="light">   라이트로 고정 (사용자가 골랐거나)
 *   <html data-theme="dark">    다크로 고정 (사용자가 골랐거나, 아직 옮기지 않은 쪽)
 * 스크립트에서 색이 필요하면 getComputedStyle 로 이 변수를 바로 읽지 말고 NW.tokens() 를 쓴다
 * (light-dark() 는 변수 안에서 풀리지 않은 글자 그대로 나온다).
 */
@layer tokens, base, app, components;   /* 순서가 곧 우선순위 - 뒤가 이긴다. 층 밖(쪽 <style>)은 모두를 이긴다 */

@layer tokens {
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

:root {
  /* 바탕·면·선 */
  --bg:            light-dark(#F7F8FA, #0B0D12);
  --bg-subtle:     light-dark(#F1F3F6, #10131A);
  --surface:       light-dark(#FFFFFF, #141821);
  --surface-2:     light-dark(#F5F6F8, #1A1F2A);
  --surface-3:     light-dark(#ECEEF2, #222834);
  --border:        light-dark(#E3E6EB, #262C38);
  --border-strong: light-dark(#CDD2DA, #353D4C);

  /* 글자 */
  --text:          light-dark(#111827, #E7EAF0);
  --text-muted:    light-dark(#4B5563, #A3ACBD);
  --text-subtle:   light-dark(#5F6673, #7F889A);

  /* 강조(브랜드 인디고) */
  --accent:        light-dark(#3B5BDB, #7C93FF);
  --accent-hover:  light-dark(#324FC4, #93A6FF);
  --accent-soft:   light-dark(#EEF2FF, #1D2440);
  --on-accent:     light-dark(#FFFFFF, #0B0D12);
  --focus:         light-dark(rgb(59 91 219 / .40), rgb(124 147 255 / .50));

  /* 의미색 */
  --success:       light-dark(#1A7F4B, #4ADE80);
  --success-soft:  light-dark(#E7F6EE, #12291D);
  --warning:       light-dark(#B45309, #FBBF24);
  --warning-soft:  light-dark(#FEF3E2, #2B2110);
  --danger:        light-dark(#C62828, #F87171);
  --danger-soft:   light-dark(#FDECEC, #2E1517);
  --info:          light-dark(#0E6FA8, #60A5FA);
  --info-soft:     light-dark(#E6F3FB, #13243A);

  /* 개체 유형색 - 그래프·칩·범례가 같이 쓴다 */
  --t-org:         light-dark(#B45309, #FFB454);
  --t-person:      light-dark(#2F5BD3, #6EA8FE);
  --t-industry:    light-dark(#8B3FC9, #C792EA);
  --t-tech:        light-dark(#13803D, #7EE787);
  --t-problem:     light-dark(#C53030, #FF7B72);
  --t-deliv:       light-dark(#BE2A7A, #F778BA);
  --t-other:       light-dark(#64748B, #8791AB);
  --t-extra:       light-dark(#0E7C86, #5CE1E6);
  --t-engagement:  light-dark(#C2334A, #E0525F);   /* 인게이지먼트(프로젝트) 점·문서 유형 킥오프 */
  --t-contract:    light-dark(#C2410C, #FF9D5C);   /* 문서 유형 계약서 */
  /* 공간이 더한 개체 유형 색(#160) - 기본 여섯과 겹치지 않는 여덟 */
  --t-c1: light-dark(#0F766E, #2DD4BF);
  --t-c2: light-dark(#4338CA, #A5B4FC);
  --t-c3: light-dark(#A16207, #FACC15);
  --t-c4: light-dark(#BE123C, #FDA4AF);
  --t-c5: light-dark(#15803D, #86EFAC);
  --t-c6: light-dark(#7E22CE, #D8B4FE);
  --t-c7: light-dark(#0369A1, #7DD3FC);
  --t-c8: light-dark(#9A3412, #FDBA74);
  --ev-mark: light-dark(#FDE047, #854D0E);   /* 근거 보기 판(#226)의 형광펜 - 두 테마 모두 글자가 읽히게 */

  /* 리스크 3단계 */
  --risk-widespread: light-dark(#C53030, #FF6B6B);
  --risk-recurring:  light-dark(#C2410C, #FFA94D);
  --risk-single:     light-dark(#A16207, #FFD43D);

  /* 메신저 화자 8색 (services/doc_render 가 var(--speaker-N) 으로 쓴다) */
  --speaker-1: light-dark(#2F5BD3, #6EA8FE);
  --speaker-2: light-dark(#B45309, #FFB454);
  --speaker-3: light-dark(#13803D, #7EE787);
  --speaker-4: light-dark(#8B3FC9, #C792EA);
  --speaker-5: light-dark(#BE2A7A, #F778BA);
  --speaker-6: light-dark(#0E7C86, #5CE1E6);
  --speaker-7: light-dark(#C53030, #FF7B72);
  --speaker-8: light-dark(#A16207, #FFD43D);

  /* 그림 위에 겹치는 분석 상자(양식 보기 #141) - 흰 슬라이드 그림 위라 테마를 따르지 않는다. 선·채움 색과 글자 색 */
  --overlay-slot:  #E8890C;  --overlay-slot-ink:  #B86A00;
  --overlay-area:  #2FB344;  --overlay-area-ink:  #1B7A2D;
  --overlay-panel: #A45DE0;  --overlay-panel-ink: #7A2FB6;
  --overlay-side:  #1AA6C9;  --overlay-side-ink:  #0F7C97;
  --overlay-ink:   #FFFFFF;
  /* 종이 - 슬라이드·양식 쪽 그림의 바탕(그림이 흰 종이라 테마를 따르지 않는다) */
  --paper:         #FFFFFF;

  /* 구글 로그인 단추 - 구글 브랜딩 규칙의 색(라이트·다크 두 벌)을 그대로 쓴다. 바꾸지 않는다 */
  --gsi-bg:     light-dark(#FFFFFF, #131314);
  --gsi-fg:     light-dark(#1F1F1F, #E3E3E3);
  --gsi-border: light-dark(#747775, #8E918F);

  /* 가림막(모달 뒤) */
  --scrim:         light-dark(rgb(15 23 42 / .40), rgb(0 0 0 / .60));

  /* 글자 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px;
  --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 36px;

  /* 간격 - 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;

  /* 조작 요소 높이 */
  --ctl-sm: 28px; --ctl-md: 32px; --ctl-lg: 40px;
  --topbar-h: 56px;

  /* 모서리 - 네 단계. --r-full 은 배지·아바타·스위치만 */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 999px;

  /* 그림자 - 다크에서는 선이 경계를 맡으므로 옅다 */
  --sh-1: light-dark(0 1px 2px rgb(16 24 40 / .05), 0 0 0 transparent);
  --sh-2: light-dark(0 8px 24px rgb(16 24 40 / .12), 0 8px 24px rgb(0 0 0 / .45));
  --sh-3: light-dark(0 20px 48px rgb(16 24 40 / .18), 0 20px 48px rgb(0 0 0 / .55));

  /* 움직임 */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms; --dur-2: 180ms;

  /* 틀 (#139) */
  --gutter: 32px;
  --page-max: 1440px;

}
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; } }
@media (min-width: 1440px) { :root { --gutter: 48px; } }
@media (max-width: 1023px) { :root { --gutter: 24px; } }
@media (max-width: 639px)  { :root { --gutter: 16px; } }
}