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

:root {
  --color-bg0: #fbf1c7;
  --color-bg1: #ebdbb2;
  --color-bg4: #a89984;

  --color-fg0: #282828;
  --color-fg1: #3c3836;
  --color-fg4: #7c6f64;

  --color-ac0: #83a598;
  --color-ac1: #fabd2f;
  --color-ac2: #8ec07c;

  --color-err: #cc241d;

  --app-width: 70%;
  font-size: calc((100vw / 1920) * 20);
}

[data-theme="dark"] {
  --color-bg0: #282828;
  --color-bg1: #3c3836;
  --color-bg4: #7c6f64;

  --color-fg0: #fbf1c7;
  --color-fg1: #ebdbb2;
  --color-fg4: #a89984;

  --color-ac0: #076678;
  --color-ac1: #b57614;
  --color-ac2: #427b58;

  --color-err: #cc241d;
}

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  transition-property: color, background-color, border-color;
  transition-duration: 0.3s;

  overflow: hidden;
  color: var(--color-fg1);
  background-color: var(--color-bg0);
}

body * {
  scrollbar-color: var(--color-ac0) var(--color-bg1);
  scrollbar-width: thin;
}

audio::-webkit-media-controls-panel {
  background-color: var(--color-bg1);
}

@media (max-width: 1024px) {
  :root {
    font-size: calc((100vw / 1920) * 56);
    --app-width: 100%;
  }
}

@media (max-width: 640px) {
  :root {
    font-size: calc((100vw / 1920) * 64);
  }
}