/* 루마닉 디자인 토큰. 진실원은 루트 DESIGN.md frontmatter이며 이 파일은 그 값을 --lm- 이름으로 옮긴 것이다.
   scripts/build-tokens.mjs가 같은 형식으로 재생성해 diff 0을 확인한다(dv-port-recipe.md §3.1 대응표).
   다른 CSS·HTML·JS에는 hex 리터럴을 두지 않는다. 별칭(alias) 토큰은 만들지 않는다. @font-face는 여기 두지 않는다. */

:root {
  /* 표면. 웜 페이퍼 캔버스 위 흰 문서 표면, 한 단 낮은 보조 표면, 현재 선택 표면 */
  --lm-bg-page: #faf9f6;
  --lm-bg-surface: #ffffff;
  --lm-bg-subtle: #f2f0ec;
  --lm-bg-selected: #e9edf9;

  /* 잉크. muted는 page·surface·subtle·selected 네 배경에서 모두 4.5:1 이상 */
  --lm-text-strong: #14181f;
  --lm-text: #2e3440;
  --lm-text-muted: #636b79;

  /* 선. border는 카드·패널·입력 윤곽, border-strong은 조작 요소, hairline은 카드 안 구획·표 행 */
  --lm-border: #c9c5bb;
  --lm-border-strong: #767d89;
  --lm-hairline: #ddd9d0;

  /* 주 행동 코발트. 한 화면에 채운 버튼 하나 */
  --lm-primary: #2c55e0;
  --lm-primary-hover: #2143c0;
  --lm-primary-pressed: #1c3aa8;
  --lm-on-primary: #ffffff;

  /* 신뢰 네이비. 도움 버튼·도움 카드 경계·로그인 게이트 브랜드 면 */
  --lm-trust: #13294b;
  --lm-trust-soft: #eaeef8;

  /* 관리자 레일(다크 표면 전용). 장병 PWA에서는 쓰지 않는다 */
  --lm-rail-bg: #0f1c31;
  --lm-rail-ink: #c8d2e2;
  --lm-rail-ink-strong: #ffffff;
  --lm-rail-muted: #93a1b8;
  --lm-rail-hover: rgba(255, 255, 255, 0.08);
  --lm-rail-selected: rgba(255, 255, 255, 0.12);
  --lm-rail-line: rgba(255, 255, 255, 0.14);
  --lm-rail-accent: #e8b64c;
  --lm-rail-success: #7ee0b8;
  --lm-rail-danger: #ffb4ac;

  /* 상태색. 주의(확인 필요)·위험(실패·철회)·성공(완료) */
  --lm-warning-accent: #e8a33d;
  --lm-warning-text: #6d4300;
  --lm-warning-surface: #fff5e4;
  --lm-danger: #b42318;
  --lm-danger-surface: #fef0ee;
  --lm-success-text: #0d5b47;
  --lm-success-surface: #e7f4ee;

  /* 포커스 링 두 값. 밝은 표면은 원색, 다크 레일·게이트 면은 72% 혼합. 둘 다 offset 3px */
  --lm-focus: #2c55e0;
  --lm-focus-ring: 3px solid var(--lm-focus);
  --lm-focus-ring-dark: 3px solid color-mix(in srgb, var(--lm-focus) 72%, white);

  /* 오버레이 뒤 스크림, 로딩 자리표시자 */
  --lm-scrim: rgba(11, 35, 71, 0.42);
  --lm-skeleton: #e8e5df;
  --lm-skeleton-sheen: rgba(255, 255, 255, 0.6);

  /* 서체. PWA는 app/fonts.css가 body에서 "Pretendard"(서브셋)로 덮는다 */
  --lm-font-ui: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --lm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 모서리. 8px 하나, 내부 요소 6px, chip·pill만 완전한 원 */
  --lm-radius: 8px;
  --lm-radius-inner: 6px;
  --lm-radius-pill: 999px;

  /* 간격 어휘. 이 밖의 값은 쓰지 않는다 */
  --lm-space-4: 4px;
  --lm-space-8: 8px;
  --lm-space-12: 12px;
  --lm-space-16: 16px;
  --lm-space-20: 20px;
  --lm-space-24: 24px;
  --lm-space-32: 32px;
  --lm-space-48: 48px;

  /* 그림자 세 어휘. 정지 표면에는 그림자가 없다 */
  --lm-shadow-overlay: 0 18px 48px rgba(23, 33, 29, 0.18);
  --lm-shadow-drawer: 12px 0 32px rgba(23, 33, 29, 0.16);
  --lm-shadow-sheet: 0 -12px 32px rgba(23, 33, 29, 0.14);

  /* 관리자 레일 폭. collapsed는 DV 규칙 참조용이며 데스크톱 접힘은 쓰지 않는다 */
  --lm-sidebar-width: 264px;
  --lm-sidebar-collapsed: 72px;

  /* 모션 3종. 색 160ms, 이동 200ms, 스켈레톤 1.2s. 이징 하나 */
  --lm-duration-fast: 160ms;
  --lm-duration: 200ms;
  --lm-duration-skeleton: 1.2s;
  --lm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* 층. bar·scrim은 PWA 앱바·탭바·스크림, 나머지는 관리자 레일·드로어·오버레이 */
  --lm-z-bar: 50;
  --lm-z-scrim: 55;
  --lm-z-sidebar: 60;
  --lm-z-drawer: 70;
  --lm-z-overlay: 90;

  /* PWA 셸 높이 */
  --lm-appbar-height: 52px;
  --lm-tabbar-height: 56px;
  --lm-statusline-height: 28px;
  --lm-safe-bottom: env(safe-area-inset-bottom, 0px);
}