/* ============================================================
   Lumi Brand Tokens — 4색 시그니처 그라데이션 (전 페이지 공용)
   ============================================================
   메모리: project_brand_gradient_signature.md
   "구름 위 햇살" — 핑크 → 라벤더 → 노랑 → 베이지 4색
   ------------------------------------------------------------
   사용 원칙
   - ✅ 시선 끄는 곳에만 (히어로·CTA·로고·강조 카운트·진행바)
   - ✅ 카드 hover·보더 강조 (미세하게)
   - ❌ 모든 카드 배경에 채우기 (산만)
   - ❌ 본문 텍스트에 그라데이션 (가독성 저하)
   ============================================================ */

:root {
  /* === Brand Palette === */
  --lumi-pink: #FF6B8B;
  --lumi-lavender: #DDA0DD;
  --lumi-gold: #EDD080;
  --lumi-beige: #DABA65;

  /* === 4색 시그니처 그라데이션 (90deg / 135deg / radial) === */
  --gradient-brand: linear-gradient(90deg, #FF6B8B 0%, #DDA0DD 33%, #EDD080 66%, #DABA65 100%);
  --gradient-brand-135: linear-gradient(135deg, #FF6B8B 0%, #DDA0DD 33%, #EDD080 66%, #DABA65 100%);
  --gradient-brand-radial: radial-gradient(circle at 30% 30%, #FF6B8B, #DDA0DD 40%, #EDD080 70%, #DABA65 100%);

  /* === 부드러운 배경 (카드 hover·subtle 보더용) === */
  --gradient-brand-soft: linear-gradient(135deg, rgba(255,107,139,.08) 0%, rgba(221,160,221,.07) 33%, rgba(237,208,128,.06) 66%, rgba(218,186,101,.05) 100%);

  /* === 다크 모드 미세 채도 (변경 없이 동일 4색 유지) === */
  --gradient-brand-glow: 0 0 24px rgba(255,107,139,.18), 0 0 48px rgba(221,160,221,.10);
}

/* ============================================================
   유틸리티 클래스 (선택적 — 인라인 var(--gradient-brand-135) 권장)
   ============================================================ */

/* 그라데이션 텍스트 (히어로 타이틀·강조 카운트) */
.brand-gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 그라데이션 보더 (카드 hover·강조 박스) */
.brand-gradient-border {
  position: relative;
  background-clip: padding-box;
  border: 1px solid transparent;
}
.brand-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-brand-135);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 진행 바 (사진 → 등록 5단계 등) */
.brand-gradient-bar {
  background: var(--gradient-brand);
  border-radius: 999px;
}