/* Contract for GitHub Copilot:
  - Use ONLY var(--token) colors from tokens.css.
  - Do NOT invent new classes. Allowed: .appbar, .nav, .hero, .section, .grid, .card, .btn, .btn-primary, .btn-tonal, .btn-tertiary, .footer
  - Homepage layout per /frontend/design/homepage_spec.md
*/
/* Examples it should copy */
.appbar {
  background: var(--primary); color: var(--on-primary);
  padding: 16px; box-shadow: var(--shadow);
}
.hero {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff; text-align: center; padding: 72px 16px;
}
.card {
  background: var(--surface); color: var(--on-surface);
  border-radius: 16px; box-shadow: var(--shadow); padding: 18px;
}
.btn { border-radius: var(--radius-pill); padding: 12px 18px; font-weight: 700; }
.btn-tertiary { background: var(--tertiary); color: var(--on-tertiary); }
.btn-tonal { background: var(--primary-container); color: var(--on-primary-container); }