/* components.css: Buttons, cards, forms, navigation */
/*
STYLE GUIDE REQUIREMENTS FOR MINI PROJECTS:
1. All user buttons must use the green box style (see .btn, button).
2. All figures (SVG, Canvas, etc.) must use a black outline by default.
3. Internal color fills for figures must use the same red, blue, and green as defined in colors.css (var(--primary-red), var(--primary-blue), var(--primary-green)).
*/
.btn, button {
  display: inline-block;
  padding: 0.5em 1.2em;
  border: none;
  border-radius: 4px;
  background: var(--primary-green);
  color: var(--text-light);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.btn:hover, button:hover {
  background: var(--primary-blue);
}

.card {
  background: var(--background-light);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  padding: 1rem;
  margin-bottom: 1rem;
}

input[type="text"], input[type="number"], select {
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

nav {
  background: var(--primary-blue);
  color: var(--text-light);
  padding: 0.5em 1em;
  border-radius: 4px;
  margin-bottom: 1rem;
}