/* ============================================================
   비전매치 디자인 토큰 (P1, 2026-09-03)
   목적: 파일마다 흩어진 CSS 변수를 하나의 정본으로 통합.
   원칙: ★겉모습 무변경 — 값은 기존 것을 그대로 옮겼다. 이름만 통일.
   방식: 기존 [data-theme="dark"] 토글 유지. :root=라이트 기본.
   하위호환: 파일들이 쓰던 옛 이름(--primary-color, --point-red, --red,
             --bg-app, --bg 등)을 정본 토큰의 별칭으로 남겨 안 깨지게 함.
   이 파일을 다른 CSS보다 먼저 <link> 하면 옛 이름이 정본을 가리킨다.
   ============================================================ */
:root{
  /* ── 정본 토큰 ── */
  /* 브랜드: 흩어져 있던 #ff4b4b/#ff4b5c/#ff6b6b/#ff4d4d 를 하나로.
     라이트 기본값은 index.css 의 --primary-color(#ff4b4b) 를 정본으로 채택. */
  --vm-brand:        #ff4b5c;   /* 가장 많이 쓰인 값(chat/settings/point-red) */
  --vm-brand-strong: #ff3344;
  --vm-brand-weak:   rgba(255,75,92,.08);

  --vm-bg:           #ffffff;   /* 앱 배경 */
  --vm-surface:      #f8f9fa;   /* 카드·패널 */
  --vm-surface-2:    #ffffff;   /* 헤더·버블 */
  --vm-text:         #212529;   /* 본문 */
  --vm-text-sub:     #6c757d;   /* 보조 */
  --vm-line:         #e8eaed;   /* 경계선 */
  --vm-overlay:      rgba(0,0,0,.05);

  /* 상태색 (매칭 성공=그린, 경고, 위험은 브랜드와 구분) */
  --vm-ok:           #2f9e63;
  --vm-warn:         #d9962b;
  --vm-danger:       #e0483c;

  /* 간격·모서리·그림자 (신규 표준 — 점진 적용) */
  --vm-r-sm:6px; --vm-r:12px; --vm-r-lg:18px; --vm-r-pill:999px;
  --vm-gap:12px; --vm-pad:16px;
  --vm-shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);
  --vm-header-h:56px;

  /* ── 하위호환 별칭 (기존 파일이 쓰던 이름 = 정본 매핑) ── */
  --primary-color: var(--vm-brand);
  --primary-hover: var(--vm-brand-strong);
  --point-red:     var(--vm-brand);
  --red:           var(--vm-brand);
  --red-light:     var(--vm-brand-weak);
  --accent:        var(--vm-brand);
  --bg-color:      var(--vm-bg);
  --bg:            var(--vm-bg);
  --bg-app:        var(--vm-bg);
  --bg-chat-main:  var(--vm-surface);
  --card-bg:       var(--vm-surface);
  --header-footer-bg: var(--vm-surface-2);
  --text-color:    var(--vm-text);
  --text-main:     var(--vm-text);
  --text-muted:    var(--vm-text-sub);
  --text-sub:      var(--vm-text-sub);
  --border-color:  var(--vm-line);
  --border:        var(--vm-line);
  --header-h:      var(--vm-header-h);

  /* ── 페이지 고유 변수 흡수 (index/chat, 값 유지) ── */
  --navbar-bg:      rgba(255,255,255,.95);
  --other-bubble-bg: #ffffff;
  --my-bubble-bg:   var(--vm-brand);
  --my-bubble-text: #ffffff;
  --system-msg-bg:  rgba(0,0,0,.05);
  --swiper-pagination-bullet-inactive-color: #ffffff;
}

[data-theme="dark"]{
  /* 정본 다크 (기존 다크값 그대로) */
  --vm-brand:        #ff6b6b;   /* 다크에선 밝은 코랄(index 다크 primary) */
  --vm-brand-strong: #ff4b4b;
  --vm-brand-weak:   rgba(255,75,92,.12);

  --vm-bg:           #121212;
  --vm-surface:      #1e1e1e;
  --vm-surface-2:    #1e1e1e;
  --vm-text:         #e9ecef;
  --vm-text-sub:     #adb5bd;
  --vm-line:         #333333;
  --vm-overlay:      rgba(255,255,255,.08);

  --vm-shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);

  /* 다크는 별칭이 정본을 자동 상속 — 위 :root 별칭이 var() 참조라
     [data-theme="dark"]에서 정본만 바뀌면 별칭도 따라 바뀐다.
     단 chat.css 등이 다크 블록에서 옛 이름을 직접 재정의하던 값은 그대로 살아있다(무변경). */
  --navbar-bg:      rgba(18,18,18,.95);
  --other-bubble-bg: #2a2a2a;
  --system-msg-bg:  rgba(255,255,255,.1);
  --swiper-pagination-bullet-inactive-color: #f5f5f5;

}