/* ═══════════════════════════════════════════════════════════
   모통 디자인 토큰 (2026-08-27 초안)
   근거: docs/0단계-UI감사-2026-08-27.md — 실측 hex 409회/41종 전수조사
   규칙: 화면 코드는 이 파일의 변수만 사용한다. 새 hex 하드코딩 금지.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── 브랜드: 코랄 (앱 아이콘 주색) ── */
  --coral: #FF7A59;        /* 원색 (로고·강조) */
  --coral-btn: #F2603C;    /* 주 버튼 */
  --coral-press: #DE4F2B;  /* 버튼 눌림 */
  --coral-deep: #B93A17;   /* 그라데이션 끝·고대비 */
  --coral-text: #C7431F;   /* 흰 배경 위 코랄 텍스트 (WCAG AA 4.9:1) — 감사 33회 최다 미토큰 */
  --coral-soft: #FFE4DC;   /* 연한 배경 (선택 상태·경고 박스) */
  --coral-soft2: #FFF1EC;  /* 더 연한 배경 (호버·시안 선택칩) */
  --coral-soft3: #FFF4ED;  /* 최연 배경 — soft와 통합 검토 대상 */

  /* ── 브랜드: 머스타드 ── */
  --mustard: #FFD166;
  --mustard-soft: #FFF7E2; /* 안내·팁 배경 */
  --mustard-text: #8A5D06; /* 머스타드 배경 위 텍스트 */

  /* ── 브랜드: 네이비 ── */
  --navy: #2B2D42;         /* 제목·본문 강조 */
  --navy-btn: #2B2D42;     /* 모달 주 버튼·탭바 */
  --navy-press: #1E1F30;

  /* ── 상태 ── */
  --good: #06B27D;
  --good-soft: #E1F5EE;
  --good-text: #1F7E52;
  --bad: #E63946;
  --bad-soft: #FDEEEE;
  --bad-text: #C43D3D;
  --good-on-dark: #4FD6A0;   /* 어두운(네이비) 배경 위 수입 강조 — 2026-09-01 홈 잔액 수입/지출 색 구분 */
  --expense-on-dark: #FF9576; /* 어두운 배경 위 지출 강조 */

  /* ── 서피스 ── */
  --bg: #F4F3F0;           /* 캔버스 연회색 */
  --card: #FFFFFF;
  --surface2: #F6F5F2;     /* 카드 안 연한 박스 */
  --border: #E6E4DE;       /* 헤어라인 */
  --border-strong: #D8D2C9;/* 진한 보더·구분선 */

  /* ── 텍스트 ── */
  --ink: #2B2D42;          /* 본문 (= navy) */
  --sub: #6C757D;          /* 보조 */
  --steel2: #7A7B88;       /* 리스트 부제 (#6B6E80은 이 값으로 통합) */
  --warmgray: #9A8F85;     /* 웜그레이 보조 */

  /* ── 라운드 ── */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-hero: 30px;
  --r-pill: 999px;

  /* ── 타이포 (화면 폭 연동 베이스 15~18px) ── */
  --base: clamp(15px, 4.2vw, 18px);
  --fs-title: 1.2em;       /* 시트 제목 */
  --fs-question: 1.35em;   /* 스텝 질문 (좌측 정렬 대제목) */
  --fs-amount: 2.1em;      /* 금액 대형 표시 */

  /* ── 바텀시트 (motong-ui 스킬 명세) ── */
  --sheet-radius: 28px;
  --sheet-cta-h: 58px;     /* 하단 고정 CTA 높이 */
  --touch-min: 52px;       /* 최소 터치 타깃 */
  --dim: rgba(43, 45, 66, .55);
}