/* ============================================================
 * Social Radar — Design Tokens (v4 / 2026-05)
 * Source of truth: public/wireframes/design-system.html
 *
 * 변수명은 v3 그대로 유지하면서 값만 새 와이어프레임 톤으로 교체.
 * components.css 의 모든 클래스 (pill-soft-ok / feed-row / risk-meter /
 * health-badge / dash-feed-cta 등) 가 변경 0 으로 신 톤을 입는다.
 *
 * 추가로 와이어프레임이 짧게 부르는 별칭 (--brand / --good / --bad / --pos
 * 등) 도 별도 키로 추가 — 새 페이지/카드는 이 짧은 이름을 직접 써도 된다.
 * ============================================================ */

:root {
  /* ─── Ink (text) ─── 4단 시스템 (v4)
     ink → 본문, ink-2 → 약한 본문/라벨, ink-3 → 보조/플레이스홀더, ink-4 → 디바이더 톤. */
  --ink:        #0b1220;
  --ink-2:      #475569;   /* slate-600 */
  --ink-3:      #94a3b8;   /* slate-400 */
  --ink-4:      #cbd5e1;   /* slate-300 (= --muted-3 별칭) */

  /* v3 호환: --muted/--muted-2/--muted-3 는 --ink-2/3/4 와 동일 톤으로 정렬.
     기존 .muted / .muted-2 / .muted-3 클래스가 그대로 쓰는 톤. */
  --muted:      #475569;   /* = --ink-2 */
  --muted-2:    #94a3b8;   /* = --ink-3 */
  --muted-3:    #cbd5e1;   /* = --ink-4 */

  /* ─── Lines / Borders ─── */
  --line:       #e6e9ef;   /* = --border */
  --line-2:     #eef0f4;   /* = --border-2 */
  --line-soft:  #f7f8f9;
  --border-strong: #d1d5db;

  /* ─── Surfaces ─── */
  --bg:         #f7f8fa;
  --bg-2:       #f3f5f8;   /* = --surface-hover (hover/적용중 톤) */
  --surface:    #ffffff;
  --surface-2:  #fafbfc;

  /* ─── Brand / Accent (인디고) ─── */
  --accent:      #4f46e5;   /* = --brand */
  --accent-ink:  #3730a3;   /* = --brand-deep */
  --accent-soft: #eef0ff;   /* = --brand-soft */

  /* ─── Semantic ─── */
  --ok:         #22b75a;   /* = --good */
  --ok-soft:    #dff5e6;   /* = --good-soft */
  --warn:       #e58726;
  --warn-soft:  #fef3d4;
  --crit:       #e04848;   /* = --bad */
  --crit-soft:  #fce8e8;   /* = --bad-soft */

  /* ─── Categorical (LiveFeed 채널별 srcico 등) ─── */
  --violet:      #7c3aed;
  --violet-soft: #efe8fe;
  --teal:        #0d9488;
  --teal-soft:   #d6f1ee;
  --bolt:        #4f46e5;   /* 디렉터리 카드 아이콘 — 인디고로 정렬 */

  /* ─── Wireframe 별칭 (새 코드는 이 이름을 직접 써도 됨) ───
     기존 변수와 *동일 색* 의 짧은 alias. 둘 중 어떤 이름으로 써도 같은 톤. */
  --brand:       #4f46e5;
  --brand-soft:  #eef0ff;
  --brand-deep:  #3730a3;
  --good:        #22b75a;
  --good-soft:   #dff5e6;
  --bad:         #e04848;
  --bad-soft:    #fce8e8;
  --border:      #e6e9ef;
  --border-2:    #eef0f4;
  --surface-hover: #f3f5f8;

  /* ─── Sentiment chart only (SVG path fill 등) ─── */
  --pos:         #34cf6f;
  --neu:         #cbd5e1;
  --neg:         #ee6464;

  /* ─── Type ───
     v4 는 Pretendard 우선. 한국어 자간/숫자 정렬에 자연. ASCII 는 OS system stack 으로 fallback
     (와이어프레임 realtime-feed.html 과 동일 — Inter 미사용). */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html, body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  letter-spacing: -0.011em;
  /* 와이어프레임 realtime-feed.html 과 정렬: tabular numbers 만.
     옛 cv02/cv03/cv04/cv11 (Inter 전용 character variants) 은 Pretendard 에서
     의미 없고, 인라인 인쇄 차이를 만들 수 있어 제거. */
  font-feature-settings: 'tnum' 1;
}
body {
  background: var(--bg);
  min-height: 100vh;
}