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

:root {
  --white: #fff;
  --white-feint: #898d8e;
  --black: #0b1012;
  --black-2: #111517;
  --yellow: #fff312;
  --blue: #83e6f7;
  --green: #8df0cc;
  --hue-0: var(--yellow);
  --hue-1: #f08;
  --hue-2: #d0e;
  --hue-3: #91f;
  --hue-4: #1e75f7;
  --hue-5: #0cdcf7;
  --hue-6: var(--green);
  --hue-0-transparent: #fff31244;
  --hue-1-transparent: #ff008844;
  --hue-2-transparent: #dd00ee44;
  --hue-3-transparent: #9911ff44;
  --hue-4-transparent: #8ac0ff44;
  --hue-5-transparent: #0cdcf744;
  --hue-6-transparent: #8df0cc44;
  --text: var(--white);
  --accent: var(--blue);
  --accent-transparent: #83e6f71d;
  --primary-control-color: var(--white);
  --layer: #0b1011;
  --border: #1d2628;
  --secondary-control-color: #8ac0ff0d;
  --background: var(--black);
  --layer-transparent: #14171caa;
  --divider: #1a1e26;
  --feint-text: #586d8c;
  --font-mono: "Azeret Mono", monospace;
  --dot-size: 1px;
  --gap-size: 20px;
  --offset: calc(var(--gap-size) / 2);
}

body {
  background: var(--black);
  color: var(--text);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.btn-primary {
  @apply bg-yellow-400 text-black font-bold py-2 px-4 rounded shadow hover:bg-yellow-300 transition;
}
.btn-secondary {
  @apply bg-blue-400 text-white font-bold py-2 px-4 rounded shadow hover:bg-blue-300 transition;
}
.card {
  @apply bg-gray-800 rounded-xl shadow p-6 border border-gray-700;
}
.animate-fade-in {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 0.8s forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}