/* /src/styles/tokens.css */
:root {
  /* 1-2. 컬러 시스템 (절대 변경 금지) */
  --color-primary: #4a5e2f;
  --color-secondary: #7a9a3f;
  --color-muted: #c8d4b0;
  --color-surface: #f2f0e8;
  --color-surface-2: #f7f5ee;
  
  --color-text-primary: #2e2e2e;
  --color-text-secondary: #6b6b6b;
  
  --color-reject-bg: #ffe5e5;
  --color-reject-text: #a03030;
  
  /* 소셜 아이덴티티 원본 컬러 */
  --color-kakao-bg: #FEE500;
  --color-naver-bg: #03C75A;

  /* 소셜 버튼 테두리 전용 (투명도 적용) */
  --color-kakao-border: rgba(254, 229, 0, 0.6);
  --color-naver-border: rgba(3, 199, 90, 0.5);
}

/* D-06: 소셜 버튼 컬러 충돌 해결 방안 */
/* 배경을 surface 컬러(#f2f0e8)로 통일하고 테두리만 각 플랫폼의 컬러를 투명도와 함께 사용 */
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-surface); /* 배경 통일 */
  border-radius: 14px;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.05), -4px -4px 10px rgba(255,255,255,0.5);
}

.btn-social-kakao {
  border: 1.5px solid var(--color-kakao-border);
  color: var(--color-text-primary);
}

.btn-social-naver {
  border: 1.5px solid var(--color-naver-border);
  color: var(--color-text-primary);
}