:root {
  @apply bg-primary-bg text-secondary-text font-serif;
  --color-eureka: #38b2ac;
  --color-primary-bg: rgba(242, 242, 247, 1);
  --color-secondary-bg: rgba(255, 255, 255, 1);
  --color-tertiary-bg: rgba(242, 242, 247, 1);
  --color-primary-text: rgba(0, 0, 0, 0.85);
  --color-secondary-text: rgba(0, 0, 0, 0.7);
  --color-tertiary-text: rgba(0, 0, 0, 0.55);
}

.dark {
  --color-eureka: #38b2ac;
  --color-primary-bg: rgba(0, 0, 0, 1);
  --color-secondary-bg: rgba(28, 28, 30, 1);
  --color-tertiary-bg: rgba(44, 44, 46, 1);
  --color-primary-text: rgba(255, 255, 255, 0.85);
  --color-secondary-text: rgba(255, 255, 255, 0.7);
  --color-tertiary-text: rgba(255, 255, 255, 0.55);
}

h1,
h2,
h3 {
  @apply text-primary-text;
}

a:hover,
a:hover * {
  @apply text-eureka transition duration-300 ease-in-out;
}

code {
  direction: ltr;
}