:root {
  --gr-black: #050505;
  --gr-dark-grey: #111111;
  --gr-card-bg: #151515;
  --gr-text: #ffffff;
  --gr-muted: #888888;
  --gr-border: #222222;
  --gr-accent: #ffffff;
  --gr-glass: rgba(255, 255, 255, 0.03);
}

html,
body {
  height: 100%;
  margin: 0;
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--gr-black);
  color: var(--gr-text);
  display: flex;
  flex-direction: column;
}

.main-wrapper {
  flex: 1 0 auto;
}

/* Transitions */
.fade-in {
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}