:root {
  --theme-primary: #ff6b9d;
  --theme-primary-2: #ff8ab9;
  --theme-accent: #ffa500;
  --theme-soft: #fff5f9;
  --theme-soft-2: #ffe5f0;
  --theme-soft-3: #ffd4e5;
  --theme-text: #555555;
  --theme-text-strong: #333333;
}

body.theme-pedia {
  background: var(--theme-soft);
  color: var(--theme-text);
}

body.theme-pedia #app > header,
body.theme-pedia header {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-primary-2));
  border-bottom: 4px solid var(--theme-accent);
  box-shadow: 0 10px 24px rgba(255, 107, 157, 0.2);
}

body.theme-pedia header .text-gray-800,
body.theme-pedia header .text-gray-600,
body.theme-pedia header .text-gray-700 {
  color: #ffffff !important;
}

body.theme-pedia header .bg-gray-200 {
  background: #ffffff;
}

body.theme-pedia header button {
  color: #ffffff;
}

body.theme-pedia .bg-gray-800 {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-primary-2)) !important;
  color: #ffffff !important;
}

body.theme-pedia .bg-gray-800:hover {
  filter: brightness(0.95);
}

body.theme-pedia .text-gray-900 {
  color: var(--theme-text-strong);
}

body.theme-pedia .border-gray-200 {
  border-color: var(--theme-soft-3);
}

body.theme-pedia .bg-gray-100,
body.theme-pedia .bg-gray-50 {
  background: var(--theme-soft-2);
}

body.theme-pedia .text-gray-500,
body.theme-pedia .text-gray-400 {
  color: #777777;
}

body.theme-pedia footer {
  color: #777777;
}