@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --font-sans: "Inter", "Segoe UI", -apple-system, system-ui, sans-serif;
  --font-display: "Space Grotesk", "Inter", "Segoe UI", -apple-system, system-ui, sans-serif;
}

/* Light overrides that sit on top of default Bootstrap styles */
body {
  background-color: #f8f9fa;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
}

.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("assets/banner.jpg") center/cover no-repeat;
  color: #fff;
}

.swatch-chip {
  height: 150px;
}

.color-card {
  border: 1px solid var(--bs-border-color, #dee2e6);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.color-card:hover,
.color-card:focus-visible {
  transform: scale(1.03);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease;
}