@import url(./css/variables.module.css);
@import url(./css/reset.module.css);
@import url(./css/general.module.css);
@import url(./css/layout.module.css);
@import url(./css/typography.module.css);
@import url(./css/mobile.module.css);

/* Additional styles for dynamic content */
[data-content] {
  transition: opacity 0.3s ease;
}

.pill-button.primary {
  background: var(--color-accent);
  color: var(--color-text);
}

.pill-button.secondary {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.coffee-shop .pill-button.primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-bg);
}
.coffee-shop .pill-button.secondary {
  background: transparent;
  border: 2px solid var(--color-bg);
  color: var(--color-bg);
}
.coworking-space {
  background-image: url(./img.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.coworking-space #hero-section .underlay {
  background-image: none;
}
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
li {
  font-size: calc(var(--base-font-size) * 1.618);
}
.cta-box .pill-button:nth-child(2),
.cta {
  background-color: var(--color-accent);
}
.pill-button:nth-child(1) {
  background-color: transparent;
}