/* ==========================================================================
   tokens.css — 디자인 값은 이 파일에만 둡니다.
   색·글꼴·크기·모서리를 여기서 바꾸면 사이트 전체가 바뀝니다.
   다른 CSS 파일에는 색상 코드(#...)를 직접 쓰지 않습니다.
   시안 D: 네이비 + 캐나다 레드
   ========================================================================== */
:root {
  /* 브랜드 */
  --c-main:        #0F1E3D;   /* 네이비: 제목, 주요 버튼, 번호 */
  --c-main-hover:  #1B2E57;
  --c-point:       #D52B1E;   /* 캐나다 레드: 상단 띠, 로고 아이콘, 현재 단계, 고객이 할 일 (5% 이하로) */
  --c-point-soft:  #FCEDEC;

  /* 바탕과 선 */
  --c-bg:          #F4F5F8;
  --c-surface:     #FFFFFF;
  --c-line:        #E1E4EB;
  --c-field:       #CDD3DE;   /* 입력칸 테두리 */
  --c-chip:        #E7EAF1;   /* 상태 배지 바탕 */

  /* 글자 */
  --c-text:        #0F1E3D;
  --c-text-2:      #3A4258;
  --c-muted:       #5A6480;
  --c-faint:       #8C93A3;
  --c-on-main:     #FFFFFF;

  /* 알림 (빨강은 브랜드색이므로 오류는 주황) */
  --c-warn:        #9A4A06;
  --c-warn-bg:     #FDF3E4;
  --c-ok:          #1F5E3D;
  --c-ok-bg:       #EAF5EE;

  /* 글꼴 */
  --font: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 19px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* 모양 */
  --radius-card: 20px;
  --radius-field: 12px;
  --radius-btn: 14px;
  --radius-pill: 999px;
  --h-field: 54px;
  --h-btn: 56px;
  --shadow-pop: 0 12px 32px rgba(15, 30, 61, .14);
  --focus: 0 0 0 3px rgba(15, 30, 61, .22);

  /* 레이아웃 */
  --container: 1120px;
  --container-narrow: 600px;
  --gap-page: 20px;
}