/* 토스풍 · 클로드 디자인 기반 디자인 토큰 (docs/ui-map.md §5.2~§5.4) */
:root {
  --si-brand: #3182F6;
  --si-success: #00C471;
  --si-danger: #F04452;
  --si-muted: #8B95A1;
  --si-text: #191F28;
  --si-text-sub: #4E5968;
  --si-bg: #FFFFFF;
  --si-bg-section: #F2F4F6;

  --si-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --si-size-title: 24px;
  --si-size-section: 18px;
  --si-size-body: 15px;
  --si-size-meta: 13px;

  /* 8px 그리드 */
  --si-space-1: 8px;
  --si-space-2: 16px;
  --si-space-3: 24px;
  --si-space-4: 32px;

  --si-radius-btn: 8px;
  --si-radius-card: 16px;
  --si-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);

  /* 모션 — 마이크로 전환/화면 진입 2단만 둔다 (과한 애니메이션 금지) */
  --si-dur-fast: 150ms;
  --si-dur-view: 220ms;
  --si-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}