/**
 * 디자인 토큰 — 사이트 전역 CSS 커스텀 프로퍼티.
 * 브랜드 값의 단일 관리 지점: 색/폰트/모션/모양을 여기서만 정의하고
 * 다른 스타일시트는 var()로 참조한다.
 *
 * 폰트 페이스명은 Figma 익스포트가 등록하는 커스텀 페이스
 * ("패밀리:굵기" 형태, 굵기는 페이스에 내장)를 그대로 따른다.
 */
:root {
  /* 색 */
  --zing-red: #ed2228;
  --zing-red-tint-bg: #ffe9ea; /* 레드 계열 배지 배경 */
  --zing-red-tint-border: #ffbcbe; /* 레드 계열 배지 테두리 */
  --zing-red-soft-line: rgba(244, 122, 126, 0.6); /* 레드 배경 위 구분선 */
  --zing-red-focus-ring: rgba(237, 34, 40, 0.12);
  --zing-ink: #111;
  --zing-ink-soft: #374151;
  --zing-ink-muted: #4b5563;
  --zing-gray: #6b7280;
  --zing-gray-faint: #9ca3af;
  --zing-line: #e5e7eb;
  --zing-surface-dim: #f3f4f6;

  /* 폰트 (국문 UI: Noto Sans KR 페이스 / 영문 라벨: Rubik 페이스) */
  --font-kr-regular: "Noto Sans KR:Regular", "Noto Sans KR", sans-serif;
  --font-kr-semibold: "Noto Sans KR:SemiBold", sans-serif;
  --font-kr-bold: "Noto Sans KR:Bold", sans-serif;
  --font-kr-medium: "Noto Sans KR:Medium", sans-serif;
  --font-en-regular: "Rubik:Regular", sans-serif;
  --font-en-medium: "Rubik:Medium", sans-serif;
  --font-en-semibold: "Rubik:SemiBold", sans-serif;

  /* 모션 */
  --ease-soft: ease;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* 모양 */
  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-field: 12px;
  --shadow-floating: 0 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.35);
  --shadow-menu: 0 10px 32px rgba(0, 0, 0, 0.16);
}