/* tokens.css — 디자인 토큰(색·간격·타이포·모서리·그림자) 한 곳에서 관리.
   관리 화면(index/login)·지점 입력앱(entry) 3화면이 이 파일 하나를 공유한다(2026-07-21 추사, 전면 리프레시).
   Pretendard는 로컬 파일로 서빙(fonts/*.woff2, SIL OFL 무료 라이선스, fonts/LICENSE.txt) — 외부 CDN 요청 없음, 오프라인에서도 깨지지 않는다.
   원칙: 강조색 파랑 하나 + 중립 회색 스케일. 화면마다 "크기"만 다르게 쓴다(관리=조밀, 입력앱=크게) — benchmark_UI.md §4. */

@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* 폰트 — 로컬 Pretendard 우선, 실패해도 시스템 한글 폰트로 자연스럽게 대체 */
  --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;

  /* 중립 회색 스케일 (토스류 — 흰/회/검 위에 강조색 하나) */
  --gray-50:  #f7f8fa;
  --gray-100: #f0f2f5;
  --gray-200: #e5e8eb;
  --gray-300: #d1d6db;
  --gray-400: #b0b8c1;
  --gray-500: #8b95a1;
  --gray-600: #6b7684;
  --gray-700: #4e5968;
  --gray-800: #333d4b;
  --gray-900: #191f28;

  /* 강조색 — 기존 파랑 계열 유지(브랜드 재정의 아님), 톤 단계만 추가 */
  --blue-50:  #eef4ff;
  --blue-100: #dce8ff;
  --blue-500: #2b6cff;
  --blue-600: #1c56e0;
  --blue-700: #1443b8;

  /* 의미 매핑 */
  --color-bg: var(--gray-50);
  --color-surface: #ffffff;
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary: var(--gray-500);
  --color-accent: var(--blue-500);
  --color-accent-hover: var(--blue-600);
  --color-accent-bg: var(--blue-50);
  --color-danger: #f04452;
  --color-danger-bg: #fef0f1;
  --color-warn: #ff9800;
  --color-warn-bg: #fff8e1;
  --color-success: #12b76a;
  --color-success-bg: #ecfdf3;

  /* 간격 — 4px 그리드 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* 모서리 · 그림자 — 테두리 대신 옅은 그림자로 뜨는 카드(경계선은 최소로) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 10px rgba(16, 24, 40, 0.08);
  --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.05), 0 1px 2px rgba(16, 24, 40, 0.04);
}