/* ========================================
   Member Color System
   Individual color themes for each re;BON member
   ======================================== */

/* Member color definitions */
:root {
  --nemu-primary: #ec4899;      /* Pink - ねむ */
  --nemu-secondary: #f472b6;
  --nemu-gradient: linear-gradient(135deg, #ec4899, #f472b6);

  --ramune-primary: #06b6d4;    /* Cyan - らむね */
  --ramune-secondary: #22d3ee;
  --ramune-gradient: linear-gradient(135deg, #06b6d4, #22d3ee);

  --oshiruko-primary: #a855f7;  /* Purple - おしるこ */
  --oshiruko-secondary: #c084fc;
  --oshiruko-gradient: linear-gradient(135deg, #a855f7, #c084fc);

  --kururu-primary: #fbbf24;    /* Yellow - くるる */
  --kururu-secondary: #fcd34d;
  --kururu-gradient: linear-gradient(135deg, #fbbf24, #fcd34d);
}

/* Base member card styling */
.member-card {
  --member-primary: var(--primary-500);
  --member-secondary: var(--primary-400);
  --member-gradient: linear-gradient(135deg, var(--primary-500), var(--primary-400));
}

/* Member-specific card colors */
.member-card[data-member="nemu"],
.member-card[data-member="ねむ"],
.member-card[data-member="ねむ_Nemu"] {
  --member-primary: var(--nemu-primary);
  --member-secondary: var(--nemu-secondary);
  --member-gradient: var(--nemu-gradient);
}

.member-card[data-member="ramune"],
.member-card[data-member="らむね"],
.member-card[data-member="らむね_Ramune"] {
  --member-primary: var(--ramune-primary);
  --member-secondary: var(--ramune-secondary);
  --member-gradient: var(--ramune-gradient);
}

.member-card[data-member="oshiruko"],
.member-card[data-member="おしるこ"],
.member-card[data-member="おしるこ_Oshiruko"] {
  --member-primary: var(--oshiruko-primary);
  --member-secondary: var(--oshiruko-secondary);
  --member-gradient: var(--oshiruko-gradient);
}

.member-card[data-member="kururu"],
.member-card[data-member="くるる"],
.member-card[data-member="くるる_Kururu"] {
  --member-primary: var(--kururu-primary);
  --member-secondary: var(--kururu-secondary);
  --member-gradient: var(--kururu-gradient);
}

/* Apply member colors to card elements */
.member-card:hover {
  border-color: var(--member-primary);
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.1),
    0 0 0 1px var(--member-primary);
}

[data-theme="dark"] .member-card:hover {
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.3),
    0 0 20px -5px var(--member-primary);
}

/* Member name with gradient */
.member-card .member-name {
  background: var(--member-gradient);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
  font-weight: var(--font-bold);
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Avatar border with member color */
.member-avatar-container {
  position: relative;
}

.member-card:hover .member-avatar-container::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--member-gradient);
  z-index: -1;
  opacity: 0.5;
  filter: blur(8px);
}

/* Member links accent */
.member-card .member-link:hover {
  background: var(--member-gradient);
  color: white;
  border-color: var(--member-primary);
}

/* Badge colors */
.member-card .badge {
  border-color: var(--member-primary);
  color: var(--member-primary);
}

.member-card .badge.filled {
  background: var(--member-gradient);
  color: white;
  border: none;
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .member-card .member-name {
    animation: none !important;
  }
}