@import 'colors.css';
@import 'typography.css';
@import 'spacing.css';
@import 'effects.css';

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  font-family: var(--font-body);
  color: var(--text-primary);
  overflow-x: hidden;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

.nav-contact-link { transition: color 160ms var(--ease-standard); }
.nav-contact-link:hover { color: var(--text-brand); }

.btn-whatsapp { transition: background 160ms var(--ease-standard); }
.btn-whatsapp:hover { background: #1DA851; }

.btn-outline-hero {
  transition: background 160ms var(--ease-standard), border-color 160ms var(--ease-standard);
}
.btn-outline-hero:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.4);
}