/* ============================================================
   Group-PASS — 디자인 토큰 · 관계/증명서 색 구분 원칙 (Single Source of Truth)

   이 파일이 "관계와 증명서를 색으로 구분"하는 공식 원칙이다.
   모든 페이지·컴포넌트(그래프, 카드, 배지, 범례 등)는 아래 토큰을 사용한다.
   ※ JS(예: lib/relation-graph.js, contact.html)에서 쓰는 hex 도 이 값과 반드시 일치시킬 것.

   원칙
   ┌────────────┬──────────────┬──────────┬──────────┐
   │ 구분        │ 의미          │ 메인     │ 진한색    │
   ├────────────┼──────────────┼──────────┼──────────┤
   │ 나(me)      │ 본인/트로피   │ #0A2540  │ #000F22  │ 딥 네이비
   │ 상호 인증    │ 인증된 관계   │ #16A34A  │ #15803D  │ 그린
   │ 대기/초대    │ 미인증/초대   │ #CBD5E1  │ #94A3B8  │ 그레이
   │ 가족증       │ family        │ #3B82F6  │ #1D4ED8  │ 블루
   │ 동호회증     │ club          │ #14B8A6  │ #0F766E  │ 틸
   │ 학급증       │ class         │ #C2410C  │ #9A3412  │ 오렌지
   └────────────┴──────────────┴──────────┴──────────┘
   ============================================================ */
:root {
  /* 관계 */
  --rel-me: #0A2540;        --rel-me-d: #000F22;
  --rel-verified: #16A34A;  --rel-verified-d: #15803D;
  --rel-pending: #CBD5E1;   --rel-pending-d: #94A3B8;

  /* 증명서별 */
  --cert-family: #3B82F6;   --cert-family-d: #1D4ED8;
  --cert-club: #14B8A6;     --cert-club-d: #0F766E;
  --cert-class: #C2410C;    --cert-class-d: #9A3412;

  /* 카드/노드용 그라데이션 (160deg) */
  --grad-me:          linear-gradient(160deg, #0A2540, #000F22);
  --grad-cert-family: linear-gradient(160deg, #3B82F6, #1D4ED8);
  --grad-cert-club:   linear-gradient(160deg, #14B8A6, #0F766E);
  --grad-cert-class:  linear-gradient(160deg, #C2410C, #9A3412);
}

/* 공통 유틸 — 어디서든 색 원칙을 클래스로 바로 사용 */
.tone-me { background: var(--grad-me) !important; color: #fff; }
.tone-family { background: var(--grad-cert-family) !important; color: #fff; }
.tone-club { background: var(--grad-cert-club) !important; color: #fff; }
.tone-class { background: var(--grad-cert-class) !important; color: #fff; }
.dot-me { background: var(--rel-me); }
.dot-verified { background: var(--rel-verified); }
.dot-pending { background: var(--rel-pending); }
.dot-family { background: var(--cert-family); }
.dot-club { background: var(--cert-club); }
.dot-class { background: var(--cert-class); }