/*
 * VicMind Work 화면 셸(위 막대·왼쪽 레일) 공용 토큰. 값의 정본은 이 파일 하나다.
 * - /chat: web/chat-ui/src/styles/chat.css가 @import로 싣는다(빌드 때 chat.css 안으로 들어간다).
 * - 콘솔 화면(/, /projects, /intakes, /calendar, /privacy…): work-web 서버가 /assets/work-web.css 맨 앞에 이 파일을 그대로 싣는다.
 * 색은 HSL 세 값이고 쓰는 쪽이 hsl(var(--vm-…))로 감싼다. 사진 없는 사람의 이니셜 색만 완성된 색 값이다.
 * 값을 바꾸면 chat-ui를 다시 빌드·배치한다(work-web 시험이 배치된 chat.css와 이 파일 값을 대조한다).
 *
 * 로고색(브랜드) 층(총지휘관 2026-10-20, docs/design/work-web-brand-tokens.md): 로고를 따라 바뀌어야 하는 색은 모두
 * 아래 네 값(--vm-brand-*)에서만 나온다. 새 고객사 워크웹은 이 네 값만 그 로고색으로 바꾼다. 음영 단계(명도 98·95·91·88·82,
 * 짙은 글자 28·26, 초점 고리 +6)는 고정이다. 회색·상태색·사람 이니셜 색은 로고와 무관하게 고정이다.
 */
:root {
  --vm-radius: 0.625rem;
  /* 로고색 바탕 네 값: 로고 주색의 색상(h)·채도(s)·명도(l)와 옅은 음영의 채도(tint-s). VicMind: 숲색 150 34% 26%,
     옅은 음영 채도 28%(예전 레일 활성 148 26% 86% 와 같은 옅은 초록 계열). */
  --vm-brand-h: 150;
  --vm-brand-s: 34%;
  --vm-brand-l: 26%;
  --vm-brand-tint-s: 28%;
  /* 밝은 면(흰색·아주 옅은 회색)과 회색 선, 로고색 강조(활성 자리·배지)와 토스식 연한 주 단추(로고색을 옅게 깐 바탕에 로고색 글자). */
  --vm-background: 0 0% 100%;
  --vm-foreground: 210 11% 15%;
  --vm-card: 0 0% 100%;
  --vm-card-foreground: 210 11% 15%;
  --vm-primary: var(--vm-brand-h) var(--vm-brand-s) var(--vm-brand-l);
  --vm-primary-foreground: 0 0% 100%;
  /* 주 단추(토스식): 색을 짙게 채우지 않고 로고색을 옅게 깐 바탕(soft)에 로고색 글자. hover 는 한 단 짙게. */
  --vm-primary-soft: var(--vm-brand-h) var(--vm-brand-tint-s) 88%;
  --vm-primary-soft-hover: var(--vm-brand-h) var(--vm-brand-tint-s) 82%;
  --vm-secondary: 210 14% 95%;
  --vm-secondary-foreground: 210 11% 15%;
  --vm-muted: 210 14% 96%;
  --vm-muted-foreground: 215 9% 40%;
  --vm-accent: 210 14% 94%;
  --vm-accent-foreground: 210 11% 15%;
  --vm-destructive: 347 86.67% 40%;
  --vm-destructive-foreground: 0 0% 100%;
  --vm-border: 216 12% 89%;
  --vm-input: 216 12% 82%;
  --vm-ring: var(--vm-brand-h) var(--vm-brand-s) calc(var(--vm-brand-l) + 6%);
  /* 사이드바: 옅은 회색 면, 고른 자리(목차 줄)는 주 단추와 같은 옅은 로고색 바탕에 짙은 로고색 글자. */
  --vm-sidebar-background: 210 17% 98%;
  --vm-sidebar-foreground: 210 11% 22%;
  --vm-sidebar-muted-foreground: 215 9% 42%;
  --vm-sidebar-accent: 210 14% 93%;
  --vm-sidebar-active: var(--vm-primary-soft);
  --vm-sidebar-active-foreground: var(--vm-brand-h) var(--vm-brand-s) 28%;
  --vm-sidebar-badge: var(--vm-primary);
  --vm-sidebar-badge-foreground: 0 0% 100%;
  --vm-sidebar-border: 216 12% 89%;
  /* 왼쪽 레일: 로고색을 아주 옅게 깐 면, 올려 두면·활성 메뉴는 한 단씩 짙게, 활성 글자는 짙은 로고색. */
  --vm-rail-background: var(--vm-brand-h) var(--vm-brand-tint-s) 98%;
  --vm-rail-foreground: 210 9% 33%;
  --vm-rail-accent: var(--vm-brand-h) var(--vm-brand-tint-s) 95%;
  --vm-rail-active: var(--vm-brand-h) var(--vm-brand-tint-s) 91%;
  --vm-rail-active-foreground: var(--vm-brand-h) var(--vm-brand-s) 26%;
  /* 위 막대와 업무 공간 표시. 배지에는 로고 그림이 앉으므로 바탕은 레일과 같은 아주 옅은 로고색이다. */
  --vm-topbar-background: 0 0% 100%;
  --vm-workspace-badge: var(--vm-rail-background);
  --vm-workspace-badge-foreground: var(--vm-primary);
  --vm-pinned-background: 210 17% 98%;
  /* 셸 치수. 위 막대 48px(채팅 설계 패키지 layout.topbar, /chat single 배치도 같은 48). 업무 공간 배지는 처음 크기(2rem 배지·0.875rem 글자)의 1.3배, 이름은 아래 1.15rem 이다. */
  --vm-topbar-height: 3rem;
  --vm-rail-width: 4.5rem;
  --vm-workspace-width: 20rem;
  --vm-badge-size: 2.6rem;
  --vm-badge-radius: 0.8125rem;
  --vm-badge-font-size: 1.1375rem;
  /* 업무 공간 이름은 1.15rem·굵기 600(총지휘관 2026-10-20, 처음 1rem 의 1.15배). */
  --vm-workspace-name-size: 1.15rem;
  /* 사진 없는 사람의 이니셜 색(이름 해시로 하나를 고른다). */
  --vm-avatar-0: oklch(62.3% 0.214 259.815);
  --vm-avatar-0-foreground: #fff;
  --vm-avatar-1: oklch(59.6% 0.145 163.225);
  --vm-avatar-1-foreground: #fff;
  --vm-avatar-2: oklch(82.8% 0.189 84.429);
  --vm-avatar-2-foreground: oklch(27.9% 0.077 45.635);
  --vm-avatar-3: oklch(64.5% 0.246 16.439);
  --vm-avatar-3-foreground: #fff;
  --vm-avatar-4: oklch(78.9% 0.154 211.53);
  --vm-avatar-4-foreground: oklch(30.2% 0.056 229.695);
  --vm-avatar-5: oklch(60.6% 0.25 292.717);
  --vm-avatar-5-foreground: #fff;
  --vm-avatar-6: oklch(70.5% 0.213 47.604);
  --vm-avatar-6-foreground: #fff;
}