/* 디자인 토큰 — T011
 *
 * 출처: `F:\mylink-Design\design-system\linkbiz\rules\tokens.md` 실측값.
 * **임의 색상 금지**(tokens.md 첫 줄 규칙). 새 색이 필요하면 토큰을 먼저 늘린다.
 *
 * 다크모드는 `body.theme-dark` 로 켠다(저장소 공통 규약 — CLAUDE.md 디자인 절).
 * 토큰은 :root 에 정의하고 다크에서 **역할 값만** 바꾼다 — 팔레트(color01~) 자체는 같다.
 */

:root {
  /* 브랜드·액션 */
  --brand: #5629ee;          /* Button info — 저장·등록 등 주요 액션 */
  --brand-strong: #01042f;   /* Button primary — 새 문서 생성 */
  --success: #23cf3a;
  --warning: #fac60a;
  --danger: #ff6a00;

  /* 텍스트 */
  --text: #101010;           /* color-black1 */
  --text-2: #303030;         /* color-black2 */
  --muted: #606060;          /* color-gray1 */
  --muted-2: #909090;        /* color-gray2 */
  --line: #e8e8e8;           /* color-gray5 */
  --line-2: #bcbcbc;         /* color-gray4 */
  --link: #1e88e5;           /* color-blue1 */
  --accept: #0084f3;
  --fail: #f34444;

  /* 면 */
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --shadow: 0 1px 3px rgba(16, 16, 16, .08);

  /* 상태 팔레트 — Label/Signal/Badge 공용 번호 체계 */
  --color01: #f10f3a;  /* 삭제·반려·지연 */
  --color02: #ff6a00;  /* 사용정지 */
  --color03: #fdc23e;  /* 일시정지·검토 */
  --color04: #75d701;  /* 결재완료 */
  --color05: #3fc495;  /* 완료 */
  --color06: #32c4c0;
  --color07: #22d6dd;  /* Working */
  --color08: #a38af7;
  --color09: #8364e8;  /* 등록·승인·요청 */
  /* ★ color09 를 어둡게 한 것 — **작은 글자를 얹는 배경**에만 쓴다(2026-09-10 결정).
   * 흰 글자 on #8364e8 은 4.24:1 로 WCAG AA(11px 글자 4.5:1)에 못 미쳤다. 같은 보라 계열에서
   * 가장 가까운 값으로 어둡게 잡아 시각 변화를 줄였다 — 흰 글자 on #7554e0 = **5.12:1**.
   * `tokens.css` 규칙("임의 색상 금지 — 새 색이 필요하면 토큰을 먼저 늘린다")에 따른 추가이며,
   * 디자인 정본(`F:\mylink-Design\design-system\linkbiz\rules\tokens.md`)에도 같은 항목이 필요하다. */
  --color09-aa: #7554e0;
  /* ★ color01 을 어둡게 한 것 — REJECTED 배경에 흰 글자를 얹을 때 쓴다.
   * #f10f3a 는 흰 글자 4.31:1 · 어두운 글자 4.41:1 로 **양쪽 다 미달**이라 색을 어둡게 할 수밖에 없다.
   * #c20a2e 는 이 저장소의 접근성 보정(eem·eec shim)이 이미 쓰는 빨강이다 — 흰 글자 6.22:1. */
  --color01-aa: #c20a2e;

  /* 치수 */
  --gnb-h: 52px;
  --lnb-w: 224px;
  --ctx-h: 44px;
  --radius: 6px;
  --radius-sm: 4px;
  --font: "Malgun Gothic", "맑은 고딕", -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, "D2Coding", monospace;
}

body.theme-dark {
  --text: #eceff4;
  --text-2: #d8dee9;
  --muted: #a8b0bd;
  --muted-2: #7c8698;
  --line: #2b3140;
  --line-2: #3b4354;
  --bg: #14171f;
  --surface: #1b1f29;
  --surface-2: #212633;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5);
  --link: #6ab5f5;
}

/* 업무 상태 → 팔레트 매핑. 상태 문자열을 화면마다 색으로 번역하지 않게 한 곳에 둔다.
 * 상태 값은 services/food/states.js 의 STATES 와 같아야 한다. */
.lbz-state { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; color: #fff; white-space: nowrap; }
.lbz-state[data-state="DRAFT"]      { background: var(--muted-2); color: var(--text); }   /* 밝은 회색 — 어두운 글자 5.96:1 */
.lbz-state[data-state="IN_REVIEW"]  { background: var(--color03); color: var(--text); }
.lbz-state[data-state="APPROVED"]   { background: var(--color09-aa); }   /* 작은 글자 대비 — AA */
.lbz-state[data-state="RELEASED"]   { background: var(--color05); color: var(--text); }   /* 밝은 민트 — 어두운 글자 8.65:1 */
.lbz-state[data-state="SUPERSEDED"] { background: var(--muted); }
.lbz-state[data-state="REJECTED"]   { background: var(--color01-aa); }                    /* 흰 글자 6.22:1 */
.lbz-state[data-state="CANCELLED"]  { background: var(--line-2); color: var(--text-2); }

/* 권한 레벨 표시 — R 조회 < C 편집 < A 관리 */
.lbz-lv { font-size: 11px; color: var(--muted-2); border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; }