/* 디자인 토큰 — 값의 원본은 web/design/*.dc.html (Claude Design 캔버스).
   시안이 바뀌면 여기만 고친다. 컴포넌트는 app.css, 페이지는 값을 직접 쓰지 않는다. */
:root {
  --font-sans: "IBM Plex Sans KR", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --bg: #f6f7f6;
  --surface: #fff;
  --surface-2: #fafbfa;
  --surface-3: #fbfdfc;

  --text: #1b1417;
  --text-2: #4b4145;
  --muted: #8d8286;
  --muted-2: #a2989c;
  --hairline: #cdd4d2;

  --line: #e5e8e7;
  --line-2: #f0f3f2;
  --line-3: #f4f6f5;

  --accent: #1f5d54;
  --accent-hover: #27716e;
  --accent-bg: #eef4f2;
  --accent-line: #cfe0da;
  --accent-dashed: #b7cfc8;

  --sidebar: #142b28;
  --sidebar-on: #2c413e;
  --sidebar-text: rgba(255, 255, 255, .72);
  --sidebar-text-sub: rgba(255, 255, 255, .66);
  --sidebar-text-dim: rgba(255, 255, 255, .52);
  --sidebar-text-faint: rgba(255, 255, 255, .40);
  --sidebar-line: rgba(255, 255, 255, .10);
  --sidebar-logo: #7fbfae;
  --sidebar-live: #4fae86;

  --ok: #2f7a5d;      --ok-bg: #edf6f1;
  --warn: #c0802c;    --warn-bg: #fdf5e8;
  --danger: #c23b3b;  --danger-bg: #fbeded;
  --neutral: #6b6165; --neutral-bg: #f4f0f1;

  --radius-card: 10px;
  --radius-control: 7px;
  --radius-thumb: 6px;
  --radius-pill: 9999px;

  --sidebar-w: 236px;
  --gutter: 30px;
}