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

:root {
  --heatmap-0: #e8e6e6;
  --heatmap-1: var(--sage);
  --heatmap-2: var(--teal-700);
  --heatmap-3: var(--teal);
  --nav-height: 56px;
  --r42-size: 48px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font-sans);
  cursor: pointer;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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