@import 'variables.css';
@import 'typography.css';
@import 'animations.css';
@import 'cards.css';
@import 'responsive.css';
@import 'layout.css';

/* General styles */
body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  font-weight: var(--body-font-weight);
  color: var(--body-color);
  background-color: var(--card-color);
  line-height: var(--line-height-body);
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

button {
  background-color: var(--button-color);
  color: var(--button-color-inverted);
  border: none;
  border-radius: var(--button-border-radius);
  padding: 0.5em 1em;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

button:hover {
  background-color: var(--accent-color-background-muted);
}