/* ========================
   Warm Cream/Rose Theme
   CSS Custom Properties (Variables)
   ======================== */

:root {
  /* ── Core Cream Palette ── */
  --cream: #FAF7F4;
  --cream-card: #FFFFFF;
  --cream-border: #EDE8E3;
  --cream-hover: #F5F0EB;

  /* ── Warm Text Colors ── */
  --warm-text: #3D3229;
  --warm-text-light: #8C7E72;
  --warm-text-muted: #B5A99A;

  /* ── Peach Accents ── */
  --peach: #C27578;
  --peach-light: #D9B0A7;
  --peach-bg: #FDF5F3;

  /* ── Rose Accents ── */
  --sage: #D3878A;
  --sage-dark: #B86B6E;
  --sage-bg: #FDF5F3;

  /* ── Teal Accents ── */
  --teal: #16322E;
  --teal-bg: #EBF0EE;

  /* ── Semantic Variables ── */
  --bg-primary: var(--cream);
  --bg-secondary: var(--cream-card);
  --bg-tertiary: var(--cream-hover);

  --border-default: var(--cream-border);
  --border-hover: var(--sage);

  --text-primary: var(--warm-text);
  --text-secondary: var(--warm-text-light);
  --text-muted: var(--warm-text-muted);

  --accent-primary: var(--sage);
  --accent-secondary: var(--peach);
  --accent-tertiary: var(--teal);

  /* ── Component-Specific Variables ── */
  --header-bg: rgba(250, 247, 244, 0.95);
  --card-bg: var(--cream-card);
  --card-border: var(--cream-border);
  --card-shadow: 0 1px 3px rgba(61, 50, 41, 0.04), 0 4px 12px rgba(61, 50, 41, 0.02);

  --button-primary-bg: var(--sage);
  --button-primary-text: #FFFFFF;
  --button-secondary-bg: var(--cream-hover);
  --button-secondary-text: var(--warm-text);

  --input-bg: var(--cream-card);
  --input-border: var(--cream-border);
  --input-text: var(--warm-text);
  --input-placeholder: var(--warm-text-muted);

  /* ── Form Elements ── */
  --success-bg: #E8F5E9;
  --success-text: #2E7D32;
  --error-bg: #FFEBEE;
  --error-text: #C62828;
  --warning-bg: #FFF8E1;
  --warning-text: #F57F17;
  --info-bg: #E3F2FD;
  --info-text: #1565C0;
}

/* ========================
   Brand Gradient (Warm Palette)
   ======================== */
.brand-gradient {
  background: linear-gradient(135deg, var(--sage), var(--sage-dark));
}

.brand-gradient-horizontal {
  background: linear-gradient(to right, var(--sage), var(--sage-dark));
}

.brand-gradient-text {
  background: linear-gradient(135deg, var(--sage), var(--peach));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-gradient-border {
  border-image: linear-gradient(135deg, var(--peach), var(--peach-light), #E8C4B8) 1;
}

.brand-gradient-shadow {
  box-shadow: 0 4px 15px -3px rgba(211, 135, 138, 0.3),
              0 2px 6px -2px rgba(194, 117, 120, 0.2);
}

/* ========================
   Skeleton Loading Animation
   ======================== */
.skeleton {
  background: linear-gradient(90deg, var(--cream-hover) 25%, var(--cream) 50%, var(--cream-hover) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ========================
   Scrollbar Styling
   ======================== */
.vendor-scroll::-webkit-scrollbar {
  width: 6px;
}

.vendor-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.vendor-scroll::-webkit-scrollbar-thumb {
  background: var(--cream-border);
  border-radius: 3px;
}

.vendor-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--warm-text-light);
}

/* ========================
   Chat Conversation Item States
   ======================== */
.chat-item { transition: background-color 150ms ease; }
.chat-item:hover:not(.conv-active) { background-color: #EDE8E0; }
.chat-item.conv-active { background-color: var(--sage-bg); }

.conv-item-avatar {
  background-color: #d1d5db;
  color: white;
  transition: background-color 150ms ease;
}
.chat-item:hover:not(.conv-active) .conv-item-avatar,
.chat-item.conv-active .conv-item-avatar {
  background-color: var(--sage);
}

.dark .conv-item-avatar { background-color: #4b5563; }
.dark .chat-item:hover:not(.conv-active) { background-color: #374151; }
.dark .chat-item.conv-active { background-color: rgba(211, 135, 138, 0.1); }
.dark .chat-item:hover:not(.conv-active) .conv-item-avatar,
.dark .chat-item.conv-active .conv-item-avatar { background-color: var(--sage); }