:root{
  --surface: var(--app-surface, #ffffff);
}

body{
  background: var(--app-bg, #ffffff);
}

.hero{
  background: color-mix(in srgb, var(--app-primary, #0d6efd) 6%, var(--surface));
}

.hero-card{
  background: var(--surface);
}

.category-tile:hover{
  border-color: color-mix(in srgb, var(--app-primary, #0d6efd) 35%, #dee2e6);
}

code{
  background: color-mix(in srgb, var(--app-primary, #0d6efd) 10%, transparent);
  padding: .1rem .3rem;
  border-radius: .35rem;
}