@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

.text-primary {
  @apply text-black;
}

.text-secondary {
  @apply text-[#5F6368];
}

.btn-primary {
  @apply flex flex-row bg-black text-white px-3 py-2 rounded-md items-center;
}

.btn-secondary {
  @apply flex flex-row border border-black bg-white text-black px-4 py-2 rounded-md;
}

.btn-tertiary {
  @apply flex flex-row bg-black text-white px-4 py-2 rounded-md;
}

@layer base {
  :root {
    --radius: 0.5rem;
  }
}

.chakra-wallet-adapter-button {
  border-radius: 4px;
  border: 1px solid rgba(229, 229, 229, 0.5);
  box-shadow: 0px 0px 20px 0px rgba(99, 231, 135, 0.3);
  background-color: white;
  color: #142a1d;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: 'DM Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  height: 48px;
  line-height: 48px;
  padding: 0 24px;
  border-radius: 4px;
}

.chakra-wallet-adapter-button:not([disabled]):hover {
  background-color: #e5e5e580;
}

.wallet-adapter-button-start-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
