/* frontend/src/styles/tokens.css
 * 디자인 토큰 — 기준: D:/WORK/CLAUDE/design/toss-design-guide.md (찜마켓 전용 §3.1·§3.2·§4·§7 제외).
 * 값은 이 파일에만 둔다. theme.css 와 컴포넌트는 변수만 참조한다.
 */
:root {
  /* §2.1 컬러 */
  --color-bg-default: #ffffff;
  --color-bg-subtle: #f9fafb;
  --color-text-primary: #191f28;
  --color-text-secondary: #4e5968;
  --color-text-tertiary: #8b95a1;
  --color-blue-primary: #3182f6;
  --color-blue-light: #e8f3ff;
  --color-blue-strong: #1a64d4;
  --color-success: #00c896;
  --color-warning: #f4ac3a;
  --color-error: #f04452;
  --color-info: #3182f6;
  --color-line-default: #e5e8eb;
  --color-line-strong: #d1d6db;
  --color-on-primary: #ffffff;         /* 채운 배경 위 글자 (§3.3 Primary·Danger 텍스트) */

  /* §3.5 알림 */
  --notice-success-bg: #ecfdf5;
  --notice-success-text: #065f46;
  --notice-success-border: #10b981;
  --notice-info-bg: #e8f3ff;
  --notice-info-text: #1a64d4;
  --notice-warning-bg: #fffbeb;
  --notice-warning-text: #92400e;
  --notice-error-bg: #fef2f2;
  --notice-error-text: #991b1b;

  /* §2.2 타이포그래피 */
  --font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --fs-display: 36px;
  --fw-display: 800;
  --ls-display: -0.8px;
  --fs-title-1: 26px;
  --fw-title-1: 800;
  --ls-title-1: -0.5px;
  --fs-title-2: 20px;
  --fw-title-2: 700;
  --ls-title-2: -0.3px;
  --fs-title-3: 16px;
  --fw-title-3: 700;
  --fs-body: 16px;
  --fs-label: 14px;
  --fw-label: 500;
  --fs-caption: 13px;
  --fs-small: 11px;
  --fw-small: 800;
  --ls-small: 1.5px;
  --line-height: 1.6;

  /* §2.3 간격 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;

  /* §2.4 모서리 */
  --radius-badge: 6px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-card-lg: 16px;
  --radius-verdict: 20px;
  --radius-pill: 999px;

  /* §2.5 그림자 · §3.6 모달 */
  --shadow-card: 0 1px 3px rgba(25, 31, 40, 0.05), 0 1px 2px rgba(25, 31, 40, 0.08);
  --shadow-float: 0 4px 12px rgba(25, 31, 40, 0.08);
  --shadow-modal: 0 10px 40px rgba(25, 31, 40, 0.15);
  --modal-dim: rgba(25, 31, 40, 0.5);

  /* §5 모바일 */
  --touch-min: 44px;
}