/* ──────────────────────────────────────────────────────────────
 * 🎨 디자인 토큰 (2026-05-07) — 시각 격차 1단계
 * ──────────────────────────────────────────────────────────────
 *
 * 신예린 (그래픽팀장) 지적: '일반 라이트 + 인디고 vs expert 다크 + 보라'
 * 로 두 모드의 톤이 따로 놀고 있음. 디자인 시스템 변수 도입으로
 * 점진적 통일.
 *
 * 사용 원칙:
 *   - 신규 컴포넌트는 토큰 사용 (예: var(--md-mint))
 *   - 기존 인라인 스타일은 그대로 둠 (광범위 리팩터 회피)
 *   - 점진적으로 인라인 → 토큰 으로 마이그레이션
 *
 * 카테고리:
 *   1) 브랜드 색상   — 모비딕 시그니처 (민트/틸/시안)
 *   2) 모드 액센트   — 자동/자유 모드 시각 분리
 *   3) 시맨틱 색상   — 성공·경고·에러 (가드·배지 공통)
 * ────────────────────────────────────────────────────────────── */

:root {
  /* ===== 0) 연구소 톤 — 2026-06-09 (PD 결정) ===== */
  /* 모비딕 연구소 홈페이지 (mobydick-hub :9000) 색감 적용. 라이트 + 페이퍼·바다 */
  --research-deep:   #072033;  /* 가장 진한 네이비, 본문 헤딩 */
  --research-ocean:  #0d4d6b;  /* 메인 강조, 버튼·링크 */
  --research-teal:   #178a9c;  /* 액센트 1, 호버 */
  --research-aqua:   #46c8cf;  /* 액센트 2, 밝은 청록 */
  --research-foam:   #eef7f8;  /* 밝은 청록 배경 */
  --research-sand:   #f7f5ef;  /* 메인 배경, 따뜻한 베이지 */
  --research-paper:  #fcfbf7;  /* 가장 밝은 종이 */
  --research-ink:    #0e2330;  /* 본문 텍스트 */
  --research-muted:  #5a7384;  /* 부드러운 글자 */
  --research-faint:  #8499a6;  /* 가장 흐린 글자 */
  --research-line:   #e2e9ec;  /* 라인 1 */
  --research-line2:  #d4dee2;  /* 라인 2 */
  --research-sh1:    0 1px 2px rgba(7,32,51,.04), 0 8px 24px -12px rgba(7,32,51,.18);
  --research-sh2:    0 2px 4px rgba(7,32,51,.05), 0 24px 60px -24px rgba(7,32,51,.32);
  --research-r:      22px;     /* 둥근 모서리 */
  --research-font:   "IBM Plex Sans KR", "Noto Sans KR", sans-serif;
  --research-serif:  "Gowun Batang", "IBM Plex Sans KR", serif;

  /* ===== 1) 브랜드 색상 — 모비딕 시그니처 ===== */
  --md-mint: #3EC2B5;          /* primary mint */
  --md-teal: #1A7A6F;          /* deep teal */
  --md-cyan-tint: #E8F7F5;     /* soft cyan tint */

  /* ===== 2) 모드 액센트 — 두 모드 시각 분리 ===== */
  --mode-auto: #60a5fa;        /* 🤖 자동 모드 (regular) — 블루 */
  --mode-auto-bg: rgba(96,165,250,0.18);
  --mode-auto-border: rgba(96,165,250,0.4);

  --mode-free: #a78bfa;        /* 🎨 자유 모드 (expert) — 보라 */
  --mode-free-bg: rgba(168,85,247,0.18);
  --mode-free-border: rgba(168,85,247,0.4);

  /* ===== 3) 시맨틱 색상 — 가드·배지 공통 ===== */
  --status-pass: #10b981;       /* 통과·완료 */
  --status-pass-bg: rgba(16,185,129,0.18);
  --status-pass-border: rgba(16,185,129,0.4);

  --status-warn: #fb923c;       /* 주의·일시정지 */
  --status-warn-bg: rgba(251,146,60,0.18);
  --status-warn-border: rgba(251,146,60,0.4);

  --status-fail: #f87171;       /* 실패·에러 */
  --status-fail-bg: rgba(239,68,68,0.18);
  --status-fail-border: rgba(239,68,68,0.4);

  --status-info: #34d399;       /* 회수·되돌리기 */
  --status-info-bg: rgba(34,197,94,0.18);
  --status-info-border: rgba(34,197,94,0.45);
}

/* ===== 토큰 기반 헬퍼 클래스 (선택 사용) ===== */
.tk-mode-auto { background: var(--mode-auto-bg); color: var(--mode-auto); border: 1px solid var(--mode-auto-border); }
.tk-mode-free { background: var(--mode-free-bg); color: var(--mode-free); border: 1px solid var(--mode-free-border); }
.tk-status-pass { background: var(--status-pass-bg); color: var(--status-pass); border: 1px solid var(--status-pass-border); }
.tk-status-warn { background: var(--status-warn-bg); color: var(--status-warn); border: 1px solid var(--status-warn-border); }
.tk-status-fail { background: var(--status-fail-bg); color: var(--status-fail); border: 1px solid var(--status-fail-border); }