:root {
  --sc-primary-color: #4f46e5;
  --sc-secondary-color: #6b7280;
  --sc-text-color: #1f2937;
  --sc-bg-color: #ffffff;
  --sc-border-color: #e5e7eb;
  --sc-hover-color: #f3f4f6;
  --sc-success-color: #10b981;
  --sc-danger-color: #ef4444;
  --sc-post-bg-color: #ffffff;
  --sc-comment-bg-color: #f8f9fa;
  --sc-username-color: #1e40af;
  --sc-timestamp-color: #6b7280;
  --sc-like-color: #3b82f6;
  --sc-love-color: #f43f5e;
  --sc-reaction-hover-color: #f1f5f9;
  --sc-reaction-picker-bg: #ffffff;
  --sc-container-max-width: 800px;
  --sc-post-spacing: 20px;
  --sc-border-radius: 8px;
  --sc-card-padding: 16px;
  --sc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sc-heading-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sc-base-font-size: 14px;
  --sc-line-height: 1.4;
  --sc-letter-spacing: 0px;
  --sc-animation-speed: 0.3s;
  --sc-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#social-community {
  max-width: var(--sc-container-max-width);
  font-family: var(--sc-font-family);
  font-size: var(--sc-base-font-size);
  line-height: var(--sc-line-height);
  letter-spacing: var(--sc-letter-spacing);
  color: var(--sc-text-color);
}

#social-community h1, #social-community h2, #social-community h3, #social-community h4, #social-community h5, #social-community h6 {
  font-family: var(--sc-heading-font-family);
}

#social-community .post-card {
  background: var(--sc-post-bg-color);
  border: 1px solid var(--sc-border-color);
  border-radius: var(--sc-border-radius);
  padding: var(--sc-card-padding);
  margin-bottom: var(--sc-post-spacing);
  box-shadow: var(--sc-shadow);
  transition: all var(--sc-animation-speed) ease;
}

#social-community .post-card:hover {
  transform: translateY(-2px);
}

#social-community .username-link {
  color: var(--sc-username-color) !important;
}

#social-community .text-muted, #social-community .timestamp {
  color: var(--sc-timestamp-color) !important;
}

#social-community .comment {
  background: var(--sc-comment-bg-color);
  border-radius: var(--sc-border-radius);
  padding: calc(var(--sc-card-padding) * 0.75);
}

#social-community .btn-primary {
  background-color: var(--sc-primary-color);
  border-color: var(--sc-primary-color);
}

#social-community .btn-success {
  background-color: var(--sc-success-color);
  border-color: var(--sc-success-color);
}

#social-community .btn-danger {
  background-color: var(--sc-danger-color);
  border-color: var(--sc-danger-color);
}

#social-community .reaction-like.reacted {
  color: var(--sc-like-color) !important;
}

#social-community .reaction-love.reacted {
  color: var(--sc-love-color) !important;
}

#social-community .post-actions .btn:hover {
  background-color: var(--sc-reaction-hover-color);
}

#social-community .reaction-picker {
  background: var(--sc-reaction-picker-bg);
  border: 1px solid var(--sc-border-color);
  border-radius: 25px;
  box-shadow: var(--sc-shadow);
}