/* tokens.css — SHOUTERZ 공식 디자인 가이드 토큰 (방향 3: 소프트 카드)
   ref: design/shoiter-design-guide.md §2 */
/* self-host: Inter(가변) + Noto Sans KR (외부 CDN 의존 제거) */
@font-face{font-family:'Inter';font-weight:400 800;font-style:normal;font-display:swap;src:url('../fonts/inter/Inter-Variable.woff2') format('woff2-variations');}
@font-face{font-family:'Noto Sans KR';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/notokr/NotoSansKR-400.woff2') format('woff2');}
@font-face{font-family:'Noto Sans KR';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/notokr/NotoSansKR-500.woff2') format('woff2');}
@font-face{font-family:'Noto Sans KR';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/notokr/NotoSansKR-700.woff2') format('woff2');}

:root{
  /* ===== Main — Navy (Primary) ===== */
  --navy-900:#162B48;   /* CTA·제목·핵심 금액·로고 */
  --navy-800:#264B7E;   /* Secondary */
  --navy-700:#8DABCC;   /* 보조 톤 */
  --navy-600:#E5EEF9;   /* 히어로/아바타 연한 틴트 */

  /* ===== Point — Cyan (액센트, 절제 사용) ===== */
  --point-text:#0E7C9E; /* ★ UI 액센트: 텍스트·링크·포커스·체크·스텝바·선택 (대비 4.7:1) */
  --point-800:#00AAF5;  /* 브랜드 코어(라이브 값, 토큰 유지) */
  --point-900:#62D7F1;
  --point-bg:#E1F6FE;   /* 포커스 링·아바타 배경 틴트 */

  /* ===== Gray ===== */
  --g-900:#1A1A1A;      /* 본문 텍스트 */
  --g-700:#767676;      /* 보조 텍스트·힌트 */
  --g-600:#A5ABB7;      /* placeholder */
  --g-500:#CCCFD4;      /* 아이콘·비활성 점 */
  --g-400:#DEE1E7;      /* 보더 */
  --g-300:#EAECF0;      /* 비활성 버튼·트랙 */
  --g-200:#F7F8F9;      /* 페이지 배경·서피스 보조 */
  --white:#FFFFFF;

  /* ===== Status (작은 영역 전용: 점·아이콘·테두리·텍스트) ===== */
  --success:#12936A; --success-bg:#E3F4EE;
  --warning:#B7791F; --warning-bg:#FBF1DD;
  --error:#EE3030;   --error-bg:#FDECEC;

  /* ===== Button — CTA 전용 색 (별도 지정, 사용자 요청 #3967a7) ===== */
  --btn:#466DA3; --btn-strong:#3A5A87;

  /* ===== Typography ===== */
  --font-sans:'Inter','Noto Sans KR',system-ui,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;

  /* ===== Radius ===== */
  --r-pill:999px; --r-inp:10px; --r-cta:12px; --r-card:16px; --r-frame:28px;

  /* ===== Shadow (그림자 남용 금지) ===== */
  --sh-card:0 1px 3px rgba(22,43,72,.05);
  --sh-frame:0 12px 36px rgba(22,43,72,.11);
  --sh-modal:0 20px 50px rgba(0,0,0,.25);

  /* ===== Spacing ===== */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px;
}