/* Recipe SNS 디자인 토큰 — single source of truth (ux-review 2026-07 처방).
   색상·타이포·radius 는 여기서만 정의하고 템플릿은 var()/유틸 클래스만 참조한다. */
:root {
  /* 브랜드 — 장식·아이콘용과 흰 텍스트 CTA 용을 분리 (WCAG AA) */
  --brand: #f97316;            /* orange-500 — 아이콘·보더·비텍스트 장식 */
  --brand-hover: #ea580c;      /* orange-600 */
  --brand-cta-bg: #c2410c;     /* orange-700 — 흰 텍스트 버튼 (5.2:1) */
  --brand-cta-hover: #9a3412;  /* orange-800 */
  --ink: #1c1917;              /* stone-900 */
  --ink-hover: #44403c;        /* stone-700 */
  --text-muted: #57534e;       /* stone-600 — 보조 텍스트 최소 대비 */
  /* 브랜드 그라디언트 — 1벌만 (로고와 동일) */
  --grad-brand: linear-gradient(135deg, #FF5C9D, #FFB23D);
  --grad-fallback: linear-gradient(135deg, #FFF3E9 0%, #FFE0CC 100%);
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-modal: 16px;
  --btn-h: 40px;
}

/* ── 타이포 3단계 (caption=text-xs 12px / body 15px / h1 28px) ── */
.text-h1 { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
@media (max-width: 640px) { .text-h1 { font-size: 22px; } }
.text-body { font-size: 15px; line-height: 1.5; }

/* ── 접근성 — 키보드 focus 전역 가시화 (2.4.7) ── */
:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; }

/* ── 브랜드 그라디언트 유틸 ── */
.bg-grad-brand { background: var(--grad-brand); }

/* ── 썸네일 로딩 skeleton + 실패 fallback ── */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton,
.thumb-tone {
  background: linear-gradient(90deg, #f1ece4 25%, #faf6ef 50%, #f1ece4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.thumb-tone:has(img) { animation: none; }
.thumb-fallback {
  background: var(--grad-fallback) !important;
  animation: none !important;
  display: flex; align-items: center; justify-content: center;
}
.thumb-fallback::before { content: "🍳"; font-size: 40px; opacity: .35; }